ajax知識介紹

標籤：

AJAX編程

即 Asynchronous [e‘s??kr?n?s] Javascript And XML， AJAX 不是一門的新的語言，而是對現有技術的綜合利用。 本質是在HTTP協議的基礎上以非同步方式與伺服器進行通訊。

1.1、 非同步

指某段程式執行時不會阻塞其它程式執行，其表現形式為程式的執行順序不依賴程式本身的書寫順序，相反則為同步。

其優勢在於不阻塞程式的執行，從而提升整體執行效率。

XMLHttpRequest可以以非同步方式的處理常式。

2.2、 XMLHttpRequest

瀏覽器內建對象，用於在後台與伺服器通訊(交換資料) ， 由此我們便可實現對網頁的部分更新，而不是重新整理整個頁面。

```javascript /js 內建的 http 請求對象 XMLHttpRequest/

/*1.怎麼使用 這個內建對象*/var xhr = new XMLHttpRequest;/*2.怎麼樣去組請求*//*請求的行*/xhr.open(‘post‘,‘01.php‘);/*要求標頭*///get  沒有必要設定//post 必須設定 Content-Type: application/x-www-form-urlencodedxhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);/*請內容*//*3.發送請求*/xhr.send("name=xjj&age=10");

```

2.2.1、請求

HTTP請求3個組成部分與XMLHttpRequest方法的對應關係

1、請求行

xhr.open(‘post‘,‘01.php‘);

2、要求標頭

xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);get請求可以不設定

3、請求主體

xhr.send("name=xjj&age=10");get可以傳空

注意書寫順序

2.2.2、響應

HTTP響應是由服務端發出的，作為用戶端更應關心的是響應的結果。

HTTP響應3個組成部分與XMLHttpRequest方法或屬性的對應關係。

由於伺服器做出響應需要時間（比如網速慢等原因），所以我們需要監聽伺服器響應的狀態，然後才能進行處理。

javascript if(xhr.readyState == 4 && xhr.status == 200){ console.log(‘ok‘); console.log(xhr.responseText); /*把內容渲染在頁面當中*/ document.querySelector(‘#result‘).innerHTML = xhr.responseText; }readyState 0：請求未初始化（還沒有調用 open()）。 1：請求已經建立，但是還沒有發送（還沒有調用 send()）。 2：請求已發送，正在處理中（通常現在可以從響應中擷取內容標題）。 3：請求在處理中；通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的產生。 4：響應已完成；您可以擷取並使用伺服器的響應了。

onreadystatechange是Javascript的事件的一種，其意義在於監聽XMLHttpRequest的狀態

1、擷取狀態行（包括狀態代碼&狀態資訊）

xhr.status 狀態代碼xhr.statusText 狀態代碼資訊

2、擷取回應標頭

xhr.getResponseHeader(‘Content-Type‘);xhr.getAllResponseHeaders();

3、響應主體

xhr.responseTextxhr.responseXML

我們需要檢測並判斷回應標頭的MIME類型後確定使用request.responseText或者request.responseXML

2.3.3、API詳解

xhr.open() 發起請求，可以是get、post方式xhr.setRequestHeader() 佈建要求頭xhr.send() 發送請求主體get方式使用xhr.send(null)xhr.onreadystatechange = function () {} 監聽響應狀態xhr.status表示響應碼，如200xhr.statusText表示響應資訊，如OKxhr.getAllResponseHeaders() 擷取全部回應標頭資訊xhr.getResponseHeader(‘key‘) 擷取指定頭資訊xhr.responseText、xhr.responseXML都表示響應主體

註：GET和POST請求方式的差異（面試題）

1、GET沒有請求主體，使用xhr.send(null)

2、GET可以通過在請求URL上添加請求參數

3、POST可以通過xhr.send(‘name=itcast&age=10‘)

4、POST需要設定

5、GET效率更好（應用多）

6、GET大小限制約4K，POST則沒有限制

問題？如何擷取複雜資料呢？

2.3、 XML

1、必須有一個根項目 2、不可有空格、不可以數字或.開頭、大小寫敏感 3、不可交叉嵌套 4、屬性雙引號（瀏覽器自動修正成雙引號了） 5、特殊符號要使用實體 6、注釋和HTML一樣 雖然可以描述和傳輸複雜資料，但是其解析過於複雜並且體積較大，所以實現開發已經很少使用了。

xml <?xml version="1.0" encoding="UTF-8"?> <root> <arrayList> <array> <src>images/banner.jpg</src> <newPirce>12.00</newPirce> <oldPrice>30.00</oldPrice> </array> <array> <src>images/banner.jpg</src> <newPirce>12.00</newPirce> <oldPrice>30.00</oldPrice> </array> </arrayList> </root>```php <?php header(‘Content-Type:text/xml;charset=utf-8‘); /以xml格式傳輸資料的時候要求響應內容格式是 text/xml/

/*file_get_contents 擷取檔案內容*/$xml = file_get_contents(‘01.xml‘);/*輸出xml內容*/echo $xml;

?> javascript var xhr = new XMLHttpRequest; xhr.open(‘get‘,‘01.php‘); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ /擷取到XML格式內容 放回的是DOM對象 document/ var xml = xhr.responseXML; /通過選著器可以擷取到xml的資料/ console.log(xml.querySelectorAll(‘array‘)[0].querySelector(‘src‘).innerHTML); } } ```

2.4、 JSON

即 JavaScript Object Notation，另一種輕量級的文本資料交換格式，獨立於語言。

1、資料在成對的名稱和數值中 2、資料由逗號分隔(最後一個健/值對不能帶逗號) 3、花括弧儲存對象方括弧儲存數組 4、使用雙引號

JSON [ {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"}, {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"}, {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"} ]

JSON資料在不同語言進行傳輸時，類型為字串，不同的語言各自也都對應有解析方法，需要解析完成後才能讀取

1、PHP解析方法 jsonencode()、jsondecode() ```PHP <?php header(‘Content-Type:text/html;charset=utf-8‘); /以json格式傳輸資料的時候要求響應內容格式是 application/json/ /注意也可以不設定 但是這遵循的一個規範/

/*file_get_contents 擷取檔案內容*/$json = file_get_contents(‘01.json‘);/*輸出json內容*/echo $json;echo ‘<br><br>‘;$array = array(    array(‘src‘=>‘images/detail01.jpg‘,‘newPrice‘=>‘12.00‘,‘oldPrice‘=>‘455.00‘),    array(‘src‘=>‘images/detail02.jpg‘,‘newPrice‘=>‘65.00‘,‘oldPrice‘=>‘878.00‘),    array( ‘src‘=>‘images/detail01.jpg‘,‘newPrice‘=>‘100.00‘,‘oldPrice‘=>‘1000.00‘));/*將php數組轉化成json字元*/$json_array = json_encode($array);echo $json_array;echo ‘<br><br>‘;/*將json字元轉化成php數組*/$array_json = json_decode($json_array);echo $array_json;echo ‘<br><br>‘;

?>**1、Javascript 解析方法** JSON對象 JSON.parse()、JSON.stringify()； JSON相容處理json2.js 總結：JSON體積小、解析方便且高效，在實際開發成為首選。javascript var xhr = new XMLHttpRequest; xhr.open(‘get‘,‘01.php‘); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.status == 200 && xhr.readyState == 4){ /擷取僅僅是字串/ var text = xhr.responseText;

        /*需要把字串轉化成JSON對象*/        var json_obj = JSON.parse(text);        console.log(json_obj);        /*我們也可以把JSON對象轉化成字串*/        var json_str = JSON.stringify(json_obj);        console.log(json_str);    }}

```

2.5、 相容性

關於IE的相容方面，瞭解即可。 ```javascript function XHR() { var xhr; try { xhr = new XMLHttpRequest(); } /如果 try內的程式運行錯誤 拋出異常 捕捉異常 上面程式當中啟動並執行錯誤/ catch(e) { /在不同的IE版本下初始 ActiveXObject 需要傳入的標識/ var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

        for (var i=0;i<IEXHRVers.length;i++) {            try {                xhr = new ActiveXObject(IEXHRVers[i]);            }            catch(e) {                /*如果出現錯誤的時候  停止當次的迴圈*/                continue;            }        }    }    return xhr;}

```

2.6、 封裝ajax工具函數

```javascript /** * ITCAST WEB * Created by zhousg on 2016/5/24. / / * 1. 請求的類型 type get post * 2. 請求地址 url * 3. 是非同步還是同步的 async false true * 4. 請求內容的格式 contentType * 5. 傳輸的資料 data json對象 * * 6.響應成功處理函數 success function * 7.響應失敗的處理函數 error function * * 這些都是動態參數 參數對象 options * */

/封裝一個函數/ window.$ = {}; /申明一個ajax的方法/ $.ajax = function(options){

if(!options || typeof options != ‘object‘){    return false;}/*請求的類型*/var type = options.type || ‘get‘;/*預設get*//*請求地址 */var url = options.url || location.pathname;/*當前的地址*//*是非同步還是同步的 */var async = (options.async === false)?false:true;/*預設非同步*//*請求內容的格式 */var contentType = options.contentType || "text/html";/*傳輸的資料 */var data = options.data || {};/*｛name:‘‘,age:‘‘｝*//*在提交的時候需要轉成 name=xjj 這種格式*/var dataStr = ‘‘/*資料字串*/for(var key in data){    dataStr += key+‘=‘+data[key]+‘&‘;}dataStr = dataStr && dataStr.slice(0,-1);/*ajax 編程*/var xhr = new XMLHttpRequest();/*請求行*//*(type==‘get‘?url+‘?‘+dataStr:url)判斷當前的請求類型*/xhr.open(type,(type==‘get‘?url+‘?‘+dataStr:url),async);/*要求標頭*/if(type == ‘post‘){    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);}/*請求主體*//*需要判斷請求類型*/xhr.send(type==‘get‘?null:dataStr);/*監聽響應狀態的改變  響應狀態*/xhr.onreadystatechange = function(){    /*請求響應完成並且成功*/    if(xhr.readyState == 4 && xhr.status == 200){        /*success*/        var data = ‘‘;        var contentType = xhr.getResponseHeader(‘Content-Type‘);        /*如果我們伺服器返回的是xml*/        if(contentType.indexOf(‘xml‘) > -1){            data = xhr.responseXML;        }        /*如果我們的伺服器返回的是json字串*/        else if(contentType.indexOf(‘json‘) > -1){            /*轉化json對象*/            data = JSON.parse(xhr.responseText);        }        /*否則的話他就是字串*/        else{            data = xhr.responseText;        }        /*回調 成功處理函數*/        options.success && options.success(data);    }    /*計時請求xhr.status不成功  他也需要的響應完成才認作是一個錯誤的請求*/    else if(xhr.readyState == 4){        /*error*/        options.error && options.error(‘you request fail !‘);    }}

} $.post = function(options){ options.type = ‘post‘; $.ajax(options); } $.get = function(options){ options.type = ‘get‘; $.ajax(options); }

```

2.7、 jquery的ajax

• jQuery為我們提供了更強大的Ajax封裝
• $.ajax({}) 可配置方式發起Ajax請求
• $.get() 以GET方式發起Ajax請求
• $.post() 以POST方式發起Ajax請求
• $(‘form‘).serialize() 序列化表單（即格式化key=val&key=val）
• url 介面地址
• type 請求方式
• timeout 請求逾時
• dataType 伺服器返回格式
• data 發送請求資料
• beforeSend: function () {} 請求發起前調用
• success 成功響應後調用
• error 錯誤響應時調用
• complete 響應完成時調用（包括成功和失敗）
• jQuery Ajax介紹
• http://www.w3school.com.cn/jquery/jqueryrefajax.asp

ajax知識介紹