XHR詳細討論

XHR詳細討論

2015-01-28

返回類型：

XMLHttpRequest 的詳細屬性

responseText:    服務器相應的主體信息，即http的body信息

responseXML: 對於大量的格式化文檔，能夠用XML來傳輸或交換，由後臺程序把數據封裝在XML文檔中，js接收XML對象並解析

status:    服務器返回的狀態碼，例：200，成功

statusText: 服務器返回的狀態碼對應的文字描述，例如 200 ，OK中的OK

readyState: XMLHttpRequest 對象的自身狀態碼0-4

onreadystatechange: 事件屬性綁定，當XMLHttpRequest對象的狀態碼發生變化是，激發的函數

 

HTTP的頭信息的獲取：

利用getResponseHeader(); 或者 getAllResponseHeaders(); 來獲取

參數： 類型：'Content-Type','Date','Vary' 的等返回信息的值

注意：服務器集羣時：

    Vary 指緩存時應該判斷後面的因素

 

XMLHttpRequest 的詳細方法：

open("請求方式",url,同步/異步)；        

send(null/參數) 參數寫法：k1=v1&k2=v2&kn=vn

setRequestHeader(key,value);        //設置請求頭信息

Abort() 忽略，不要再進行下去，到此爲止

getResponseHeader(): 獲取響應的某個頭信息

getAllResponseHeaders(): 獲取響應的全部頭信息

異步原理

狀態值

1. XHR對象剛被建立時
2. open後爲1，此時已經創建鏈接成功
3. 接收頭信息完畢後爲2
4.  
5. 結束，斷開鏈接後爲4

ajax使用單線程實時插隊的方法，沒有使用多線程

異步不阻塞原理

 

 

Ajax實現無刷新頁面註冊：

script中代碼：

function ajaxreg(){ //步驟1：收集表單的數據     //步驟2：打開到後臺服務器鏈接（POST鏈接）     //步驟3：發送數據     //步驟4：監聽，回調等     //1.製造XHR     var xhr = createXHR();     //2.打開POST鏈接     xhr.open('POST','./AjaxReg.PHP',true);     //4.綁定     xhr.onreadystatechange = function(){         if(this.readyState == 4)             alert(this.responseText);     }     //3.收集表單數據     var un= document.getElementsByName('username')[0].value;     var em= document.getElementsByName('email')[0].value;     //4.send     //alert("username="+un+"&email="+em);     xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');        //POST 必須加上這一句     xhr.send("username="+un+"&email="+em);     return false; }

 

html代碼：

<h1>ajax註冊</h1> <div id="regres"></div> <form action="AjaxReg.php" method="post" target="regzone" onsubmit="return ajaxreg();">     <p>用戶名：<input type="text" name="username" /></p>     <p>郵件地址：<input type="text" name="email" /></p>     <p><input type="submit" name="註冊" /></p> </form>

 

AjaxReg.PHP代碼

<?php

print_r($_POST);

?>