javascript前端和后臺(tái)進(jìn)行數(shù)據(jù)交互方法示例
在開(kāi)發(fā)中遇到了在沒(méi)有jQuery的情況下需要與后臺(tái)進(jìn)行部分?jǐn)?shù)據(jù)的交互,查找了部分資料使用JavaScript實(shí)現(xiàn)了操作,記錄一下。
//獲取XMLHttpRequest對(duì)象用于與后臺(tái)交互數(shù)據(jù)
function getXHR(){
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();//新版本瀏覽器
}catch(e)
{
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//老版本瀏覽器 }
catch(e)
{
alert("你的瀏覽器不支持ajax");
return false;
}
}
}
return xmlHttp;
}
function check() {
var pass = document.getElementById("pass").value;
//1/得到xhr對(duì)象
var xhr=getXHR();
//2.注冊(cè)狀態(tài)變化監(jiān)聽(tīng)器
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200) {
var obj = document.getElementById("checkPass");
if("true" == xhr.responseText){
obj.innerHTML = "驗(yàn)證通過(guò)";
obj.style.color = "green";
}else{
obj.innerHTML = "原密碼輸入錯(cuò)誤!";
obj.style.color = "brown";
return;
}
}
}
}
//3.建立與服務(wù)器的連接(post請(qǐng)求方式,也可以使用get請(qǐng)求方式)
xhr.open("post","請(qǐng)求數(shù)據(jù)的地址");
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4.向服務(wù)器發(fā)出請(qǐng)求(使用post請(qǐng)求方式將數(shù)據(jù)發(fā)往后臺(tái))
xhr.send("pass="+pass);
}
到此這篇關(guān)于javascript前端和后臺(tái)進(jìn)行數(shù)據(jù)交互方法的文章就介紹到這了,更多相關(guān)javascript前端和后臺(tái)數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)時(shí)間軸自動(dòng)排列效果
本文主要介紹了js實(shí)現(xiàn)新增加事件:時(shí)間軸自動(dòng)排列效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
ES6新特性三: Generator(生成器)函數(shù)詳解
這篇文章主要介紹了ES6新特性之Generator(生成器)函數(shù),簡(jiǎn)單分析了Generator(生成器)函數(shù)的功能、定義、調(diào)用方法并結(jié)合實(shí)例形式給出了相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
javascript的事件觸發(fā)器介紹的實(shí)現(xiàn)
這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實(shí)現(xiàn),本文所指觸發(fā)器是用程序來(lái)觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下2014-06-06
利用MutationObserver實(shí)現(xiàn)計(jì)算首屏?xí)r間
在前端開(kāi)發(fā)中,優(yōu)化頁(yè)面性能是至關(guān)重要的,計(jì)算首屏?xí)r間是衡量網(wǎng)頁(yè)性能的重要指標(biāo),本文將介紹如何使用MutationObserver來(lái)獲取首屏?xí)r間的最佳實(shí)踐,感興趣的可以了解下2023-07-07
JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解
這篇文章主要介紹了JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
bootstrap paginator分頁(yè)前后臺(tái)用法示例
這篇文章主要為大家詳細(xì)介紹了bootstrap paginator分頁(yè)前后臺(tái)用法示例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
javascript中parentNode,childNodes,children的應(yīng)用詳解
本篇文章是對(duì)javascript中parentNode,childNodes,children的應(yīng)用進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12

