转:AJAX中xhr对象详解

XJAX ,并非一种新技术的诞生.它实际上表明的是几项技术按必定的方式组合在一在同共的协做中发挥各自的做用.
它包括：
使用XHTML和CSS标准化呈现；
使用DOM实现动态显示和交互；
使用XML和XSLT进行数据交换与处理；
使用XMLHttpR
XJAX ,并非一种新技术的诞生.它实际上表明的是几项技术按必定的方式组合在一在同共的协做中发挥各自的做用.
它包括：
使用XHTML和CSS标准化呈现；
使用DOM实现动态显示和交互；
使用XML和XSLT进行数据交换与处理；
使用XMLHttpRequest进行异步数据读取；
最后用JavaScript绑定和处理全部数据。

在这里我只向谈点XMLHttpRequest对象:

在上面看到,使用XMLHttpRequest进行异步数据读取；

首先,咱们要建立该对象,针对不一样的浏览器,该对象的建立方法是有区别.
Internet Explorer以ActiveX对象引入,被称为XMLHTTP.

对于Internet Explorer浏览器，建立XMLHttpRequest 方法以下：
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

在不一样Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不一样版本的Internet Explorer浏览器，所以咱们须要根据不一样版本的Internet Explorer浏览器来建立XMLHttpRequest类，上面代码就是根据不一样的Internet Explorer浏览器建立XMLHttpRequest类的方法。


对于Mozilla?Netscape?Safari等浏览器，建立XMLHttpRequest 方法以下：

xmlhttp_request = new XMLHttpRequest();
　　若是服务器的响应没有XML mime-type header，某些Mozilla浏览器可能没法正常工做。 为了解决这个问题，若是服务器响应的header不是text/xml，能够调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');

在实际应用中，为了兼容多种不一样版本的浏览器，通常将建立XMLHttpRequest类的方法写成以下形式：

try{
　if( window.ActiveXObject ){
　　for( var i = 5; i; i-- ){
　　　try{
　　　　if( i == 2 ){
　　　　　xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
　　　　}else{
　　　　　xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
　　　　}
　　　xmlhttp_request.setRequestHeader("Content-Type","text/xml");
　　　xmlhttp_request.setRequestHeader("Content-Type","gb2312");
　　　break;
　　}
　　catch(e){
　　　xmlhttp_request = false;
　　}
　}
}else if( window.XMLHttpRequest ){
　xmlhttp_request = new XMLHttpRequest();
　if (xmlhttp_request.overrideMimeType) {
　　xmlhttp_request.overrideMimeType('text/xml');
　}
}
}catch(e){ xmlhttp_request = false; }
在定义了如何处理响应后，就要发送请求了。能够调用HTTP请求类的open()和send()方法，以下所示：

xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);

open()的第一个参数是HTTP请求方式?GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；不然，某些浏览器(如Firefox)可能没法处理请求。


第二个参数是请求页面的URL。

　　第三个参数设置请求是否为异步模式。若是是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。


用JavaScript来建立XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，须要作什么。这须要告诉HTTP请求对象用哪个JavaScript函数处理这 个响应。能够将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，以下所 示：xmlhttp_request.onreadystatechange =FunctionName;


FunctionName是用JavaScript建立的函数名，注意不要写成FunctionName()，固然咱们也能够直接将JavaScript代码建立在onreadystatechange以后，例如：

xmlhttp_request.onreadystatechange = function(){
　// JavaScript代码段
};


在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才能够处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

　　readyState的取值以下：

　　　0 (未初始化)

　　　1 (正在装载)

　　　2 (装载完毕)

　　　3 (交互中)

　　　4 (完成)

　　因此只有当readyState=4时，一个完整的服务器响应已经收到了，函数才能够处理该响应。具体代码以下：

if (http_request.readyState == 4) {
　// 收到完整的服务器响应
} else {
　// 没有收到完整的服务器响应
}


　当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

　　在检查完请求的状态值和响应的HTTP状态值后，就能够处理从服务器获得的数据了。有两种方式能够获得这些数据：(1) 以文本字符串的方式返回服务器的响应.

2006/01/19XMLHttpRequest详解


/*
*author Jouy.lu
*/
var xmlHttp; //首先定义一个全局域变量来保存对象的引用;
function createXMLHttpRequest(){ //该方法用来建立XMLHttpRequest对象的实例.
if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
}
}

考虑到兼容浏览器的问题：建议的写法以下：

var xmlhttp;
function createXmlhttp(){
if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
  if (xmlhttp.overrideMimeType){
   xmlhttp.overrideMimeType("text/xml");
  }
 
}
else if(window.ActiveXObject){
  try{
   xmlhttp = new  ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
}
if(!xmlhttp){
  window.alert("Your broswer not support XMLHttpRequest!");
}
return xmlhttp;
}

/************************************XMLHttpRequest的标准操做*********************
abort():终止当前请求;
getAllResponseHeaders():把HTTP因此响应首部做为键/值对返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");创建对服务器的调用,url参数能够是相对URL或绝对URL,该方法还包含了另三个可选参数;
send(content);向服务器发送请求;
setRequestHeader("header","value");把指定首部设置为所提供的值。在设置任何首部以前必须先调用open()。
注:
  void open(string method, string url, boolean asynch, string username, string password)：这个方法会创建对服务器的调用。
要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还能够传递一个Boolean值，指示这个调用是异步仍是同步的， 默认值为true，这表示请求本质上是异步的。若是这个参数为false，处理就会等待，直到从服务器返回响应为止。因为异步调用是使用Ajax 的主要优势之一，因此假若将这个参数设置为false，从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在某些状况下这,个参数 设置为false也是有用的，好比在持久存储页面以前你可能想先验证用户的输入。最后两个参数不说自明，容许你指定一个特定的用户名和口令。
  void send(content)：这个方法具体向服务器发出请求。若是请求声明为异步的，这个方法就会当即返回，不然它会等待，直到接收到响应 为止。参数是可选的，能够是一个DOM对象的实例、一个输入流，或者是一个串。传入这个对象的内容会做为请求体的一部分发送。
  void setRequestHeader(string header, string value)：这个方法为HTTP请求中一个给定的首部设置值。它有两个参数，第一个串表 示要设置的首部，第二个串表示要在首部中放置的值。须要说明，这个方法必须在open()以后才能调用。在全部这些方法中，最有可能用到 的就是open()和send()。XMLHttpRequest对象还有许多属性，在设计Ajax交互时这些属性很是有用。
  void abort()： 顾名思义，这个方法就是要中止请求。
  string getAllResponseHeaders()： 这个方法的核心功能对Web应用开发人员应该很熟悉了，它会返回一个串，其中包含HTTP请求的全部响 应首部。首部包括Content-Length、Date和URI。
  string getResponseHeader(string header)：这个方法与getAllResponseHeaders()是对应的，不过它有一个参数来表示你但愿获得哪个  首部值，而且会把这个值做为一个串返回。
******************************/

/***************标准XMLHttpRequest属性******************
onreadystatechange:每一个状态改变时都会触发这个事件处理器，一般会调用一个JavaScript函数。
readyState:请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载， 2 = 已加载， 3 = 交互中， 4 = 完成。
responseText:服务器的响应，表示为一个串。
responseXML:服务器的响应，表示为XML。这个对象能够解析为一个DOM对象。
status:服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）.
statusText:HTTP状态码的相应文本（OK或Not Found（未找到）等等）。
*************************************************************/

/*********************来看看到底要怎么才能发送请求*******
使用XMLHttpRequest对象发送请求的基本步骤以下：
1.获得XMLHttpRequest对象实例的一个引用，为此，能够建立一个新的实例，也能够访问包含有
XMLHttpRequest实例的一个变量。
2.告诉XMLHttpRequest对象，哪一个函数会处理XMLHttpRequest对象状态的改变。为此要把对象的onreadystatechange属性设置为指向一个JavaScript函数的指针。
3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个 参数：一个是指示所用方法（一般是GET或POST）的串，另外一个是表示目标资源URL的串，还有一个Boolean值，指示请求是不是异步的。
4. 将请求发送给服务器。XMLHttpRequest对象的send()方法会把请求传送到指定的目标资源。
send()方法接受一个参数，这一般是一个串或一个DOM对象。这个参数会做为请求体的一部分传送到目标URL.向send()方法提供参数时，要确保open()中指定的方法是POST。若是没有数据要做为请求体的一部分发送，则使用null。

异步方式给用户带来的体验:(我想程序员看到这段解释,内心真的很爽!)
对服务器的请求是异步发送的，所以浏览器能够继续响应用户输入，并在后台等待服务器的响应。
若是选择同步操做，并且假若服务器的响应要花好几秒才能到达，浏览器就会表现得很迟钝，在等待期间不能响应用户的输入。这样一来，浏览器好像被冻住同样，没法响应用户输入，而异步作法能够避免这种状况，从而让最终用户有更好的体验，尽管这种改善很细微，但确实颇有意义。
这样用户就能继续工做，并且服务器会在后台处理先前的请求。能与服务器通讯而不打断用户的工做流，这样就能够采用不少技术来改善用户体验。例如， 假设有一个验证用户输入的应用。用户在输入表单上填写各个域时，浏览器能够按期地向服务器发送表单值来进行验证，此时并不打断用户，他还能够继续填写余下 的表单域。若是某个验证规则失败，用户会当即获得通知，而没必要等表单真正发送到服务器进行处理时才知道有错误，这就能大大节省用户的时间，也能减轻服务器 上的负载压力，由于没必要在表单提交不成功时彻底重建表单的内容。

下面是说明安全问题的:
XMLHttpRequest对象要受制于浏览器的安全“沙箱”。XMLHttpRequest对象请求的全部资源都必须与调用脚本在同一个域 （domain）内。这个安全限制使得XMLHttpRequest对象不能请求脚本所在域以外的资源。这个安全限制的强度如何因浏览器而异（见图 2-5）。Internet Explorer
会显示一个警告，指出可能存在一个安全风险，可是用户能够选择是否继续发出请求。Firefox则会断然中止请求，并在JavaScript控制 台显示一个错误消息。Firefox确实提供了一些JavaScript技巧，使得XMLHttpRequest也能够请求外部URL的资源。不过，因为 这些技术针对特定的浏览器，最好不要用，并且要避免使用XMLHttpRequest访问外部URL。