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.