XMLHttpRequest XHR 是一個 JavaScript 類，包含將 HTTP 請求從網路瀏覽器非同步傳輸到網路伺服器的方法。這些方法允許基於瀏覽器的應用程式進行細粒度的伺服器呼叫並把儲存結果儲存在 XMLHttpRequest 的 responseText 特性中。 XMLHttpRequest 類是 Ajax 程式設計的一個元件。在 Ajax 出現之前，需要將網頁表單完全傳送到伺服器，然後重新整理整個瀏覽器頁面。 歷史 XMLHttpRequest 類背後的概念是由 Microsoft Outlook 的開發人員於 2000 年提出的 可在 Windows 2000 作業系統上使用。然後這個概念在 Internet Explorer 5 2001 瀏覽器的 直譯器 中實現。但是，原始的語法沒有使用 XMLHttpRequest 識別符號。相反，開發人員使用了識別符號 ActiveXObject Msxml2XMLHTTP 和 ActiveXObject MicrosoftXMLHTTP。 到 Internet Explorer 7 2006，所有的瀏覽器都支援 XMLHttpRequest 識別符號。 XMLHttpRequest 識別符號現在是所有現代瀏覽器的事實標準，包括 Mozilla 的 Gecko layout engine 2002 Konqueror 2002 Safari 12 2004 Opera 80 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 用法 構造器 生成發給 Web 伺服器的非同步請求首先要例項化分配記憶體）XMLHttpRequest 物件。分配的記憶體（的地址）被賦值給變數。 JavaScript 中例項化新物件的程式設計 語句 為 new。new 語句後跟物件的建構函式。面嚮物件語言的開發人員的習慣是使用與類名相同的名稱來呼叫建構函式本例中，類名是 XMLHttpRequest。例項化一個新的 XMLHttpRequest 並賦值給變數 request var request new XMLHttpRequest open 方法 open 方法準備 XMLHttpRequest。它最多可接受五個引數，但只有前兩個是必須的。 var request new XMLHttpRequest requestopen RequestMethod SubmitURL AsynchronousBoolean UserName Password RequestMethod 對於典型的資料量，HTTP 請求方法可以是 GET。在其他可用的請求方法中，POST 將處理大量資料。收到返回字串後，將 DELETE 請求方法傳送到open 以釋放 XMLHttpRequest 記憶體。如果傳送 DELETE，則 SubmitURL 引數可為 null。 requestopen DELETE null SubmitURL SubmitURL 是包含執行檔名和提交到 Web 伺服器的任何引數的 URL。如果 URL 包含主機名，則它一定是傳送 HTML 文件的 Web 伺服器。Ajax 支援同源策略。 AsynchronousBoolean 如果提供該引數，則應將其設定為 true。如果設定為 false，則瀏覽器將等待，直到收到返回字串。不鼓勵程式設計師將 AsynchronousBoolean 設定為 false，瀏覽器可能會遇到異常錯誤。 UserName 如果提供，它將有助於驗證使用者身份。 Password 如果提供，它將有助於驗證使用者身份。 setRequestHeader 方法 如果呼叫 POST 請求方法，則需要額外發送媒體型別 ContentType applicationxwwwformurlencoded。setRequestHeader 方法允許程式將此或其他 HTTP 標頭髮送到 Web 伺服器。其用法是 setRequestHeader HeaderField HeaderValue。啟用 POST 請求方法 requestsetRequestHeader ContentType applicationxwwwformurlencoded send 方法 如果呼叫 POST 請求方法，則 Web 伺服器期望從標準輸入流讀取表單資料。要將表單資料傳送到 Web 伺服器，請執行 requestsend FormData，其中 FormData 是文字字串。如果呼叫 GET 請求方法，則 Web 伺服器只需要預設標頭。要傳送預設標頭，請執行 requestsend null onreadystatechange 事件監聽器 onreadystatechange 是一個回撥方法，在整個 Ajax 生命週期中定期執行。要設定名為 ReadyStateMethod 的回撥方法，語法為 requestonreadystatechange ReadyStateMethod。為了方便起見，該語法允許定義匿名方法。定義匿名回撥方法 var request new XMLHttpRequest requestonreadystatechange function code omitted XMLHttpRequest 生命週期經歷幾個階段 從 0 到 4。階段 0 是呼叫 open 方法之前，階段 4 是文字字串到達時。為了監視生命週期，XMLHttpRequest 具有可用的 readyState 屬性。 第 13 階段不明確，不同瀏覽器的解釋也不同。儘管如此，一種解釋是： 階段 0：未初始化 第一階段：載入中 第二階段：載入完成 第三階段：互動 第四階段：已完成 當 readyState 達到 4 時，文字字串已經到達並被設定在 responseText 屬性中。 var request new XMLHttpRequest requestonreadystatechange function if requestreadyState 4 requestresponseText is set 例子 下例首先建立 Javascript 函式 cd varwwwhtml 編輯檔案 ajax_submitjs function ajax_submit element_id submit_url var request new XMLHttpRequest var completed_state 4 requestonreadystatechange function if requestreadyState completed_state document getElementById element_id innerHTML requestresponseText requestopen DELETE null requestopen GET submit_url requestsend null 同一個目錄下編輯檔案 ajaxphtml php echo Hello World 同一個目錄下編輯檔案 ajaxhtml html head titleHello Worldtitle script typetextjavascript srcajax_submitjsscript head body button onclickajax_submit ajax_title ajaxphtml Submit button body 在瀏覽器中開啟 httplocalhostajaxhtml 點選 Submit CGI 例子 通用閘道器介面 CGI 程序允許瀏覽器請求 Web 伺服器執行已編譯的計算機程式。 CGI XMLHttpRequest 的伺服器元件是位於伺服器上的可執行檔案。作業系統將開啟該檔案並讀取其機器指令。 XMLHttpRequest 協議要求可執行檔案輸出文字字串。 編譯後的程式有兩個檔案：原始碼和相應的可執行檔案。 cd usrlibcgibin 編輯檔案 ajaxc include stdioh void main void CGI requires the first line to output printf Contenttype texthtmln CGI requires the second line to output printf n printf Hello Worldn 編輯原始檔產生可執行檔案 cc ajaxc o ajax 或 sudo cc ajaxc o ajax CGI 瀏覽器元件與 PHP 瀏覽器元件相同，只是 submit_url 略有變化。 告訴 Web 伺服器執行可執行檔案的語法是 cgibin 後跟檔名。為了安全起見，可執行檔案必須駐留在 chroot 監獄中。在本例中，監獄是目錄 usrlibcgibin cd varwwwhtml 編輯檔案 ajaxhtml html head titleHello Worldtitle script typetextjavascript srcajax_submitjsscript head body button onclickajax_submit ajax_title cgibinajax Submit button body 用瀏覽器開啟 httplocalhostajaxhtml 點選 Submit 參見 WebSocket 表現層狀態轉換 REST 參考文獻 註釋 外部連結 XMLHttpRequest Living Standard by the WHATWG XMLHttpRequest Level 1 draft by the W3C CategoryXML Category 微軟 API CategoryJavaScript Category 網頁標準 Category2000 年軟體 CategoryHTTP 客戶端 CategoryAJAX