XMLHttpRequest
来自维基百科,自由的百科全书
XMLHttpRequest (XHR) 是一個 JavaScript類[a],包含將HTTP請求從網絡瀏覽器異步傳輸到網絡服務器的方法。[1]這些方法允許基於瀏覽器的應用程序進行細粒度的服務器調用並把存儲結果存儲在XMLHttpRequest的responseText
特性中。[2] XMLHttpRequest類是Ajax編程的一個組件。在Ajax出現之前,需要將網頁表單完全發送到服務器,然後刷新整個瀏覽器頁面。[2]
歷史
「XMLHttpRequest」類背後的概念是由Microsoft Outlook 的開發人員於2000年提出的——可在Windows 2000操作系統上使用。[3]然後這個概念在Internet Explorer 5 (2001) 瀏覽器的 解釋器 中實現。[b]但是,原始的語法沒有使用XMLHttpRequest
標識符。相反,開發人員使用了標識符ActiveXObject("Msxml2.XMLHTTP")
和ActiveXObject("Microsoft.XMLHTTP")
。 [4]到Internet Explorer 7 (2006),所有的瀏覽器都支持XMLHttpRequest
標識符。[4]
XMLHttpRequest
標識符現在是所有現代瀏覽器的事實標準,包括Mozilla的Gecko layout engine (2002), Konqueror (2002), Safari 1.2 (2004),[5] Opera 8.0 (2005),[6], and iCab (2005).[7]
隨着跨瀏覽器 JavaScript 庫(例如 jQuery)的出現,開發人員可以間接調用 XMLHttpRequest 功能。
標準
萬維網聯盟 (W3C)於2006年4月5日發布了XMLHttpRequest對象的工作草案規範。[8] [c]2008年2月25日,W3C發布了Working Draft Level 2規範。[9]Level 2規範添加了監視事件進度、允許跨站點請求和處理字節流的方法。2011年底,Level 2規範被吸收到原始規範中。[10]
XMLHttpRequest用法
生成發給Web服務器的異步請求首先要實例化分配內存)「XMLHttpRequest」對象。分配的內存(的地址)被賦值給變量。 JavaScript中實例化新對象的編程 語句 為new
。[12]new
語句後跟對象的構造函數。面向對象語言的開發人員的習慣是使用與類名相同的名稱來調用構造函數[13]本例中,類名是XMLHttpRequest。實例化一個新的XMLHttpRequest並賦值給變量request
:
var request = new XMLHttpRequest();
[14]
open方法準備XMLHttpRequest。[15]它最多可接受五個參數,但只有前兩個是必須的。
var request = new XMLHttpRequest();
request.open( RequestMethod, SubmitURL, AsynchronousBoolean, UserName, Password );
- RequestMethod: 對於典型的數據量,HTTP請求方法可以是
GET
。在其他可用的請求方法中,POST
將處理大量數據。[16]收到返回字符串後,將DELETE請求方法發送到.open()
以釋放 XMLHttpRequest 內存。[17]如果發送DELETE
,則 SubmitURL 參數可為null
。
- *
request.open( "DELETE", null );
如果調用POST
請求方法,則需要額外發送媒體類型Content-Type: application/x-www-form-urlencoded
。[20]setRequestHeader
方法允許程序將此或其他HTTP標頭發送到Web服務器。其用法是setRequestHeader( HeaderField, HeaderValue )
。[15]啟用POST
請求方法:
request.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
如果調用POST
請求方法,則Web服務器期望從標準輸入流讀取表單數據。[21]要將表單數據發送到Web服務器,請執行request.send( FormData )
,其中FormData是文本字符串。如果調用GET
請求方法,則Web服務器只需要默認標頭。[22]要發送默認標頭,請執行request.send( null )
.[d]
onreadystatechange
是一個回調方法,在整個Ajax生命周期中定期執行。[23]要設置名為 ReadyStateMethod()
的回調方法,語法為request.onreadystatechange = ReadyStateMethod
。[e]為了方便起見,該語法允許定義匿名方法。[23]定義匿名回調方法:
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
// code omitted
}
XMLHttpRequest生命周期經歷幾個階段 - 從0到4。階段0是調用open()
方法之前,階段4是文本字符串到達時。[22]為了監視生命周期,XMLHttpRequest具有可用的readyState
屬性。 第1-3階段不明確,不同瀏覽器的解釋也不同。[15]儘管如此,一種解釋是:[15]
- 階段 0:未初始化
- 第一階段:加載中
- 第二階段:加載完成
- 第三階段:交互
- 第四階段:已完成
當readyState
達到4時,文本字符串已經到達並被設置在responseText
屬性中。
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if ( request.readyState == 4 )
{
// request.responseText is set
}
}
例子
下例首先創建Javascript函數[22]:
cd /var/www/html
- 編輯文件
ajax_submit.js
:
function ajax_submit( element_id, 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
:
<?php
echo '<h1>Hello World!</h1>';
?>
- 同一個目錄下編輯文件
ajax.html
:
<html>
<head>
<title>Hello World</title>
<script type=text/javascript src=ajax_submit.js></script>
</head>
<body>
<div id=ajax_title></div>
<button onclick="ajax_submit( 'ajax_title', 'ajax.phtml' )">
Submit
</button>
</body>
- 在瀏覽器中打開
http://localhost/ajax.html
- 點擊
Submit
CGI例子
通用網關接口 (CGI) 進程允許瀏覽器請求Web服務器執行已編譯的計算機程序。[f]
CGI XMLHttpRequest的服務器組件是位於服務器上的可執行文件。操作系統將打開該文件並讀取其機器指令。 XMLHttpRequest協議要求可執行文件輸出文本字符串。
編譯後的程序有兩個文件:源代碼和相應的可執行文件。
cd /usr/lib/cgi-bin
- 編輯文件
ajax.c
:
#include <stdio.h>
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( "<h1>Hello World!</h1>\n" );
}
- 編輯源文件產生可執行文件:
cc ajax.c -o ajax
或
sudo cc ajax.c -o ajax
CGI瀏覽器組件與PHP瀏覽器組件相同,只是submit_url
略有變化。 告訴Web服務器執行可執行文件的語法是/cgi-bin/
後跟文件名。為了安全起見,可執行文件必須駐留在chroot 監獄中。在本例中,監獄是目錄/usr/lib/cgi-bin/
.[g]
cd /var/www/html
- 編輯文件
ajax.html
:
<html>
<head>
<title>Hello World</title>
<script type=text/javascript src=ajax_submit.js></script>
</head>
<body>
<div id=ajax_title></div>
<button onclick="ajax_submit( 'ajax_title', '/cgi-bin/ajax' )">
Submit
</button>
</body>
- 用瀏覽器打開
http://localhost/ajax.html
- 點擊
Submit
參見
參考文獻
注釋
外部連結
Wikiwand - on
Seamless Wikipedia browsing. On steroids.