原生封裝Ajax

對比使用JQuery直接封裝好的ajax方法，利用原生封裝AJax在使用的程式碼就要多得多，但是，原生封裝AJax並不難，在剛接觸到AJax時，相信很多人都不明白是什麼東西，下面我舉出兩個例子、分別用原生封裝Ajax實現demo與直接呼叫JQuery封裝好的AJax來實現demo，幫助大家跟進一步的理解。

首先，大家在寫原生AJax時，有下面四個步驟
  1. 建立XMLHttpRequest物件，建立連線
   var  xmlhttp=new XMLHttpRequest();
  2. 向伺服器傳送請求，設定配置引數
   xmlhttp.open("GET","test1.txt",true);
   xmlhttp.send();
  3. 註冊回撥函式，伺服器響應後執行一些基於響應的任務
   xmlHttp.onreadystatechange = function () {};
  4. 伺服器響應
 

Demo1—原生封裝

1，封裝Ajax函式 function Ajax(Obj) { //1，建立XMLHttpRequest物件，建立連線 var xhr; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); } else {// code for IE6, IE5 xhr = new ActiveXObject(“Microsoft.XMLHTTP”); } //2，開啟連線，配置引數 xhr.open(Obj.type, Obj.url, Obj.async); xhr.send(null); //3，註冊回撥函式，伺服器響應後執行一些基於響應的任務 xhr.onreadystatechange = function () { // readyState == 4說明請求已完成 if (xhr.readyState == 4 && xhr.status == 200) { // 4,伺服器響應，從伺服器獲得資料，處理返回資料 var data = JSON.parse(xhr.responseText); Obj.success(data)

            }
        }
    }

接下來，以上簡單的封裝完成，就可以使用了 Ajax({ type: ‘get或者post方法’, async: “是否非同步”, url: ‘介面地址’, success: function (information) { //響應成功後執行你想要的操作 } });

Demo2–JQuery直接使用

.ajax(type:‘get