原生AJAX如何非同步提交資料？

標籤：request   狀態   重新整理   概述   ref   走勢圖   web伺服器   target   ica   

AJAX概述

  AJAX：Asynchronous Javascript And XML，非同步JS和XML。2001，Google為了改進搜尋的使用者體驗，提出了GoogleSugguest效果，正式提出了AJAX的概念。

　　　　目標：在無重新整理無提交的情況下，實現頁面內容的局部更新——資料來自於伺服器。

  常見應用：即時資料擷取(如股票走勢圖)、搜尋建議、聊天室、SPA

  AJAX應用依賴於瀏覽器底層提供的核心對象：

       XMLHttpRequest：用於向Web伺服器發起非同步請求，並接收響應訊息。

 

使用XHR發起非同步請求步驟：

(1)建立XHR對象 —— 每個XHR只能發一個請求

       varxhr = new XMLHttpRequest();

(2)綁定監聽函數，處理XHR的每一次狀態改變

       xhr.onreadystatechange = function(){ }

(3)開啟到Web伺服器的串連

       xhr.open(‘GET‘,‘9.php‘, true);

(4)發送請求訊息主體

       xhr.send(null);

 

若第(3)步中是POST方法，則要佈建要求頭格式，即

xhr.open(‘POST‘, ‘x.php‘, true);

xhr.setRequestHeader(‘Content-Type‘,  ‘application/x-www-form-urlencoded‘);  //修改請求訊息頭部

xhr.send(‘k1=v1&k2=v2&k3=v3‘);

 

以上是原生AJAX的基本步驟，練習內容為：仿google的搜尋建議。連結地址為：搜尋建議

原生AJAX如何非同步提交資料？