跳至內容

XMLHttpRequest

本頁使用了標題或全文手工轉換
維基百科，自由的百科全書
HTTP／HTTPS
版本
請求方法
報文主體
頭欄位
狀態碼
相關主題

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>

參見

[編輯]

參考文獻

[編輯]
  1. ^ Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 92. ISBN 978-0-596-10180-0. Javascript lacks a portable mechanism for general network communication[.] ... But thanks to the XMLHttpRequest object, ... Javascript code can make HTTP calls back to its originating server[.] 
  2. ^ 2.0 2.1 Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 92. ISBN 978-0-596-10180-0. 
  3. ^ Article on the history of XMLHTTP by an original developer. Alexhopmann.com. 2007-01-31 [2009-07-14]. （原始內容存檔於2009-01-30）. The reality is that the client architecture of GMail appears to follow the rough design of the Exchange 2000 implementation of Outlook Web Access for IE5 and later which shipped way back in 2000. 
  4. ^ 4.0 4.1 Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 93. ISBN 978-0-596-10180-0. 
  5. ^ Archived news from Mozillazine stating the release date of Safari 1.2. Weblogs.mozillazine.org. [2009-07-14]. （原始內容存檔於2009-06-02）. 
  6. ^ Press release stating the release date of Opera 8.0 from the Opera website. Opera.com. 2005-04-19 [2009-07-14]. （原始內容存檔於2009-01-20）. 
  7. ^ Soft-Info.org. Detailed browser information stating the release date of iCab 3.0b352. Soft-Info.com. [2009-07-14]. （原始內容存檔於2011-07-25）. 
  8. ^ Specification of the XMLHttpRequest object from the Level 1 W3C Working Draft released on April 5th, 2006. W3.org. [2009-07-14]. （原始內容存檔於2008-05-16）. 
  9. ^ Specification of the XMLHttpRequest object from the Level 2 W3C Working Draft released on February 25th, 2008. W3.org. [2009-07-14]. （原始內容存檔於2023-04-01）. 
  10. ^ XMLHttpRequest Editor's Draft 5 December 2011. w3.org. [5 December 2011]. （原始內容存檔於2019-03-23）. 
  11. ^ XMLHttpRequest Standard/#specification-history. [2023-10-17]. （原始內容存檔於2023-11-08）. 
  12. ^ Flanagan, David. JavaScript, The Definitive Guide. O'Reilly and Associates. 1998: 82. ISBN 1-56592-392-8. 
  13. ^ Welling, Luke; Thomson, Laura. PHP and MySQL Web Development. Sams Publishing. 2005: 162. ISBN 0-672-32672-8. 
  14. ^ XMLHttpRequest Standard; The constructor. [2023-04-10]. （原始內容存檔於2023-11-08）. 
  15. ^ 15.0 15.1 15.2 15.3 Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 100. ISBN 978-0-596-10180-0. 
  16. ^ Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 96. ISBN 978-0-596-10180-0. 
  17. ^ HTTP Documentation. June 2022 [2023-04-12]. （原始內容存檔於2023-10-03）. 
  18. ^ Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 98. ISBN 978-0-596-10180-0. 
  19. ^ XMLHttpRequest Standard; The open method. [2023-04-12]. （原始內容存檔於2023-11-08）. 
  20. ^ Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 97. ISBN 978-0-596-10180-0. 
  21. ^ Flanagan, David. JavaScript, The Definitive Guide. O'Reilly and Associates. 1998: 511. ISBN 1-56592-392-8. 
  22. ^ 22.0 22.1 22.2 Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 26. ISBN 978-0-596-10180-0. 
  23. ^ 23.0 23.1 Mahemoff, Michael. Ajax Design Patterns. O'Reilly. 2006: 25. ISBN 978-0-596-10180-0. 
  24. ^ 24.0 24.1 Apache Tutorial. [2023-04-10]. （原始內容存檔於2021-11-15）. 

注釋

[編輯]
  1. ^ 儘管一些文獻 XMLHttpRequest 稱為API， 從技術上講，它是一個使用 new語句實例化到對象變數的類聲明.
  2. ^ 現代瀏覽器使用即時編譯器呼叫了JavaScript引擎。
  3. ^ 該標準是Opera Software的Anne van Kesteren和W3C的Dean Jackson審稿。
  4. ^ The null placeholder is currently in retirement but recommended.
  5. ^ For safety, this assignment should follow the execution of request.open().
  6. ^ The web server may be configured to execute interpreted programs, also.[24]
  7. ^ The web server may be configured to add other executable directories.[24]

外部連結

[編輯]
維基教科書中的相關電子教學：XMLHttpRequest
取自「https://zh.wikipedia.org/w/index.php?title=XMLHttpRequest&oldid=80408464」