原生javaScript中使用Ajax實現非同步通訊

標籤：ready   資料解析   app   就會   ons   post請求   使用   執行順序   頭部   

AJAX本質就是在HTTP協議的基礎上以非同步方式與伺服器進行通訊,所謂非同步,就是指某段程式執行時不會阻塞其它程式執行,其表現形式為程式的執行順序不依賴程式本身的書寫順序,相反則為同步.

以下開始簡單介紹一下使用原生JS來如何?AJAX非同步通訊

第一步:建立一個能夠實現非同步請求的對象  new XMLHttpRequest

var xhr=new XMLHttpRequest();console.log(xhr.readyState);//此時的狀態代碼輸出為0,它會返回XMLHTTP請求目前狀態,此階段確認XMLHttpRequest對象是否建立,並為調用open()方法進行未初始化做好準備.值為0表示對象已經存在,否則瀏覽器就會報錯

第二步:請求報文行 xhr.open();xhr.open("get","07-register.php?name="+name);

//第一個參數傳入請求方式,get/post,第二個參數是php的路徑,如果是使用get方式請求還需要在後面寫上需要傳遞的參數;xhr.open("post","07-register.php");//post請求只需php的路徑即可
consolg.log(xhr.readyState);//此時狀態代碼輸出為1,表示正在向伺服器發送資料

第三步:請求報文頭  xhr.setRequestHeader();

 這裡的請求報文頭在get請求方式中不需要設定;

xhr.setRquestHeader(‘Content-Type‘,‘application/x-www-from-urlencoded‘)

第四步:請求報文體 xhr.send();

//get請求報文體寫法xhr.send(null);//post請求報文體寫法xhr.send(‘name‘=name)//參數中傳入需要傳遞的參數

以上的請求步驟已經完成,接下來就是監聽伺服器的響應

xhr.onreadystatechange=function(){      console.log(xhr.readyState)  /*此時輸出2再輸出3,數值2表示已經接收完全響應資料.
並為下一階段對資料解析作好準備.狀態3此階段解析接收到的伺服器端響應資料。即根據伺服器端響應
頭部返回的MIME類型把資料轉換成能通過responseBody、responseText或responseXML屬性存取
的格式，為在用戶端調用作好準備。狀態3表示正在解析資料*//*判斷當前的響應是否成功  1.伺服器做出了響應  2.響應的結果是正確的*/    if(xhr.status==200 && xhr.readyState==4){                console.log(xhr.readyState);/*此階段確認全部資料都已經解析
為用戶端可用的格式，解析已經完成。值為4表示資料解析完畢，可以通過XMLHttpRequest對象的相應屬性取*/

var result=xhr.responseText;                //擷取到結果            }}

以上就是ajax簡單的請求步驟,如有錯誤,歡迎指正

原生javaScript中使用Ajax實現非同步通訊