imported>InternetArchiveBot：Add 11 books for verifiability (20240107)) #IABot (v2.0.9.5) (GreenC bot

2024-01-08T01:32:20Z

Add 11 books for verifiability (20240107)) #IABot (v2.0.9.5) (GreenC bot

新页面

{{noteTA|G1=IT}}
{{HTTP}}
'''XMLHttpRequest''' ('''XHR''') 是一个 [[JavaScript]][[类_(计算机科学)|类]]{{efn|尽管一些文献 XMLHttpRequest 称为[[API]]，从技术上讲，它是一个使用 <code>new</code>语句[[构造函数（面向对象编程）|实例化]]到[[对象（计算机科学）|对象]][[变量（计算机科学）|变量]]的类[[声明（计算机科学）|声明]].}}，包含将[[HTTP]]请求从[[网络浏览器]]异步传输到[[网络服务器]]的[[方法_(電腦科學)|方法]]。<ref name="adp-92_quote1">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/92 92]
| isbn = 978-0-596-10180-0
| quote = 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[.]
}}</ref>这些方法允许基于浏览器的应用程序进行细粒度的服务器调用并把存储结果存储在XMLHttpRequest的<code>responseText</code>[[特性_(计算机科学)|特性]]中。<ref name="adp-92">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/92 92]
| isbn = 978-0-596-10180-0
}}</ref> ''XMLHttpRequest''类是[[AJAX|Ajax编程]]的一个组件。在Ajax出现之前，需要将[[网页表单]]完全发送到服务器，然后刷新整个浏览器页面。<ref name="adp-92"/>

==历史==
“XMLHttpRequest”类背后的概念是由[[Microsoft Outlook]] 的开发人员于2000年提出的——可在[[Windows 2000]]操作系统上使用。<ref name="ALEXHOPMANN_quote1">{{cite web
|url=http://www.alexhopmann.com/xmlhttp.htm
|title=Article on the history of XMLHTTP by an original developer
|date=2007-01-31
|publisher=Alexhopmann.com
|archive-url=https://web.archive.org/web/20090130092236/http://www.alexhopmann.com/xmlhttp.htm
|archive-date=2009-01-30|access-date=2009-07-14
|quote=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.}}</ref>然后这个概念在[[Internet Explorer 5]] (2001) 浏览器的 [[直譯器|解释器]] 中实现。{{efn|现代浏览器使用[[即时编译|即时编译器]]调用了[[JavaScript引擎]]。}}但是，原始的[[语法（编程语言）|语法]]没有使用<code>XMLHttpRequest</code>[[标识符_(计算机语言)|标识符]]。相反，开发人员使用了标识符<code>ActiveXObject("Msxml2.XMLHTTP")</code>和<code>ActiveXObject("Microsoft.XMLHTTP")</code>。 <ref name="adp-93">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/93 93]
| isbn = 978-0-596-10180-0
}}</ref>到[[Internet Explorer 7]] (2006)，所有的浏览器都支持<code>XMLHttpRequest</code>标识符。<ref name="adp-93"/>

<code>XMLHttpRequest</code>标识符现在是所有现代浏览器的[[事实标准]]，包括[[Mozilla]]的[[Gecko (layout engine)|Gecko layout engine]] (2002), [[Konqueror]] (2002), [[Safari]] 1.2 (2004),<ref>{{cite web
|url=http://weblogs.mozillazine.org/hyatt/archives/2004_02.html
|title=Archived news from Mozillazine stating the release date of Safari 1.2
|publisher=Weblogs.mozillazine.org
|access-date=2009-07-14 |archive-date=2009-06-02
|archive-url=https://web.archive.org/web/20090602041255/http://weblogs.mozillazine.org/hyatt/archives/2004_02.html |url-status=dead }}</ref> [[Opera_(瀏覽器)|Opera]] 8.0 (2005),<ref>{{cite web
|url=http://www.opera.com/press/releases/2005/06/16/
|title=Press release stating the release date of Opera 8.0 from the Opera website
|publisher=Opera.com
|date=2005-04-19
|access-date=2009-07-14
|archive-date=2009-01-20
|archive-url=https://web.archive.org/web/20090120083247/http://www.opera.com/press/releases/2005/06/16/
|dead-url=no
}}</ref>, and [[iCab]] (2005).<ref>{{cite web
|author=Soft-Info.org
|url=http://www.soft-info.org/browsers/icab-10109.html
|title=Detailed browser information stating the release date of iCab 3.0b352
|publisher=Soft-Info.com
|access-date=2009-07-14
|archive-date=2011-07-25
|archive-url=https://web.archive.org/web/20110725184217/http://www.soft-info.org/browsers/icab-10109.html
|dead-url=no
}}</ref>

随着跨浏览器 JavaScript 库（例如 [[jQuery]]）的出现，开发人员可以间接调用 XMLHttpRequest 功能。

==标准==
[[万维网联盟]] (W3C)于2006年4月5日发布了XMLHttpRequest对象的工作草案规范。<ref>{{cite web
|url=http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/
|title=Specification of the XMLHttpRequest object from the Level 1 W3C Working Draft released on April 5th, 2006
|publisher=W3.org
|access-date=2009-07-14
|archive-date=2008-05-16
|archive-url=https://web.archive.org/web/20080516060525/http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/
|dead-url=no
}}</ref> {{efn|该标准是[[Opera Software]]的[[Anne van Kesteren]]和W3C的Dean Jackson[[审稿]]。}}2008年2月25日，W3C发布了Working Draft Level 2规范。<ref>{{cite web
|url=http://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080225/
|title=Specification of the XMLHttpRequest object from the Level 2 W3C Working Draft released on February 25th, 2008
|publisher=W3.org
|access-date=2009-07-14
|archive-date=2023-04-01
|archive-url=https://web.archive.org/web/20230401201905/https://www.w3.org/TR/2008/WD-XMLHttpRequest2-20080225/
|dead-url=no
}}</ref>Level 2规范添加了监视事件进度、允许跨站点请求和处理字节流的方法。2011年底，Level 2规范被吸收到原始规范中。<ref>{{Cite web
|url=http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
|title=XMLHttpRequest Editor's Draft 5 December 2011
|publisher=w3.org
|access-date=5 December 2011
|archive-date=2019-03-23
|archive-url=https://web.archive.org/web/20190323032415/https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html
|dead-url=no
}}</ref>

2012年底，[[WHATWG]]接管开发并使用[[Web IDL]]维护[[动态文档]]。<ref>{{cite web
|url=https://xhr.spec.whatwg.org/#specification-history
|title=XMLHttpRequest Standard/#specification-history
|access-date=2023-10-17
|archive-date=2023-11-08
|archive-url=https://web.archive.org/web/20231108152833/https://xhr.spec.whatwg.org/#specification-history
|dead-url=no
}}</ref>
==XMLHttpRequest用法==

===构造器===
生成发给[[網頁伺服器|Web服务器]]的异步请求首先要[[實例|实例化]][[对象生命周期|分配内存]]）“XMLHttpRequest”对象。分配的内存（的地址）被赋值给[[变量_(程序设计)|变量]]。 JavaScript中实例化新对象的编程 [[陳述式|语句]] 为'''<code>[[New_(C%2B%2B)|new]]</code>'''。<ref name="jdg-82">{{cite book
| last = Flanagan
| first = David
| title = JavaScript, The Definitive Guide
| url = https://archive.org/details/javascriptdefini00flan
| publisher = O'Reilly and Associates
| year = 1998
| page = [https://archive.org/details/javascriptdefini00flan/page/82 82]
| isbn = 1-56592-392-8}}</ref>'''<code>new</code>'''语句后跟对象的[[构造函数]]。面向对象语言的开发人员的习惯是使用与类名相同的名称来调用构造函数<ref name="pmwd-162">{{cite book
| last1 = Welling
| first1 = Luke
| last2 = Thomson
| first2 = Laura
| title = PHP and MySQL Web Development
| publisher = Sams Publishing
| year = 2005
| page = 162
| isbn = 0-672-32672-8
}}</ref>本例中，类名是''XMLHttpRequest''。实例化一个新的''XMLHttpRequest''并赋值给变量<code>request</code>:

<code>var request = new XMLHttpRequest();</code><ref name="xhr_constructor">{{cite web
| title=XMLHttpRequest Standard; The constructor
| url=https://xhr.spec.whatwg.org/#constructors
| access-date=2023-04-10
| archive-date=2023-11-08
| archive-url=https://web.archive.org/web/20231108152833/https://xhr.spec.whatwg.org/#constructors
| dead-url=no
}}</ref>

===open方法===
open方法准备''XMLHttpRequest''。<ref name="adp-100">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/100 100]
| isbn = 978-0-596-10180-0
}}</ref>它最多可接受五个参数，但只有前两个是必须的。

<code>var request = new XMLHttpRequest();</code>

<code>request.open( RequestMethod, SubmitURL, AsynchronousBoolean, UserName, Password );</code>

* '''RequestMethod''': 对于典型的数据量，[[超文本传输协议#请求方法|HTTP请求方法]]可以是<code>GET</code>。在其他可用的请求方法中，<code>[[POST (HTTP)|POST]]</code>将处理大量数据。<ref name="adp-96">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/96 96]
| isbn = 978-0-596-10180-0
}}</ref>收到返回字符串后，将DELETE请求方法发送到<code>.open()</code>以释放 XMLHttpRequest 内存。<ref name="rfc_9110-method_overview">{{cite web
| title=HTTP Documentation
| date=June 2022
| url=https://httpwg.org/specs/rfc9110.html#method.overview
| access-date=2023-04-12
| archive-date=2023-10-03
| archive-url=https://web.archive.org/web/20231003104525/https://httpwg.org/specs/rfc9110.html#method.overview
| dead-url=no
}}</ref>如果发送<code>DELETE</code>，则 SubmitURL 参数可为<code>null</code>。
: * <code>request.open( "DELETE", null );</code>
* '''SubmitURL''': ''SubmitURL''是包含执行文件名和提交到Web服务器的任何参数的[[URL]]。如果URL包含主机名，则它一定是发送HTML文档的Web服务器。Ajax支持[[同源策略]]。<ref name="adp-98">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/98 98]
| isbn = 978-0-596-10180-0
}}</ref>
* '''AsynchronousBoolean''': 如果提供该参数，则应将其设置为true。如果设置为false，则浏览器将等待，直到收到返回字符串。不鼓励程序员将AsynchronousBoolean设置为false，浏览器可能会遇到异常错误。<ref name="xhr_open_method">{{cite web
| title=XMLHttpRequest Standard; The open method
| url=https://xhr.spec.whatwg.org/#the-open()-method
| access-date=2023-04-12
| archive-date=2023-11-08
| archive-url=https://web.archive.org/web/20231108152833/https://xhr.spec.whatwg.org/#the-open()-method
| dead-url=no
}}</ref>
* '''UserName''':如果提供，它将有助于验证用户身份。
* '''Password''': 如果提供，它将有助于验证用户身份。

===setRequestHeader方法===
如果调用<code>[[POST (HTTP)|POST]]</code>请求方法，则需要额外发送[[媒体类型]]<code>Content-Type: application/x-www-form-urlencoded</code>。<ref name="adp-97">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/97 97]
| isbn = 978-0-596-10180-0
}}</ref><code>setRequestHeader</code>方法允许程序将此或其他[[HTTP标头]]发送到Web服务器。其用法是<code>setRequestHeader( HeaderField, HeaderValue )</code>。<ref name="adp-100"/>启用<code>POST</code>请求方法:

<code>request.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );</code>

===send方法===
如果调用<code>[[POST (HTTP)|POST]]</code>请求方法，则Web服务器期望从标准输入流读取[[網頁表單|表单数据]]。<ref name="jdg-511">{{cite book
| last = Flanagan
| first = David
| title = JavaScript, The Definitive Guide
| url = https://archive.org/details/javascriptdefini00flan
| publisher = O'Reilly and Associates
| year = 1998
| page = [https://archive.org/details/javascriptdefini00flan/page/511 511]
| isbn = 1-56592-392-8}}</ref>要将表单数据发送到Web服务器，请执行<code>request.send( FormData )</code>，其中FormData是文本字符串。如果调用<code>GET</code>请求方法，则Web服务器只需要默认标头。<ref name="adp-26">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/26 26]
| isbn = 978-0-596-10180-0
}}</ref>要发送默认标头，请执行<code>request.send( null )</code>.{{efn|The <code>null</code> placeholder is currently in retirement but recommended.}}
===onreadystatechange事件监听器===
<code>onreadystatechange</code>是一个回调方法，在整个Ajax生命周期中定期执行。<ref name="adp-25">{{cite book
| last = Mahemoff
| first = Michael
| title = Ajax Design Patterns
| url = https://archive.org/details/ajaxdesignpatter00mahe
| publisher = O'Reilly
| year = 2006
| page = [https://archive.org/details/ajaxdesignpatter00mahe/page/25 25]
| isbn = 978-0-596-10180-0
}}</ref>要设置名为 <code>ReadyStateMethod()</code>的回调方法，语法为<code>request.onreadystatechange = ReadyStateMethod</code>。{{efn|For safety, this assignment should follow the execution of <code>request.open()</code>.}}为了方便起见，该语法允许定义匿名方法。<ref name="adp-25"/>定义匿名回调方法:
<syntaxhighlight lang="javascript">
var request = new XMLHttpRequest();

request.onreadystatechange = function()
{
// code omitted
}
</syntaxhighlight>
''XMLHttpRequest''生命周期经历几个阶段 - 从0到4。阶段0是调用<code>open()</code>方法之前，阶段4是文本字符串到达时。<ref name="adp-26"/>为了监视生命周期，''XMLHttpRequest''具有可用的<code>readyState</code>属性。第1-3阶段不明确，不同浏览器的解释也不同。<ref name="adp-100"/>尽管如此，一种解释是：<ref name="adp-100"/>
* 阶段 0：未初始化
* 第一阶段：加载中
* 第二阶段：加载完成
* 第三阶段：交互
* 第四阶段：已完成

当<code>readyState</code>达到4时，文本字符串已经到达并被设置在<code>responseText</code>属性中。
<syntaxhighlight lang="javascript">
var request = new XMLHttpRequest();

request.onreadystatechange = function()
{
if ( request.readyState == 4 )
{
// request.responseText is set
}
}
</syntaxhighlight>

==例子==
下例首先创建Javascript函数<ref name="adp-26"/>:

* <code>cd /var/www/html</code>
* 编辑文件<code>ajax_submit.js</code>:

<syntaxhighlight lang="javascript">
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 );
}
</syntaxhighlight>

* 同一个目录下编辑文件<code>ajax.phtml</code>:
<syntaxhighlight lang="PHP">
<?php
echo '<h1>Hello World!</h1>';
?>
</syntaxhighlight>

* 同一个目录下编辑文件<code>ajax.html</code>:
<syntaxhighlight lang="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>
</syntaxhighlight>

* 在浏览器中打开<code>http://localhost/ajax.html</code>
* 点击<code>Submit</code>

==CGI例子==
[[通用网关接口]] (CGI) 进程允许浏览器请求Web服务器执行已编译的计算机程序。{{efn|The web server may be configured to execute interpreted programs, also.<ref name="apache_howto_cgi">{{cite web
| title=Apache Tutorial
| url=https://httpd.apache.org/docs/2.4/howto/cgi.html
| access-date=2023-04-10
| archive-date=2021-11-15
| archive-url=https://web.archive.org/web/20211115181448/https://httpd.apache.org/docs/2.4/howto/cgi.html
| dead-url=no
}}</ref>}}

CGI ''XMLHttpRequest''的服务器组件是位于服务器上的可执行文件。操作系统将打开该文件并读取其机器指令。 ''XMLHttpRequest''协议要求可执行文件输出文本字符串。

编译后的程序有两个文件：源代码和相应的可执行文件。

* <code>cd /usr/lib/cgi-bin</code>
* 编辑文件<code>ajax.c</code>:
<syntaxhighlight lang="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" );
}
</syntaxhighlight>

* 编辑源文件产生可执行文件:
<code>cc ajax.c -o ajax</code>

或

<code>sudo cc ajax.c -o ajax</code>

CGI浏览器组件与PHP浏览器组件相同，只是<code>submit_url</code>略有变化。告诉Web服务器执行可执行文件的语法是<code>/cgi-bin/</code>后跟文件名。为了安全起见，可执行文件必须驻留在[[chroot|chroot 监狱]]中。在本例中，监狱是目录<code>/usr/lib/cgi-bin/</code>.{{efn|The web server may be configured to add other executable directories.<ref name="apache_howto_cgi"/>}}

* <code> cd /var/www/html</code>
* 编辑文件<code>ajax.html</code>:
<syntaxhighlight lang="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>
</syntaxhighlight>

* 用浏览器打开<code>http://localhost/ajax.html</code>
* 点击<code>Submit</code>

==参见==
* [[WebSocket]]
* [[表现层状态转换]] (REST)

==参考文献==
{{reflist|2}}

==注释==
{{Notelist}}

==外部链接==
{{wikibooks|XMLHttpRequest}}

* [https://xhr.spec.whatwg.org/ XMLHttpRequest Living Standard] {{Wayback|url=https://xhr.spec.whatwg.org/ |date=20231108152833 }} by the [[WHATWG]]
* [https://www.w3.org/TR/XMLHttpRequest/ XMLHttpRequest Level 1] {{Wayback|url=https://www.w3.org/TR/XMLHttpRequest/ |date=20231113153254 }} draft by the [[W3C]]

{{Internet Explorer}}
{{W3C Standards}}
{{Web interfaces}}
{{網頁技術與標準}}
{{Microsoft APIs}}
{{W3C规范和标准}}

{{DEFAULTSORT:Xmlhttprequest}}
[[Category:XML]]
[[Category:微軟API]]
[[Category:JavaScript]]
[[Category:网页标准]]
[[Category:2000年软件]]
[[Category:HTTP客户端]]
[[Category:AJAX]]

XMLHttpRequest - 版本历史

imported>InternetArchiveBot：​Add 11 books for verifiability (20240107)) #IABot (v2.0.9.5) (GreenC bot

imported>InternetArchiveBot：Add 11 books for verifiability (20240107)) #IABot (v2.0.9.5) (GreenC bot