JS學習之ajax相關知識和ajax的封裝

時間 2019-12-09

原文原文鏈接

XMLHttpRequest對象php

1. XMLHttpRequest用於在後臺與服務器交換數據，是AJAX之因此能對網頁進行局部刷新的核心,同時Ajax技術離開了XMLHttpRequest對象將失去與服務器異步通訊的能力。web

2：不一樣的瀏覽器建立XMLHttpRequest對象使用的語句是不一樣的。ajax

3：3.XMLHttpRequest對象方法與屬性編程

方法	描述
open(method,url,[async],[username],[password])	規定請求的類型、URL 以及是否異步處理請求。json method：請求的類型；GET 或 POST（特別說明的是：仍要特別注意兩種請求類型下的參數漢字亂碼的問題） url：要訪問的文件的URL url - 服務器上的文件 url - 服務器上的文件open() 方法的 url 參數是服務器上文件的地址：xmlhttp.open("GET","ajax_test.asp",true);該文件能夠是任何類型的文件，好比 .txt 和 .xml，或者服務器腳本文件，好比 .asp 和.php （在傳回響應以前，可以在服務器上執行任務）。瀏覽器 async：true（異步）或 false（同步）。該參數是可選的，默認爲 true。異步優勢在等待服務器響應時執行其餘腳本；當響應就緒後對響應進行處理 username：若是須要身份驗證，則能夠在此指定用戶名。該參數沒有默認值。 password：若是須要身份驗證，則能夠在此指定口令。該參數沒有默認值。說明：一般使用其中的前三個參數。事實上，即便須要異步鏈接，一般指定第三個參數爲「true」，這樣更容易理解。
send([string])	將要發送的內容發送到服務器。緩存 string：僅用於 POST 請求。
setRequestHeader(header,value)	向請求添加 HTTP 頭。安全 header: 規定頭的名稱 value: 規定頭的值若是在open方法中使用的method是「POST」，則要經過如下語句設置請求頭：httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4：關於使用get仍是post服務器

get 簡單方便，在大部分狀況下都能用併發

post 在傳送的數據比較多時，或者比較重要的數據時請用post

5:在使用get請求時候，有可能獲得的是緩存的結果，須要對請求處理下

xhr.open('get','test.php?t='+Math.random())

6:異步 - True 或 False？

AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 對象若是要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：

對於 web 開發人員來講，發送異步請求是一個巨大的進步。不少在服務器執行的任務都至關費時。AJAX 出現以前，這可能會引發應用程序掛起或中止。

經過 AJAX，JavaScript 無需等待服務器的響應，而是：

1）在等待服務器響應時執行其餘腳本

2）當響應就緒後對響應進行處理

屬性	描述
readyState	1）提供當前 HTML 的就緒狀態，它用於肯定該請求是否已經開始、是否獲得了響應或者請求/響應模型是否已經完成。 2）幫助肯定讀取服務器提供的響應文本或數據是否安全。在Ajax應用程序中須要瞭解五種就緒狀態： 0：請求沒有發出（在調用 open() 以前） 1：請求已經創建但尚未發出（調用 send() 以前） 2：請求已經發出正在處理之中（這裏一般能夠從響應獲得內容頭部） 3：請求已經處理，響應中一般有部分數據可用，可是服務器尚未完成響應 4：響應已完成，能夠訪問服務器響應並使用它。對於Ajax編程，須要直接處理的惟一狀態就是就緒狀態4，它表示服務器響應已經完成，能夠安全地使用響應數據了。
status	服務器響應的狀態代碼。服務器響應完成後(readyState=4)，從完成的響應信息中可得到狀態代碼。好比：輸入了錯誤的URL請求將獲得404錯誤碼，它表示該頁面不存在； 403和401錯誤碼錶示所訪問的數據受到保護或者禁止訪問； 200狀態碼錶示一切順利。所以，若是狀態碼是200並且就緒狀態是4，就能夠處理服務器的數據了，並且這些數據應該就是要求的數據（而不是錯誤或者其餘有問題的信息）。
onreadystatechange (onload)	用於指定XMLHttpRequest對象的狀態改變函數（相似於按鈕對象的onclick屬性），當XMLHttpRequest對象狀態(readyState的值)改變時，該函數將被觸發，該函數也稱回調函數。假設回調函數爲callback，則它的代碼一般爲： function callback(){ if (httpRequest.readyState == 4) { if (httpRequest.status == 200) { 事件響應代碼 }}} 註釋：onreadystatechange 事件被觸發 5 次（0 - 4），對應着 readyState 的每一個變化。當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒： xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ <span style="white-space:pre"> </span> document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }} 注意： onload事件是全部請求都完成時候觸發，也就是readystate=4的時候，新版本的XMLHttpRequest不建議使用 onreadystatechange事件，可是onload事件ie6,7,8不支持
①responseText②responseXML	如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。 ①服務器返回的請求響應文本。 ②服務器端返回的XML類型的響應。這種情形下，服務器端的響應類型爲xml，經過以下代碼設置：response.setContentType("text/xml;charset=UTF-8");

7：AJAX運行流程

整個Ajax技術牢牢圍繞在XMLHttpRequest對象周圍
（1）建立XMLHttpRequest對象，XMLHttpRequest對象的做用如同名字所暗示的，容許經過客戶端腳原本發送HTTP請求。

（2）XMLHttpRequest打開鏈接併發送數據

服務器端響應處理階段

（3)XMLHttpRequest得到服務器端響應狀態。XMLHttpRequest對象也是一個普通的JavaScript對象，如一個普通按鈕或一個普通文本框同樣，能夠觸發事件；而XMLHttpRequest觸發的事件就是onreadystatechange，當XMLHttpRequest對象的狀態改變時，將觸發它。爲XMLHttpRequest對象的onreadystatechange事件指定事件處理函數，該函數將在XMLHttpRequest狀態改變時被執行，這個事件處理函數也叫回調函數（XMLHttpRequest狀態改變，且readyState=4&&status=200時，代表服務器響應已經完成且是正確的響應狀態，此時能夠開始處理服務器響應）
（4）客戶端處理函數執行。進入事件處理函數後，XMLHttpRequest依然不可或缺，事件處理函數借助於XMLHttpRequest的responseText或responseXML屬性獲取服務器的響應，至此XMLHttpRequest運行週期結束；JavaScript經過DOM操做將響應動態加載到XHMTL頁面中。
整個過程，從發送HTTP請求到監控服務器的響應狀態，到獲取響應數據，XMLHttpRequest一直是Ajax技術的靈魂

8：XMLHttpRequest工做流程圖

ajax的封裝

/*
         URL       地址  
         method    請求的方式get/post
         dataType  返回的數據類型string/xml/json
         data      請求時候傳的數據（一個對象）
         succ      成功後的回調函數
         fail      失敗後的回調函數
         data的數據格式 
         {
           'user' : 'xubj',
           'password':123
         }
         user=xubj&password=123
       */ 
       function  ajax(obj){
              var settings={
                     url:'',
                     method:'get',
                     data:{},
                     dataType:'json',
                     succ:function(){},
                     fail:function(){}
              };
       
       //用戶傳的參數覆蓋默認參數
       for (var attr in obj){
             settings[attr] = obj[attr]
       }
       //把數據拼接成正確的格式  user=xubj&passowrd=123
       var arr=[];
       for(var attr in settings.data){
            arr.push(attr+'='+settings.data[attr]);
       }
       settings.data=arr.join('&');
       //聲明一個ajax對象
       var ajax=window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
       //設置請求方式
       if(settings.method.toLocaleCase()==='get'){
          ajax.open('get',settings.url+'?'+settings.data+'&'+new Date().getTime(),true);
          ajax.send();
       }else{
          ajax.open('post',settings.url,true);
          ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
          ajax.send(settings.data);
       }
       //設置完成事件的兼容性
       if(typeof ajax.onload==='undefined'){
            ajax.onreadystatechange=ready;
       }else{
           ajax.onload=ready;
       }
       function ready(){
             if(ajax.readyState==4){
                 if(ajax.status==200){
                     switch(settings.dataType.toLocaleCase()){
                         case  'string':
                         settings.succ(ajax.responseText);
                         break;
                         case  'json':
                         settings.succ(JSON.parse(ajax.responseText));
                         break;
                         case   'xml':
                         settings.succ(ajax.responseXML);
                     }
                 }else{
                     settings.fail(ajax.status );
                 }
             }
       }
     }
/*
 使用：
 ajax({
 url:'test.php',
 method:'get',
 dataType:'json',
 data:{
 uesr:'xubj',
 password:123
 },
 succ:fucntion(){
 成功處理
 },
 fail:function(){
 失敗處理
 }
 });
*/