深入理解ajax系列第一篇——XHR对象
前面的話
1999年，微軟公司發(fā)布IE5，第一次引入新功能：允許javascript腳本向服務(wù)器發(fā)起HTTP請(qǐng)求。這個(gè)功能當(dāng)時(shí)并沒有引起注意，直到2004年Gmail發(fā)布和2005年Google Map發(fā)布，才引起廣泛重視。2005年2月，ajax這個(gè)詞第一次正式提出，指圍繞這個(gè)功能進(jìn)行開發(fā)的一整套做法。從此，ajax成為腳本發(fā)起HTTP通信的代名詞，W3C也在2006年發(fā)布了它的國(guó)際標(biāo)準(zhǔn)。本文是ajax系列的第一篇——XHR對(duì)象
?
概述
ajax是asynchronous javascript and XML的簡(jiǎn)寫，中文翻譯是異步的javascript和XML，這一技術(shù)能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無須卸載頁(yè)面，會(huì)帶來更好的用戶體驗(yàn)。雖然名字中包含XML，但ajax通信與數(shù)據(jù)格式無關(guān)
ajax包括以下幾步驟：1、創(chuàng)建AJAX對(duì)象；2、發(fā)出HTTP請(qǐng)求；3、接收服務(wù)器傳回的數(shù)據(jù)；4、更新網(wǎng)頁(yè)數(shù)據(jù)
概括起來，就是一句話，ajax通過原生的XMLHttpRequest對(duì)象發(fā)出HTTP請(qǐng)求，得到服務(wù)器返回的數(shù)據(jù)后，再進(jìn)行處理
?
創(chuàng)建
ajax技術(shù)的核心是XMLHttpRequest對(duì)象(簡(jiǎn)稱XHR)，這是由微軟首先引入的一個(gè)特性，其他瀏覽器提供商后來都提供了相同的實(shí)現(xiàn)。XHR為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口，能夠以異步方式從服務(wù)器取得更多信息，意味著用戶單擊后，可以不必刷新頁(yè)面也能取得新數(shù)據(jù)
IE5是第一款引入XHR對(duì)象的瀏覽器。在IE5中，XHR對(duì)象是通過MSXML庫(kù)中的一個(gè)ActiveX對(duì)象實(shí)現(xiàn)的，而IE7+及其他標(biāo)準(zhǔn)瀏覽器都支持原生的XHR對(duì)象
創(chuàng)建一個(gè)XHR對(duì)象，也叫實(shí)例化一個(gè)XHR對(duì)象，因?yàn)閄MLHTTPRequest()是一個(gè)構(gòu)造函數(shù)。下面是創(chuàng)建XHR對(duì)象的兼容寫法
var xhr; if(window.XMLHttpRequest){xhr = new XMLHttpRequest(); }else{xhr = new ActiveXObject('Microsoft.XMLHTTP'); }[注意]如果要建立N個(gè)不同的請(qǐng)求，就要使用N個(gè)不同的XHR對(duì)象。當(dāng)然可以重用已存在的XHR對(duì)象，但這會(huì)終止之前通過該對(duì)象掛起的任何請(qǐng)求
?
發(fā)送請(qǐng)求
open()
在使用XHR對(duì)象時(shí)，要調(diào)用的第一個(gè)方法是open()，如下所示，該方法接受3個(gè)參數(shù)
xhr.open("get","example.php", false);1、open()方法的第一個(gè)參數(shù)用于指定發(fā)送請(qǐng)求的方式，這個(gè)字符串，不區(qū)分大小寫，但通常使用大寫字母。"GET"和"POST"是得到廣泛支持的
"GET"用于常規(guī)請(qǐng)求，它適用于當(dāng)URL完全指定請(qǐng)求資源，當(dāng)請(qǐng)求對(duì)服務(wù)器沒有任何副作用以及當(dāng)服務(wù)器的響應(yīng)是可緩存的情況下
"POST"方法常用于HTML表單。它在請(qǐng)求主體中包含額外數(shù)據(jù)且這些數(shù)據(jù)常存儲(chǔ)到服務(wù)器上的數(shù)據(jù)庫(kù)中。相同URL的重復(fù)POST請(qǐng)求從服務(wù)器得到的響應(yīng)可能不同，同時(shí)不應(yīng)該緩存使用這個(gè)方法的請(qǐng)求
除了"GET"和"POST"之外，參數(shù)還可以是"HEAD"、"OPTIONS"、"PUT"。而由于安全風(fēng)險(xiǎn)的原因，"CONNECT"、"TRACE"、"TRACK"被禁止使用
[注意]關(guān)于HTTP協(xié)議8種常用方法的詳細(xì)介紹移步至此
2、open()方法的第二個(gè)參數(shù)是URL，該URL相對(duì)于執(zhí)行代碼的當(dāng)前頁(yè)面，且只能向同一個(gè)域中使用相同端口和協(xié)議的URL發(fā)送請(qǐng)求。如果URL與啟動(dòng)請(qǐng)求的頁(yè)面有任何差別，都會(huì)引發(fā)安全錯(cuò)誤
3、open()方法的第三個(gè)參數(shù)是表示是否異步發(fā)送請(qǐng)求的布爾值，如果不填寫，默認(rèn)為true，表示異步發(fā)送
4、如果請(qǐng)求一個(gè)受密碼保護(hù)的URL，把用于認(rèn)證的用戶名和密碼作為第4和第5個(gè)參數(shù)傳遞給open()方法
send()
send()方法接收一個(gè)參數(shù)，即要作為請(qǐng)求主體發(fā)送的數(shù)據(jù)。調(diào)用send()方法后，請(qǐng)求被分派到服務(wù)器
如果是GET方法，send()方法無參數(shù)，或參數(shù)為null；如果是POST方法，send()方法的參數(shù)為要發(fā)送的數(shù)據(jù)
xhr.open("get", "example.txt", false); xhr.send(null);?
接收響應(yīng)
一個(gè)完整的HTTP響應(yīng)由狀態(tài)碼、響應(yīng)頭集合和響應(yīng)主體組成。在收到響應(yīng)后，這些都可以通過XHR對(duì)象的屬性和方法使用，主要有以下4個(gè)屬性
responseText: 作為響應(yīng)主體被返回的文本(文本形式) responseXML: 如果響應(yīng)的內(nèi)容類型是'text/xml'或'application/xml'，這個(gè)屬性中將保存著響應(yīng)數(shù)據(jù)的XML DOM文檔(document形式) status: HTTP狀態(tài)碼(數(shù)字形式) statusText: HTTP狀態(tài)說明(文本形式)在接收到響應(yīng)后，第一步是檢查status屬性，以確定響應(yīng)已經(jīng)成功返回。一般來說，可以將HTTP狀態(tài)碼為200作為成功的標(biāo)志。此時(shí)，responseText屬性的內(nèi)容已經(jīng)就緒，而且在內(nèi)容類型正確的情況下，responseXML也可以訪問了。此外，狀態(tài)碼為304表示請(qǐng)求的資源并沒有被修改，可以直接使用瀏覽器中緩存的版本；當(dāng)然，也意味著響應(yīng)是有效的
無論內(nèi)容類型是什么，響應(yīng)主體的內(nèi)容都會(huì)保存到responseText屬性中，而對(duì)于非XML數(shù)據(jù)而言，responseXML屬性的值將為null
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText); }else{alert('request was unsuccessful:' + xhr.status); }?
同步
如果接受的是同步響應(yīng)，則需要將open()方法的第三個(gè)參數(shù)設(shè)置為false，那么send()方法將阻塞直到請(qǐng)求完成。一旦send()返回，僅需要檢查XHR對(duì)象的status和responseText屬性即可
同步請(qǐng)求是吸引人的，但應(yīng)該避免使用它們?？蛻舳薺avascript是單線程的，當(dāng)send()方法阻塞時(shí)，它通常會(huì)導(dǎo)致整個(gè)瀏覽器UI凍結(jié)。如果連接的服務(wù)器響應(yīng)慢，那么用戶的瀏覽器將凍結(jié)
<button id="btn">獲取信息</button> <div id="result"></div> <script> btn.onclick = function(){//創(chuàng)建xhr對(duì)象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}//發(fā)送請(qǐng)求 xhr.open('get','/uploads/rs/26/ddzmgynp/message.xml',false);xhr.send();//同步接受響應(yīng)if(xhr.readyState == 4){if(xhr.status == 200){//實(shí)際操作 result.innerHTML += xhr.responseText;}} } </script> //message.xml <p>hello world</p>?
異步
如果需要接收的是異步響應(yīng)，這就需要檢測(cè)XHR對(duì)象的readyState屬性，該屬性表示請(qǐng)求/響應(yīng)過程的當(dāng)前活動(dòng)階段。這個(gè)屬性可取的值如下：
0(UNSENT):未初始化。尚未調(diào)用open()方法 1(OPENED):啟動(dòng)。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法 2(HEADERS_RECEIVED):發(fā)送。己經(jīng)調(diào)用send()方法，且接收到頭信息 3(LOADING):接收。已經(jīng)接收到部分響應(yīng)主體信息 4(DONE):完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了理論上，只要readyState屬性值由一個(gè)值變成另一個(gè)值，都會(huì)觸發(fā)一次readystatechange事件。可以利用這個(gè)事件來檢測(cè)每次狀態(tài)變化后readyState的值。通常，我們對(duì)readyState值為4的階段感興趣，因?yàn)檫@時(shí)所有數(shù)據(jù)都已就緒
[注意]必須在調(diào)用open()之前指定onreadystatechange 事件處理程序才能確保跨瀏覽器兼容性，否則將無法接收readyState屬性為0和1的情況
xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status == 200){alert(xhr.responseText);}} } <button id="btn">獲取信息</button> <div id="result"></div> <script> btn.onclick = function(){//創(chuàng)建xhr對(duì)象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}//異步接受響應(yīng) xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){//實(shí)際操作 result.innerHTML += xhr.responseText;}}}//發(fā)送請(qǐng)求 xhr.open('get','message.xml',true);xhr.send(); } </script> //message.xml <p>hello world</p>超時(shí)
XHR對(duì)象的timeout屬性等于一個(gè)整數(shù)，表示多少毫秒后，如果請(qǐng)求仍然沒有得到結(jié)果，就會(huì)自動(dòng)終止。該屬性默認(rèn)等于0，表示沒有時(shí)間限制
如果請(qǐng)求超時(shí)，將觸發(fā)ontimeout事件
[注意]IE8-瀏覽器不支持該屬性
xhr.open('post','test.php',true); xhr.ontimeout = function(){console.log('The request timed out.'); } xhr.timeout = 1000; xhr.send();?
優(yōu)化
使用AJAX接收數(shù)據(jù)時(shí)，由于網(wǎng)絡(luò)和數(shù)據(jù)大小的原因，并不是立刻就可以在頁(yè)面中顯示出來。所以，更好的做法是，在接受數(shù)據(jù)的過程中，顯示一個(gè)類似loading的小圖片，并且禁用按鈕；當(dāng)數(shù)據(jù)完全接收后，再隱藏該圖片，并啟用按鈕
<button id="btn">獲取信息</button> <img id="img" height="16" style="display:none" src="data:image/gif;base64,R0lGODlhIAAgALMAAP///7Ozs/v7+9bW1uHh4fLy8rq6uoGBgTQ0NAEBARsbG8TExJeXl/39/VRUVAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAAACwAAAAAIAAgAAAE5xDISSlLrOrNp0pKNRCdFhxVolJLEJQUoSgOpSYT4RowNSsvyW1icA16k8MMMRkCBjskBTFDAZyuAEkqCfxIQ2hgQRFvAQEEIjNxVDW6XNE4YagRjuBCwe60smQUDnd4Rz1ZAQZnFAGDd0hihh12CEE9kjAEVlycXIg7BAsMB6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YEvpJivxNaGmLHT0VnOgGYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHQjYKhKP1oZmADdEAAAh+QQFBQAAACwAAAAAGAAXAAAEchDISasKNeuJFKoHs4mUYlJIkmjIV54Soypsa0wmLSnqoTEtBw52mG0AjhYpBxioEqRNy8V0qFzNw+GGwlJki4lBqx1IBgjMkRIghwjrzcDti2/Gh7D9qN774wQGAYOEfwCChIV/gYmDho+QkZKTR3p7EQAh+QQFBQAAACwBAAAAHQAOAAAEchDISWdANesNHHJZwE2DUSEo5SjKKB2HOKGYFLD1CB/DnEoIlkti2PlyuKGEATMBaAACSyGbEDYD4zN1YIEmh0SCQQgYehNmTNNaKsQJXmBuuEYPi9ECAU/UFnNzeUp9VBQEBoFOLmFxWHNoQw6RWEocEQAh+QQFBQAAACwHAAAAGQARAAAEaRDICdZZNOvNDsvfBhBDdpwZgohBgE3nQaki0AYEjEqOGmqDlkEnAzBUjhrA0CoBYhLVSkm4SaAAWkahCFAWTU0A4RxzFWJnzXFWJJWb9pTihRu5dvghl+/7NQmBggo/fYKHCX8AiAmEEQAh+QQFBQAAACwOAAAAEgAYAAAEZXCwAaq9ODAMDOUAI17McYDhWA3mCYpb1RooXBktmsbt944BU6zCQCBQiwPB4jAihiCK86irTB20qvWp7Xq/FYV4TNWNz4oqWoEIgL0HX/eQSLi69boCikTkE2VVDAp5d1p0CW4RACH5BAUFAAAALA4AAAASAB4AAASAkBgCqr3YBIMXvkEIMsxXhcFFpiZqBaTXisBClibgAnd+ijYGq2I4HAamwXBgNHJ8BEbzgPNNjz7LwpnFDLvgLGJMdnw/5DRCrHaE3xbKm6FQwOt1xDnpwCvcJgcJMgEIeCYOCQlrF4YmBIoJVV2CCXZvCooHbwGRcAiKcmFUJhEAIfkEBQUAAAAsDwABABEAHwAABHsQyAkGoRivELInnOFlBjeM1BCiFBdcbMUtKQdTN0CUJru5NJQrYMh5VIFTTKJcOj2HqJQRhEqvqGuU+uw6AwgEwxkOO55lxIihoDjKY8pBoThPxmpAYi+hKzoeewkTdHkZghMIdCOIhIuHfBMOjxiNLR4KCW1ODAlxSxEAIfkEBQUAAAAsCAAOABgAEgAABGwQyEkrCDgbYvvMoOF5ILaNaIoGKroch9hacD3MFMHUBzMHiBtgwJMBFolDB4GoGGBCACKRcAAUWAmzOWJQExysQsJgWj0KqvKalTiYPhp1LBFTtp10Is6mT5gdVFx1bRN8FTsVCAqDOB9+KhEAIfkEBQUAAAAsAgASAB0ADgAABHgQyEmrBePS4bQdQZBdR5IcHmWEgUFQgWKaKbWwwSIhc4LonsXhBSCsQoOSScGQDJiWwOHQnAxWBIYJNXEoFCiEWDI9jCzESey7GwMM5doEwW4jJoypQQ743u1WcTV0CgFzbhJ5XClfHYd/EwZnHoYVDgiOfHKQNREAIfkEBQUAAAAsAAAPABkAEQAABGeQqUQruDjrW3vaYCZ5X2ie6EkcKaooTAsi7ytnTq046BBsNcTvItz4AotMwKZBIC6H6CVAJaCcT0CUBTgaTg5nTCu9GKiDEMPJg5YBBOpwlnVzLwtqyKnZagZWahoMB2M3GgsHSRsRACH5BAUFAAAALAEACAARABgAAARcMKR0gL34npkUyyCAcAmyhBijkGi2UW02VHFt33iu7yiDIDaD4/erEYGDlu/nuBAOJ9Dvc2EcDgFAYIuaXS3bbOh6MIC5IAP5Eh5fk2exC4tpgwZyiyFgvhEMBBEAIfkEBQUAAAAsAAACAA4AHQAABHMQyAnYoViSlFDGXBJ808Ep5KRwV8qEg+pRCOeoioKMwJK0Ekcu54h9AoghKgXIMZgAApQZcCCu2Ax2O6NUud2pmJcyHA4L0uDM/ljYDCnGfGakJQE5YH0wUBYBAUYfBIFkHwaBgxkDgX5lgXpHAXcpBIsRADs=" alt="loading"> <div id="result"></div> <script> var add = (function(){var counter = 0;return function(){return ++counter;} })(); btn.onclick = function(){img.style.display = 'inline-block';btn.setAttribute('disabled','');//創(chuàng)建xhr對(duì)象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}//異步接受響應(yīng) xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){img.style.display = 'none';btn.removeAttribute('disabled');var data = JSON.parse(xhr.responseText);var sum = add() - 1;if(sum < data.length){result.innerHTML += data[sum]; }}}}//發(fā)送請(qǐng)求 xhr.open('get','data.php',true);xhr.send(); } </script> <?php echo json_encode([1,2,3,4,5]); ?>?
最后
通過實(shí)例的演示發(fā)現(xiàn)，ajax前端本身的內(nèi)容并不難。但是，由于ajax涉及到一些后端及網(wǎng)絡(luò)的知識(shí)，使得學(xué)起來不是很容易。以后的博文將逐步深入地介紹ajax的重點(diǎn)內(nèi)容
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/6036475.html
總結(jié)
以上是生活随笔為你收集整理的深入理解ajax系列第一篇——XHR对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux系统下springboot j
- 下一篇： Windows Server 2012活