維基百科

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]

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」