XMLHttpRequest

XMLHttpRequest (XHR) 是一個 JavaScript 類，包含將 HTTP 請求從網路瀏覽器非同步傳輸到網路伺服器的方法。這些方法允許基於瀏覽器的應用程式進行細粒度的伺服器呼叫並把儲存結果儲存在 XMLHttpRequest 的 responseText 特性中。 XMLHttpRequest 類是 Ajax 程式設計的一個元件。在 Ajax 出現之前，需要將網頁表單完全傳送到伺服器，然後重新整理整個瀏覽器頁面。

歷史

“XMLHttpRequest” 類背後的概念是由 Microsoft Outlook 的開發人員於 2000 年提出的 —— 可在 Windows 2000 作業系統上使用。然後這個概念在 Internet Explorer 5 (2001) 瀏覽器的 直譯器 中實現。但是，原始的語法沒有使用 XMLHttpRequest 識別符號。相反，開發人員使用了識別符號 ActiveXObject ("Msxml2.XMLHTTP") 和 ActiveXObject ("Microsoft.XMLHTTP")。 到 Internet Explorer 7 (2006)，所有的瀏覽器都支援 XMLHttpRequest 識別符號。

XMLHttpRequest 識別符號現在是所有現代瀏覽器的事實標準，包括 Mozilla 的 Gecko layout engine (2002), Konqueror (2002), Safari 1.2 (2004), Opera 8.0 (2005),, and iCab (2005).

隨著跨瀏覽器 JavaScript 庫（例如 jQuery）的出現，開發人員可以間接呼叫 XMLHttpRequest 功能。

標準

全球資訊網聯盟 (W3C) 於 2006 年 4 月 5 日釋出了 XMLHttpRequest 物件的工作草案規範。 2008 年 2 月 25 日，W3C 釋出了 Working Draft Level 2 規範。Level 2 規範添加了監視事件進度、允許跨站點請求和處理位元組流的方法。2011 年底，Level 2 規範被吸收到原始規範中。

2012 年底，WHATWG 接管開發並使用 Web IDL 維護動態文件。

XMLHttpRequest 用法

3.1 構造器

生成發給 Web 伺服器的非同步請求首先要例項化分配記憶體）“XMLHttpRequest” 物件。分配的記憶體（的地址）被賦值給變數。 JavaScript 中例項化新物件的程式設計 語句 為 new。new 語句後跟物件的建構函式。面嚮物件語言的開發人員的習慣是使用與類名相同的名稱來呼叫建構函式本例中，類名是 XMLHttpRequest。例項化一個新的 XMLHttpRequest 並賦值給變數 request:

var request = new XMLHttpRequest ;

3.2 open 方法

open 方法準備 XMLHttpRequest。它最多可接受五個引數，但只有前兩個是必須的。

var request = new XMLHttpRequest ;

request.open (RequestMethod, SubmitURL, AsynchronousBoolean, UserName, Password);

RequestMethod: 對於典型的資料量，HTTP 請求方法可以是 GET。在其他可用的請求方法中，POST 將處理大量資料。收到返回字串後，將 DELETE 請求方法傳送到.open 以釋放 XMLHttpRequest 記憶體。如果傳送 DELETE，則 SubmitURL 引數可為 null。
request.open ("DELETE", null);

SubmitURL: SubmitURL 是包含執行檔名和提交到 Web 伺服器的任何引數的 URL。如果 URL 包含主機名，則它一定是傳送 HTML 文件的 Web 伺服器。Ajax 支援同源策略。
AsynchronousBoolean: 如果提供該引數，則應將其設定為 true。如果設定為 false，則瀏覽器將等待，直到收到返回字串。不鼓勵程式設計師將 AsynchronousBoolean 設定為 false，瀏覽器可能會遇到異常錯誤。
UserName: 如果提供，它將有助於驗證使用者身份。
Password: 如果提供，它將有助於驗證使用者身份。

3.3 setRequestHeader 方法

如果呼叫 POST 請求方法，則需要額外發送媒體型別 Content-Type: application/x-www-form-urlencoded。setRequestHeader 方法允許程式將此或其他 HTTP 標頭髮送到 Web 伺服器。其用法是 setRequestHeader (HeaderField, HeaderValue)。啟用 POST 請求方法:

request.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");

3.4 send 方法

如果呼叫 POST 請求方法，則 Web 伺服器期望從標準輸入流讀取表單資料。要將表單資料傳送到 Web 伺服器，請執行 request.send (FormData)，其中 FormData 是文字字串。如果呼叫 GET 請求方法，則 Web 伺服器只需要預設標頭。要傳送預設標頭，請執行 request.send (null).

3.5 onreadystatechange 事件監聽器

onreadystatechange 是一個回撥方法，在整個 Ajax 生命週期中定期執行。要設定名為 ReadyStateMethod 的回撥方法，語法為 request.onreadystatechange = ReadyStateMethod。為了方便起見，該語法允許定義匿名方法。定義匿名回撥方法:

var request = new XMLHttpRequest ;

request.onreadystatechange = function

{//code omitted}

XMLHttpRequest 生命週期經歷幾個階段 - 從 0 到 4。階段 0 是呼叫 open 方法之前，階段 4 是文字字串到達時。為了監視生命週期，XMLHttpRequest 具有可用的 readyState 屬性。 第 1-3 階段不明確，不同瀏覽器的解釋也不同。儘管如此，一種解釋是：

階段 0：未初始化
第一階段：載入中
第二階段：載入完成
第三階段：互動
第四階段：已完成

當 readyState 達到 4 時，文字字串已經到達並被設定在 responseText 屬性中。

var request = new XMLHttpRequest ;

request.onreadystatechange = function

{if ( request.readyState == 4)

{//request.responseText is set}

}

例子

下例首先建立 Javascript 函式:

cd /var/www/html
編輯檔案 ajax_submit.js:

function ajaxsubmit (elementid, submit_url)

{var request = new XMLHttpRequest ;

var completed_state = 4;

request.onreadystatechange = function

{if ( request.readyState == completed_state)

{

document.

getElementById (element_id).

innerHTML =

request.responseText;

request.open ("DELETE", null);

}

}

request.open ("GET", submit_url);

request.send (null);

}

同一個目錄下編輯檔案 ajax.phtml:

Hello World!';

?>

同一個目錄下編輯檔案 ajax.html:

Hello World

Submit

在瀏覽器中開啟 http://localhost/ajax.html
點選 Submit

CGI 例子

通用閘道器介面 (CGI) 程序允許瀏覽器請求 Web 伺服器執行已編譯的計算機程式。

CGI XMLHttpRequest 的伺服器元件是位於伺服器上的可執行檔案。作業系統將開啟該檔案並讀取其機器指令。 XMLHttpRequest 協議要求可執行檔案輸出文字字串。

編譯後的程式有兩個檔案：原始碼和相應的可執行檔案。

cd /usr/lib/cgi-bin
編輯檔案 ajax.c:
include

void main (void)

{

/ CGI requires the first line to output: /

printf ("Content-type: text/html\n");

/ CGI requires the second line to output: /

printf ("\n");

printf ("Hello World!\n");

}

編輯原始檔產生可執行檔案:

cc ajax.c -o ajax

或

sudo cc ajax.c -o ajax

CGI 瀏覽器元件與 PHP 瀏覽器元件相同，只是 submit_url 略有變化。 告訴 Web 伺服器執行可執行檔案的語法是 /cgi-bin/ 後跟檔名。為了安全起見，可執行檔案必須駐留在 chroot 監獄中。在本例中，監獄是目錄 /usr/lib/cgi-bin/.

cd /var/www/html
編輯檔案 ajax.html:

Hello World

Submit

用瀏覽器開啟 http://localhost/ajax.html
點選 Submit