關於非同步請求AJAX的詳解，非同步請求AJAX詳解

關於非同步請求AJAX的詳解，非同步請求AJAX詳解

1，非同步請求的方法步驟:

1,判斷目前使用者支援的瀏覽器類型

XMLHttpRequest:判斷是否支援非IE瀏覽器,對應的建立方法:xmlhttp = new XMLHttpRequest();

window.ActiveXObject:判斷是否支援IE瀏覽器,對應的建立方法:xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

2,開闢串連建立路徑

xmlhttp.open(參數一,參數二,參數三);

參數一:請求的方式get  post

參數二:請求路徑

參數三:表示是否是非同步請求,true(是),false(不是)

3,建立Binder 方法判斷請求的狀態

onreadystatechange:如果每一次請求的狀態改變的時候就會觸發該函數

3-1判斷是否是狀態4和串連正常200

注釋:readyState判斷請求狀態是否到4

 status:判斷響應的狀態代碼是否正常

3-2,擷取後台傳過來的資料responseText

var msg = xmlhttp.responseText;

3-3,把資料寫入指定的容器內

document.getElementById('span').innerHTML=decodeURI(msg,"UTF-8");

4,發送請求

xmlhttp.send(參數);get請求時參數為null,post請求時

非同步請求的5個狀態:

0表示請求未串連

1代表與伺服器已串連

2代表格服務器已接受資料

3正在處理資料

4處理完成

2,非同步要求方法

<script type="text/javascript">

var xmlhttp;

function getMsg(){

//支援非IE瀏覽器

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}else if(window.ActiveXObject){//支援IE瀏覽器

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//get請求

//xmlhttp.open("get","AjaxServlet?text=非同步請求&num="+Math.random(),true);

//post請求

xmlhttp.open("post","AjaxServlet",true);

//200代表請求正常,404:路徑錯誤,500:服務端代碼有錯誤

//onreadystatechange:如果每一次請求的狀態改變的時候就會觸發該函數

xmlhttp.onreadystatechange = function(){

//readyState判斷請求狀態是否到4

//status:判斷響應的狀態代碼是否正常

if(xmlhttp.readyState==4 && xmlhttp.status==200){

//擷取後台傳過來的資料responseText

var msg = xmlhttp.responseText; document.getElementById('span').innerHTML=decodeURI(msg,"UTF-8");

}

}

//若為post請求時要佈建要求頭資訊

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//發送請求

xmlhttp.send("text=sa123&num=123");

//若為get請求時

//xmlhttp.send(null);

}

</script>

3,自己封裝的非同步請求的類(Ajax.js)

/**

 * 封裝Ajax非同步請求的方法

 */

function $_Ajax(method,url,data,type,callback){

/**

 * method:請求類型(get,post)

 * url:請求路徑

 * data:請求參數

 * type:返回資料類型(text,xml)

 * callback:回呼函數

 */

var xmlhttp;

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}else if(window.ActiveXObject){

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}else{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

}

xmlhttp.open(method, url, true);

/**

 * 因為不同的頁面調用該方法的處理的方式不同

 * 所以要傳一個回呼函數,誰調用誰去實現

 */

xmlhttp.onreadystatechange=function(){

//如果請求完成並且沒有錯誤就執行該if語句中的代碼

if(xmlhttp.readyState==4 && xmlhttp.status==200){

//判斷使用者要求返回資料類型

if(type=="text"){

var text = xmlhttp.responseText;

//回呼函數

callback(text);

}else if(type=="xml"){

var xml = xmlhttp.responseXML;

callback(xml);

}

}

}

//如果使用者的請求是post請求

if(method=="post"){

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

}

//發送請求

xmlhttp.send(data);

}

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。