js ajax非同步互動

ajax目的：提高使用者體驗，較少網路資料的傳輸量

在解釋ajax原理之前，我們不妨先舉個「領導想找小李匯報一下工作」例子，領導想找小李問點事，就委託秘書去叫小李，自己就接著做其他事情，直到秘書告訴他小李已經到了，最後小李跟領導匯報工作。

ajax請求資料流程與「領導想找小李匯報一下工作」類似。其中最核心的依賴是瀏覽器提供的xmlhttprequest物件，它扮演的角色相當於秘書，使得瀏覽器可以發出http請求與接收http響應。瀏覽器接著做其他事情，等收到xhr返回來的資料再渲染頁面。理解了ajax的工作原理後，接下來我們**下如何使用ajax。

1.建立ajax核心物件xmlhttprequest(記得考慮相容性)

2.向伺服器傳送請求

xhr.open(method,url,async); 

send(string);//post請求時才使用字串引數，否則不用帶引數。

url：檔案在伺服器上的位置

async：true（非同步）或 false（同步）

注意：post請求一定要設定請求頭的格式內容

xhr.open("post","test.html",true); 

xhr.send("fname=henry&lname=ford"); //post請求引數放在send裡面，即請求體

responsetext 獲得字串形式的響應資料。

respon***ml 獲得xml 形式的響應資料。

①同步處理

xhr.open("get","info.txt",false); 

xhr.send(); 
document.getelementbyid("mydiv").innerhtml=xhr.responsetext; //獲取資料直接顯示在頁面上

xhr.onreadystatechange=function() 

}

0-（未初始化）open方法還未呼叫

1-（載入）伺服器連線已建立，open已呼叫

2-（載入完成）send()方法執行完成，已經接收到全部請求內容，請求已接受，即收到頭資訊

3-（互動）請求處理中，正在解析響應內容

4-（完成）響應內容解析完成，可以在客戶端呼叫了，請求完成，即響應完成

status其中status則獲取http狀態碼（響應）

那麼ajax狀態值與http狀態碼之間有什麼區別與聯絡呢？這是乙個值得思考的問題，雖然其對程式設計本身沒有用，但秉著知其然更要知其所以然的道理，我們還是來研究一下。 

眾所周知，ajax的核心是xhr物件，在ajax執行過程中，readystate的值從0開始變化，當ajax執行到send方法呼叫時，傳送http請求，http請求安裝步驟執行，此時status的值開始發生變化，ajax執行機制等待http請求返回結果。最後，當http請求返回結果後，無論http請求成功還是失敗、也不管是否請求到正確資訊，ajax的執行機制都會繼續執行，直到完成執行或者出錯為止。這就是我理解的ajax狀態值與http狀態碼之間的關係。

③get和post請求資料區別

請求資料時的區別，詳情見下面兩張圖：

總而言之：

onreadystatechange響應事件

案例：

建議：

ajax非同步互動

四部曲 一 建立非同步物件 二 開啟與伺服器的連線 僅僅開啟連線，並沒有傳送請求 xmlhttp.open 用來開啟與伺服器的連線，需要三個引數 請求引數 get post 請求的url 指定伺服器端的資源，例如 homework index.jsp 請求是否為非同步 如果true，傳送非同步請求 ...

Ajax 非同步互動

非同步互動 建立xmlhttprequest物件 呼叫xmlhttprequest物件的open 方法 引數第二個引數 表示當前請求的伺服器端位址鏈結 呼叫xmlhttprequest物件的send 方法 引數利用xmlhttprequest物件的onreadystatechange事件 伺服器端的...

原生ajax 非同步互動

實現ajax非同步互動步驟 建立xmlhttprequest核心物件 function getxhr else return xhr 與伺服器端建立連線 使用xmlhttprequest物件的open method,url 方法 method 設定當前請求的型別 url 設定當前請求的位址 如果是p...