XMLHttpRequest对象五步使用法

标签： xmlhttprequest 对象 | 发表时间：2012-07-25 22:53 | 作者：
出处：http://www.iteye.com

在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。

XMLHttpRequest简介

XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

XMLHttpRequest和Javascript

Javascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来，提供给Javascript处理。

XMLHttpRequest的五步使用法：

1、 建立XMLHttpRequest对象

2、  注册回调函数

3、  使用open方法社会自和服务器端交互的基本信息

4、  设置发送的数据，开始和服务器端交互

5、  在回调函数中判断交互是否结束，响应是否正确，并根据需要过去服务器端返回的数据，更新页面内容

下面我们以用户名确认来实现XMLHttpRequest的五步使用法：

[html]  view plain copy
  1. <!DOCTYPE html>  
  2.   
  3. <html>  
  4.   
  5.     <head>  
  6.   
  7.         <title></title>  
  8.   
  9.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  10.   
  11.         <script type="text/javascript">  
  12.   
  13.              var xmlhttp;  
  14.   
  15.             function submit(){  
  16.   
  17.                 //1.创建XHLHttpRequest对象  
  18.   
  19.                 if(window.XMLHttpRequest){  
  20.   
  21.                     //alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera");  
  22.   
  23.                     //IE7，IE8 ,FireFox。Mozillar、Safari，Opera  
  24.   
  25.                      xmlhttp=new XMLHttpRequest();  
  26.   
  27.                     if(xmlhttp.overrideMimeType){  
  28.   
  29.                         xmlhttp.overrideMimeType("text/xml");  
  30.   
  31.                           
  32.   
  33.                     }  
  34.   
  35.                 }else if(window.ActiveXObject){  
  36.   
  37.                     //IE6,IE6.5 IE5  
  38.   
  39.                     alert("IE6,IE6.5 IE5");  
  40.   
  41.                     var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',  
  42.   
  43.                         'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0',  
  44.   
  45.                         'MSXML2.XMLHTTP.1.0'];  
  46.   
  47.                     for(var i=0; i<activexName.length;i++){  
  48.   
  49.                         try{  
  50.   
  51.                             xmlhttp=new ActiveXObject(activexName[i]);  
  52.   
  53.                             break;  
  54.   
  55.                         }catch(e){  
  56.   
  57.                               
  58.   
  59.                         }  
  60.   
  61.                     }  
  62.   
  63.                  }  
  64.   
  65.                  if(xmlhttp==undefined||xmlhttp==null){  
  66.   
  67.                      alert("当前浏览器不支持穿件XMLHttpRequest对象，请更换浏览器");  
  68.   
  69.                      return;  
  70.   
  71.                  }  
  72.   
  73.                  //alert(xmlhttp);  
  74.   
  75.                  //2.注册回调方法  
  76.   
  77.                  xmlhttp.onreadystatechange=callback;  
  78.   
  79.               
  80.   
  81.                  //错误的写法callback();  
  82.   
  83.                    
  84.   
  85.                  //记忆一个固定用法，获取文本框中用户输入的内容  
  86.   
  87.                  var userName=document.getElementById("UserName").value;  
  88.   
  89.                  /*  
  90.   
  91.                   //GET方式交互  
  92.   
  93.                  //设置和服务器端交互的相应参数  
  94.   
  95.                  xmlhttp.open("GET","AjaxServer?name="+userName,true);  
  96.   
  97.                    
  98.   
  99.                  //4.设置向服务器端发送的数据，启动和服务器端的交互  
  100.   
  101.                  xmlhttp.send(null);  
  102.   
  103.                  */  
  104.   
  105.                 //POST方式交互  
  106.   
  107.                 //3.设置和服务器端交互的相应参数  
  108.   
  109.                 xmlhttp.open("POST","AjaxServer",true);  
  110.   
  111.                   
  112.   
  113.                 //POST方式交互所需要增加的代码  
  114.   
  115.                 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
  116.   
  117.                   
  118.   
  119.                 //4.设置向服务器端发送的数据，启动和服务器端的交互  
  120.   
  121.                 xmlhttp.send("name="+userName);  
  122.   
  123.                    
  124.   
  125.             }  
  126.   
  127.             function callback(){  
  128.   
  129.                 //5.判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据  
  130.   
  131.                        
  132.   
  133.                 if(xmlhttp.readyState==4){  
  134.   
  135.                     //表示和服务器端的交互已经完成  
  136.   
  137. //服务器返回的http状态码  
  138.   
  139. //200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”  
  140.   
  141.                     //alert(xmlhttp.status);  
  142.   
  143.                     if(xmlhttp.status==200){  
  144.   
  145.                         //表示服务器端的响应代码是200，正确的返回了数据  
  146.   
  147.                         //纯文本数据的接受方法  
  148.   
  149.                         var message=xmlhttp.responseText;  
  150.   
  151.                         //XML数据对应的DOM对象的接受方法  
  152.   
  153.                         //使用前提是，服务器端需要设置content-type为text/xml  
  154.   
  155.                         //var domXml=xmlhttp.responseXML;  
  156.   
  157.                         alert("bb");  
  158.   
  159.                         //记忆想div标签填充文本内容的方法  
  160.   
  161.                         var div=document.getElementById("message");  
  162.   
  163.                         div.innerHTML=message;  
  164.   
  165.                          
  166.   
  167.                     }  
  168.   
  169.                 }  
  170.   
  171.             }  
  172.   
  173.         </script>  
  174.   
  175.     </head>  
  176.   
  177.     <body>  
  178.   
  179.         <input type="text" id="UserName"/>  
  180.   
  181.         <input type="button" value="校验用户名" onclick="submit()"/>  
  182.   
  183.         <br/>  
  184.   
  185.         <div id="message"></div>  
  186.   
  187.     </body>  
  188.   
  189. </html>  

 

XMLHttpRequest的详细属性和方法

方法和属性

描述

Open（String method,String url,Boolean ansynch,String username,String password）

指定和服务器端交互的HTTP方法，URL地址及其他请求信息。

其中method表示HTTP请求方法。支持所有HTTP的方法，一般使用“GET”，“POST”url表示请求的服务器的地址

Asynch表示是否采取异步方式，true表示异步，false表示同步

后两个参数可以不指定，usrename和password分别表示用户名和密码，提供http认证机制需要的用户名和密码

Send(content)

向服务器发出请求，如果采用异步方式，该方法会立即返回

Content可以不指定或者指定为null表示不发送数据

其内容可以使DOM对象，输入流或是字符串

 

setRequestHeader(String header,String value)

设置HTTP请求中的指定头部header的值为value。
次方法需在open方法以后调用

getAllReponseHeader()

返回包含HTTP的所有响应头包括Content-Length，Date，URI等内容

返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔

GetResponseHeader(String header)

返回HTTP响应头中指定的键名header对应的值

Abort()

停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态

responseText

服务器响应的文本内容

ResponseXML

服务器响应的XML内容对应的DOM对象

Status

服务器返回的http状态码

200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”

statusText

服务器返回状态码的文本信息

readyState

表示XMLHttpRequest对象的状态

0=未初始化。对象已创建，未调用open

1=open方法成功调用以后。Send方法未调用

2=send方法已经调用，尚未开始接受数据

3=正在接受数据。Http响应头信息已经接受，响应数据尚未接受完成。

4=完成。响应数据接受完成。

Onreadystatechage

请求状态改变的时间触发器（readyState变化时会调用这个属性上注册的javascript函数）

 

XMLHttpRequest的五步使用注意事项：

1.       不同浏览器中XMLHttpRequest对象建立的方式不同：

IE7，IE8，FireFox，Mozilla,Safair,Opera中直接new XMLHttprequest()

IE6,IE5.5,IE5则需要通过某一个正确的ActiveXOject控件的名称通过new ActiveXObject（控件名）的方式

2.     设置回调函数时，不要在函数名后面加括号。加口号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性。

实际上每次readySatte的值发生变化的时候，回调函数都会被调用，但是一般我们只关心状态4.

如果只关心正确的响应数据，只要在执行send方法之前设置回调函数即可。但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数，这样回调函数还可以处理其他的状态。

 

3.     open方法最多可以有五个参数，其中头三个参数是必须的。

使用GET方式时，请求数据位于url连接中，后面的send方法的参数直接写null就可以使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置Content-Type的值，然后调用send方法，send的参数就是请求的数据。

4.     回调函数中，最好将判断readyState和status的两个if条件，分开来写。readyState的判断条件位于外层，status的位于内层。

假如他们被放到了同一个if条件中，判断数据正常返回页是没有问题的。但是不便于分别处理服务器端不是200响应的情况和readyState不是4的情况。

5.     当服务器端没有正确返回XML数据时，在Javascript中使用responseXML方式获取返回的XML数据对应的DOM对象时，FireFox和IE的结果是有差别的。

IE获取根元素节点为null，而FireFox获取根元素节点则是一个表示解析错误的元素节点。

XMLHttpRequest 的优势：

在不重新加载页面的情况下更新网页

在页面已加载后从服务器请求数据

在页面已加载后从服务器接收数据

在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。比较不好的一点是 IE5,6跟IE7,FIREFOX等浏览器之间有两种不同的XMLHttpRequest对象的实现方法。



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [xmlhttprequest 对象] 推荐：

XMLHttpRequest对象五步使用法

- - ITeye博客
在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据. XMLHttpRequest简介. XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据.

XMLHttpRequest Level 2 使用指南

- - 阮一峰的网络日志
XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信. 最早，微软在IE 5引进了这个接口. 因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生. 但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同. HTML 5的概念形成后，W3C开始考虑标准化这个接口.

关于XMLHttpRequest状态的讨论及处理方法

- - 奶牛博客
这两天把html5的Drag 、File API 和XMLHttpRequest Level 2的一些东西看了下，写了几个小demo，可以实现文件拖放进入浏览器，文件预览以及文件上传，打算过几天好好整理下，然后推到github上做个开源小项目. 今天主要是讨论下XMLHttpRequest的响应状态问题.

XMLHttpRequest实现HTTP协议下文件上传断点续传

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=3754. 不知大家有没有观察过，在秋季，也就是眼下这个时间，当阵风挂起的时候，地上的落叶就会以一个接一个，翻滚着一同被吹走，这就是“跟风”. 老祖宗确实很有智慧，造出来的词语源于生活，又高于生活. 眼下，又是另一波跟风之势——“网盘”，犹如当年团购一样.

XmlHttp / XmlHttpRequest 取数据时避免缓存的2种解决方案

- - Web前端 - ITeye博客
方法一：加If-Modified-Since头. xmlhttp多次调用时它却总是显示缓存页面, 尝试在 php 或 asp 中加入相应的http头明确不要缓存, 也没什么效果. 现在终于找到一个办法啦,就是在 xmlhttp.open 之后发送一个If-Modified-Since头即可, 代码如下.

javascript对象转json

- - JavaScript - Web前端 - ITeye博客
把javascript对象转成json. 已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

对象的消息模型

- loudly - 酷壳 - CoolShell.cn
[ ———— 感谢 Todd 同学 投递本文，原文链接 ———— ]. 话题从下面这段C++程序说起，你认为它可以顺利执行吗. 试试的确可以顺利运行输出hello world，奇怪吗. 其实并不奇怪，根据C++对象模型，类的非虚方法并不会存在于对象内存布局中，实际上编译器是把Hello方法转化成了类似这样的全局函数：.

jQuery的deferred对象详解

- 郑小东 - 阮一峰的网络日志
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本. 今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax. 为了实现它，jQuery的全部ajax代码都被改写了.

我连对象都没有。。。

- 老五 - Lzhi&#39;s Views
两个黄鹂鸣翠柳，我连对象都没有. 劝君更尽一杯酒，我连对象都没有. 莫愁前路无知己，我连对象都没有. 借问酒家何处有，我连对象都没有. 停车坐爱枫林晚，我连对象都没有. 一枝红杏出墙来，我连对象都没有. 壮士一去不复还，我连对象都没有. 烈火焚烧浑不怕，我连对象都没有. 雌雄双兔奔地走，我连对象都没有.

js对象深拷贝

- - ITeye博客
在做一个前台页面你的时候用到了一个自己写的List对象，在进行深拷贝的时候参考了网上的代码：. //对象扩展，tObj被扩展对象，sObj扩展对象. Object.extend(a,b);//a获得了b的所有属性. 我自己定义的list中没有定义constructor，所以执行sObj.constructor == Array会报错，我就修改为：.