Ajax无刷新方法纵览（1）—XMLHttpRequest对象

一.XMLHttpRequest对象

1.XHR对象的调用及其属性和方法

关于无刷新技术，很自然的会想到XMLHttpRequest(XHR)对象，这是Ajax中请求服务器局部刷新的技术基础，在主流的浏览中都支持XHR，不过是在不同版本和类型的浏览器是用不同的方法获取这个对象。 

var xhr;
try
{xhr= new ActiveXObject('Msxml2.XMLHTTP'); /*IE5.0*/}
catch(e)
{
 try{xhr= new ActiveXObject('Microsoft.XMLHTTP'); /*IE5.5*/}
 catch(e)
 {
  try{xhr= new XMLHttpRequest();/*IE7及其他类型浏览器*/}
  catch(e){}
 }
}

上面利用异常的机制实现了浏览器的兼容。

XHR有同步和异步两种方式，同步请求时，页面会等待服务器的响应结束才允许用户继续进行其他工作，因此如果这个请求阻塞用户很久，那是很令人失望的。所以，通常使用的是异步请求，让用户可以在等待响应的期间可以继续做其他的。下面是典型的打开一个异步请求并处理的代码。 

xhr.open("get","ajax.aspx?arg=a&arg=b" ); //创建请求
xhr.onreadystatechange= function() { //注册请求状态改变的处理事件
    if(xhr.readyState==4 ) {
        if(xhr.status==200 ) {
            var text= xhr.responseText;
        }      
    }                
}

xhr.send(null);//发送请求

 —open()方法是向服务器发送一个请求的前的准备，使用它可以创建一个请求。其完整的形式是open(method,url,asynchronous,username,password)，正如上面的示例，后面三个参数是可选的。第三个参数表示请求是否是异步，不设值时，默认的便是true即异步。第一个参数是发送请求的方式，一般是GET或POST比较常用(其他的还有PUT、DELETE等方法)。

• GET方法如果传递参数，是用紧跟在"?"后面用"&"分隔开的名值对，作为查询字符串提交。在服务器端处理时一般用request.querystring提取(PHP用$_GET("参数名"))。由于send方法中参数body是必须的，而GET方法下不发送数据到服务器端，所以可以为null。
• POST方法，实际也是可以在URL中传递查询字符串的，并在服务器端用同样的方法提取。然而使用POST方法，是因为需要发送影响服务器状态或更大量的数据。它发送的数据是send方法中body参数的值，该参数也是查询字符串的形式(这也许比较常见，或者说更容易用标准的方式可以提取，就如同从表单用POST方式提交，而实际上如果不设置请求的头部信息，它可以是任何形式)。在服务器端获取时，一般使用request.form提取(PHP用$_POST("参数名"))需要特别注意的是，由于是CGI风格(表单式的提交)上传浏览器数据，所以需要用setRequestHeader方法设置请求的头部信息，这必须要在send方法前设置。 
          
  xhr.open("post","ajax.aspx" )
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded" );
  xhr.onreadystatechange= function() {
      if(xmlhttp.readyState==4 ) {
          if(xmlhttp.status==200 ) {
              var text= xhr.responseText;
          }