1. 程式人生 > >用JS寫Ajax的請求函式(1)

用JS寫Ajax的請求函式(1)

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請求函式。