用JS寫Ajax的請求函式(1)
阿新 • • 發佈:2019-02-03
ajax:一種請求資料的方式,不需要重新整理整個頁面;
ajax的技術核心是 XMLHttpRequest 物件;
ajax 請求過程:建立 XMLHttpRequest 物件、連線伺服器、傳送請求、接收響應資料;
function ajax(url,fnSucc,fnFaild){
//1.建立Ajax物件
if(window.XMLHttpRequest)
//雖然沒定義,但是以屬性形式存在,所以不會報錯
{
var oAjax=new XMLHttpRequest();
}
else{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP" );
}
alert(oAjax);
//2.連線伺服器
//open(方法,檔名,非同步專輸)
oAjax.open('GET',url,true);
//3.傳送請求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange=function(){
//oAjax.readyState //瀏覽器和伺服器,進行到哪一步了if(oAjax.readyState==4)//讀取完成
{
if(oAjax.status==200)
//成功
{
fnSucc(oAjax.responseText);
}else{
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
}
};
}
1、建立
1.1、IE7及其以上版本中支援原生的 XHR 物件
var oAjax = new XMLHttpRequest();
var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);
2、連線和傳送
2.1、open()函式的三個引數:請求方式、請求地址、是否非同步請求
2.2、GET 請求方式是通過URL引數將資料提交到伺服器的,POST則是通過將資料作為 send 的引數提交到伺服器;
3、接收
3.1、接收到響應後,響應的資料會自動填充XHR物件
status:響應的HTTP狀態碼;
3.2、XHR物件的readyState屬性表示請求/響應過程的當前活動階段,這個屬性的值如下
0-未初始化,尚未呼叫open()方法;
1-啟動,呼叫了open()方法,未呼叫send()方法;
2-傳送,已經呼叫了send()方法,未接收到響應;
3-接收,已經接收到部分響應資料;
4-完成,已經接收到全部響應資料;
適合初學Ajax的同學看的簡單Ajax請求函式,以後有機會還會補充更為完備的Ajax請求函式。