AI tools
Loading AI tools

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]

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

XMLHttpRequest用法

構造器

生成發給Web伺服器的非同步請求首先要實例化分配主記憶體）「XMLHttpRequest」對象。分配的主記憶體（的地址）被賦值給變數。 JavaScript中實例化新對象的編程 陳述式 為new。[12]new陳述式後跟對象的建構函式。物件導向語言的開發人員的習慣是使用與類名相同的名稱來呼叫建構函式[13]本例中，類名是XMLHttpRequest。實例化一個新的XMLHttpRequest並賦值給變數request:

var request = new XMLHttpRequest();[14]

open方法

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

setRequestHeader方法

如果呼叫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" );

send方法

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

onreadystatechange事件監聽器

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>

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>

參見

參考文獻

註釋

外部連結

Wikiwand in your browser!

Seamless Wikipedia browsing. On steroids.

Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.

Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.

Chrome
Wikiwand for Chrome
Firefox
Wikiwand for Firefox