安科网

XMLHTTPRequest的属性和方法简介

liqing00

liqing00

2012-07-11

关注 关注

1、XMLHTTPRequest对象什么是？

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。（这个功能正是AJAX的一大特点之一：））

来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft?XMLDocumentObjectModel(DOM)处理回应。

这里说些题外话，其实这个东西很早就出现了，只是以前浏览器的支持不够，只有IE中才支持，所以大多数的WEB程序员都没有怎么用他，但是现在情况发生了很大地改变，Mozilla和Safari把它采用为事实上的标准，主流的浏览器都开始支持XMLHTTPRequest对象了。但是这里需要重点说明的是XMLHTTPRequest目前还不是一个W3C的标准，所以在不同的浏览器上表现也稍有些区别。

2、创建XMLHTTPRequest对象

对了，说到区别，我们这里来看看怎么来声明（使用）它，在使用XMLHTTPRequest对象发送请求和处理响应之前，我们必须要用javascript创建一个XMLHTTPRequest对象。（IE把XMLHTTPRequest实现为一个ActiveX对象，其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象）。下面我们就来看看具体怎么运用javascript来创建它吧：

  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. varxmlhttp;
  5. //创建XMLHTTPRequest对象
  6. functioncreateXMLHTTPRequest(){
  7. if(window.ActiveXObject){//判断是否支持ActiveX控件
  8. xmlhttp=newActiveObject("Microsoft.XMLHTTP");//通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
  9. }
  10. elseif(window.XMLHTTPRequest){//判断是否把XMLHTTPRequest实现为一个本地javascript对象
  11. xmlhttp=newXMLHTTPRequest();//创建XMLHTTPRequest的一个实例（本地javascript对象）
  12. }
  13. }
  14. //-->
  15. </script>

3、属性和方法

由于东西太多现在先用个页面来列举出说有的方法和属性，以后再来详细举例（主要是本人也在学习中）。
  1. <html>
  2. <head>
  3. <title>XMLHTTPRequest对象的说明DEMO</title>
  4. <scriptlanguage="javascript"type="text/javascript">
  5. <!--
  6. varxmlhttp;
  8. //创建一个XMLHTTPRequest对象
  9. functioncreateXMLHTTPRequext(){
  10. if(window.ActiveXObject){
  11. xmlhttp=newActiveXObject('Microsoft.XMLHTTP');
  12. }
  13. elseif(window.XMLHTTPRequest){
  14. xmlhttp=newXMLHTTPRequest();
  15. }
  16. }
  18. functionPostOrder(xmldoc)
  19. {
  20. createXMLHTTPRequext();
  22. //方法：open
  23. //创建一个新的http请求，并指定此请求的方法、URL以及验证信息
  24. //语法：oXMLHttpRequest.open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);
  25. //参数
  26. //bstrMethod
  27. //http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
  29. //bstrUrl
  30. //请求的URL地址，可以为绝对地址也可以为相对地址。
  32. //varAsync[可选]
  33. //布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
  35. //bstrUser[可选]
  36. //如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
  38. //bstrPassword[可选]
  39. //验证信息中的密码部分，如果用户名为空，则此值将被忽略。
  41. //备注：调用此方法后，可以调用send方法向服务器发送数据。
  42. xmlhttp.Open("get","http://localhost/example.htm",false);
  43. //varbook=xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
  44. //alert(book.xml);
  47. //属性：onreadystatechange
  48. //onreadystatechange：指定当readyState属性改变时的事件处理句柄
  49. //语法：oXMLHttpRequest.onreadystatechange=funcMyHandler;
  50. //如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数，
  51. //当数据接收完毕后（readystate==4）此页面上的一个按钮将被激活
  52. //备注：此属性只写，为W3C文档对象模型的扩展.
  53. xmlhttp.onreadystatechange=HandleStateChange;
  55. //方法：send
  56. //发送请求到http服务器并接收回应
  57. //语法：oXMLHttpRequest.send(varBody);
  58. //参数：varBody（欲通过此请求发送的数据。）
  59. //备注：此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync==False，此方法将会等待请求完成或者超时时才会返回，如果bAsync==True，此方法将立即返回。
  60. //Thismethodtakesoneoptionalparameter,whichistherequestBodytouse.TheacceptableVARIANTinputtypesareBSTR,SAFEARRAYofUI1(unsignedbytes),IDispatchtoanXMLDocumentObjectModel(DOM)object,andIStream*.Youcanuseonlychunkedencoding(forsending)whensendingIStream*inputtypes.ThecomponentautomaticallysetstheContent-LengthheaderforallbutIStream*inputtypes.
  61. //如果发送的数据为BSTR，则回应被编码为utf-8,必须在适当位置设置一个包含charset的文档类型头。
  62. //IftheinputtypeisaSAFEARRAYofUI1,theresponseissentasiswithoutadditionalencoding.ThecallermustsetaContent-Typeheaderwiththeappropriatecontenttype.
  63. //如果发送的数据为XMLDOMobject，则回应将被编码为在xml文档中声明的编码，如果在xml文档中没有声明编码，则使用默认的UTF-8。
  64. //IftheinputtypeisanIStream*,theresponseissentasiswithoutadditionalencoding.ThecallermustsetaContent-Typeheaderwiththeappropriatecontenttype.
  65. xmlhttp.Send(xmldoc);
  67. //方法：getAllResponseHeaders
  68. //获取响应的所有http头
  69. //语法：strValue=oXMLHttpRequest.getAllResponseHeaders();
  70. //备注：每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。
  71. alert(xmlhttp.getAllResponseHeaders());
  73. //方法：getResponseHeader
  74. //从响应信息中获取指定的http头
  75. //语法：strValue=oXMLHttpRequest.getResponseHeader(bstrHeader);
  76. //备注：当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml",则这句话
  77. //xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。
  78. alert(xmlhttp.getResponseHeader("Content-Type"));//输出http头中的Content-Type列：当前web服务器的版本及名称。
  81. document.frmTest.myButton.disabled=true;
  82. //方法：abort
  83. //取消当前请求
  84. //语法：oXMLHttpRequest.abort();
  85. //备注：调用此方法后，当前请求返回UNINITIALIZED状态。
  86. //xmlhttp.abort();
  88. //方法：setRequestHeader
  89. //单独指定请求的某个http头
  90. //语法：oXMLHttpRequest.setRequestHeader(bstrHeader,bstrValue);
  91. //参数：bstrHeader（字符串，头名称。）
  92. //bstrValue（字符串，值。）
  93. //备注：如果已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。
  94. //xmlhttp.setRequestHeader(bstrHeader,bstrValue);
  96. }
  98. functionHandleStateChange()
  99. {
  100. //属性：readyState
  101. //返回XMLHTTP请求的当前状态
  102. //语法：lValue=oXMLHttpRequest.readyState;
  103. //备注：变量，此属性只读，状态用长度为4的整型表示.定义如下：
  104. //0(未初始化)对象已建立，但是尚未初始化（尚未调用open方法）
  105. //1(初始化)对象已建立，尚未调用send方法
  106. //2(发送数据)send方法已调用，但是当前的状态及http头未知
  107. //3(数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
  108. //4(完成)数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
  109. if(xmlhttp.readyState==4){
  110. document.frmTest.myButton.disabled=false;
  112. //属性：responseBody
  113. //返回某一格式的服务器响应数据
  114. //语法：strValue=oXMLHttpRequest.responseBody;
  115. //备注：变量，此属性只读，以unsignedarray格式表示直接从服务器返回的未经解码的二进制数据。
  116. alert(xmlhttp.responseBody);
  118. //属性：responseStream
  119. //以AdoStream对象的形式返回响应信息
  120. //语法：strValue=oXMLHttpRequest.responseStream;
  121. //备注：变量，此属性只读，以AdoStream对象的形式返回响应信息。
  122. alert(xmlhttp.responseStream);
  124. //属性：responseText
  125. //将响应信息作为字符串返回
  126. //语法：strValue=oXMLHttpRequest.responseText;
  127. //备注：变量，此属性只读，将响应信息作为字符串返回。XMLHTTP尝试将响应信息解码为Unicode字符串，
  128. //XMLHTTP默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-ordermark)，XMLHTTP可
  129. //以解码任何UCS-2(bigorlittleendian)或者UCS-4数据。注意，如果服务器返回的是xml文档，此属
  130. //性并不处理xml文档中的编码声明。你需要使用responseXML来处理。
  131. alert(xmlhttp.responseText);
  133. //属性：responseXML
  134. //将响应信息格式化为XmlDocument对象并返回
  135. //语法：varobjDispatch=oXMLHttpRequest.responseXML;
  136. //备注：变量，此属性只读，将响应信息格式化为XmlDocument对象并返回。如果响应数据不是有效的XML文档，
  137. //此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。
  138. alert("Result="+xmlhttp.responseXML.xml);
  140. //属性：status
  141. //返回当前请求的http状态码
  142. //语法：lValue=oXMLHttpRequest.status;
  143. //返回值：长整形标准http状态码，定义如下：
  144. //Number:Description
  145. //100:Continue
  146. //101:Switchingprotocols
  147. //200:OK
  148. //201:Created
  149. //202:Accepted
  150. //203:Non-AuthoritativeInformation
  151. //204:NoContent
  152. //205:ResetContent
  153. //206:PartialContent
  154. //300:MultipleChoices
  155. //301:MovedPermanently
  156. //302:Found
  157. //303:SeeOther
  158. //304:NotModified
  159. //305:UseProxy
  160. //307:TemporaryRedirect
  161. //400:BadRequest
  162. //401:Unauthorized
  163. //402:PaymentRequired
  164. //403:Forbidden
  165. //404:NotFound
  166. //405:MethodNotAllowed
  167. //406:NotAcceptable
  168. //407:ProxyAuthenticationRequired
  169. //408:RequestTimeout
  170. //409:Conflict
  171. //410:Gone
  172. //411:LengthRequired
  173. //412:PreconditionFailed
  174. //413:RequestEntityTooLarge
  175. //414:Request-URITooLong
  176. //415:UnsupportedMediaType
  177. //416:RequestedRangeNotSuitable
  178. //417:ExpectationFailed
  179. //500:InternalServerError
  180. //501:NotImplemented
  181. //502:BadGateway
  182. //503:ServiceUnavailable
  183. //504:GatewayTimeout
  184. //505:HTTPVersionNotSupported
  185. //备注：长整形，此属性只读，返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。
  186. alert(xmlhttp.status);
  188. //属性：statusText
  189. //返回当前请求的响应行状态
  190. //语法：strValue=oXMLHttpRequest.statusText;
  191. //备注：字符串，此属性只读，以BSTR返回当前请求的响应行状态,此属性仅当数据发送并接收完毕后才可获取。
  192. alert(xmlhttp.statusText);
  193. }
  194. }
  195. //-->
  196. </script>
  197. </head>
  198. <body>
  199. <formname="frmTest">
  200. <inputname="myButton"type="button"value="ClickMe"onclick="PostOrder('http://localhost/example.htm');">
  201. </form>
  202. </body>
  203. </html>
 

xmlhttprequest xmlhttp javascript

liqing00

liqing00

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

以支持多种浏览器的方式创建 XMLHttpRequest 对象

/* Create a new XMLHttpRequest object to talk to the Web server */. 现在先不管那些注释掉的奇怪符号，如@cc_on，这是特殊的JavaScript编译器命令，将在下一期针对XMLHttpR

81530694 2011-09-27

如何创建和使用XMLHttpRequest对象？

创建XMLHttpRequest对象，我有以下几种方法，顺带给大家介绍下他们的使用，一起来看看那吧。直接new的方式，这样我们就构造了这个对象。　但是，这个语句只针对Firefox，opera以及Safari等高级浏览器。我们可以提示它，浏览器不支持aja

zergxixi 2016-10-31

AJAX实现步骤,XMLHttpRequest对象的方法

alert("你所请求的页面有异常。

homehttp 2016-10-07

【Ajax】XMLHttpRequest().readyState的五个状态（0,1,2,3,4）

//第1步：创建异步请求对象xhrvar xhr = new XMLHttpRequest();}//这个步骤就像一个阴魂一样，在每一步骤执行完后，都会执行。只是每次的xhr.readyState的数值不同。当 xhr.readyState==0 时，是表

jiaguoquan00 2020-07-07

【转】四种 post 请求格式的XMLHttpRequest 写法

前端 js 请求<!r.ParseForm() fmt.Println("ParseForm:") printKey(r);

zhaolisha 2020-06-12

Ajax二

在上一节我们已经粗略的讲过了 XMLHttpRequest 是 Ajax 的核心技术。是的，可以说，没有 XMLHttpRequest 这样的技术存在，Ajax 就是不完整的，甚至可以说就不会有 Ajax 这样的技术存在。XMLHttpRequest 实质

坚持着执着 2020-06-05

AJAX和fetch

　　1、创建XMLHttpRequest对象var xhr = new XMLHttpRequest(). 　　　　　　5、xhr.status == 4

标题无所谓 2020-05-31

你真的会使用XMLHttpRequest吗？

喜欢的小伙伴，可以去老哥页面去看，同时老哥专栏含金量非常的高，再次感谢。看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。”于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是

knightwatch 2020-04-25

XMLHTTPRequest状态status完整列表

AJAX中请求远端文件、或在检测远端文件是否掉链时，都需要了解到远端服务器反馈的状态以确定文件的存在 与否。在大多数情况下，除了Content-Type之外的所有应答头都是可选的。但Content-Type是必需的，它描述的是后面文档的MIME类型。状态代

zhaolisha 2020-01-11

AJAX简介

AJAX全称Asynchronous JavaScript and XML，就是异步的 JavaScript 和 XML。通过AJAX可以向浏览器发送异步请求，其最大的优势在于：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX

zhaolisha 2019-12-29

2019-12-5笔试题

用js实现快速排序。var xmlHttpRequest; //定义一个变量,用于存放XMLHttpRequest对象。xmlHttpRequest = new ActiveXObject; //创建IE浏览器中的XMLHttpRequest对象。tr

wanghongsha 2019-12-06

jquery load 回调函数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数，该函数有三个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：。//textStatus:请求状态：success、error、notmodi

小小大人物 2014-01-19

Javascript与Ajax

在不重新加载页面的情况下更新网页；在页面已加载后从服务器请求数据；HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。请求还没有被发送。HTTP 响应已经完全

loopstang 2014-01-11

初学NodeJS（一）

在node.js中前后台交互数据经常会用到这个东西，Ajax不是新的编程语言，而是一种使用现有标准的新方法，他可以实现不刷新网页部分更新数据。使用封装Ajax需要了解什么是XMLHttpRequest；这意味着可以在不重新加载整个网页的情况下，对网页的某部

roodyszz0 2019-11-17

XMLHTTPRequest属性、方法、事件大全&amp;详解。

XMLHTTPRequest属性、方法、事件整理大全。用于创建 HTTP 请求，但请求并未发送。method, 请求类型，如 GET 、POST 等，大小写不敏感。async, 是否异步，默认 true。username, 用户名，一般不用。passwor

81493369 2019-11-04

关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest

关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文件全

Liuzhiqianblog 2019-11-03

封装一个XMLHttpRequest

letxhr=newXMLHttpRequest()||newActiveXObject(‘Microsoft.XMLHTTP‘)

用不完的好奇心 2019-10-26

Web Api · 有关AJAX

// Http请求还在继续中...常看浏览器是否支持XMLHttpRequest：window. XMLHttpRequest;创建XMLHttpRequest对象：var request = new XMLHttpRequest();// 只需要把XML

89241846 2019-09-12

不使用XMLHttpRequest对象实现Ajax效果的方法小结

本文实例讲述了不使用XMLHttpRequest对象实现Ajax效果的方法。分享给大家供大家参考，具体如下：。在页面不刷新的情况下，利用XMLHttpRequest发送HTTP请求。但是不依靠XMLHttpRequest对象，也是可以实现Ajax效果的，我

青菜萝卜白菜 2019-07-03

X-Requested-With:XMLHttpRequest

X-Requested-With头域就是用来判断一个请求是传统的HTTP请求，还是Ajax请求。也就是说Ajax的请求一般都会带上X-Requested-With头域。　　　 accept */*　　　 accept-language zh-cn　　　 r

荒唌Blog 2017-12-18
liqing00

liqing00

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号