Ajax核心对象——XMLHttpRequest对象

转自http://blog.csdn.net/beijiguangyong/article/details/7735707

 

XMLHttpRequest对象在Ajax中占据着十分重要的地位，因为通常意义上的和服务器进行交互是通过提交表单的形式，而在Ajax中的客户端通过XMLHttpRequest对象实现与服务器的通信。也就是说正是因为XMLHttpRequest才使得Ajax得以实现，于是我们的与服务器的交互速度明显提升，消除了令人头疼的等待之后用户体验便也更加良好。

名字由来：

XMLHttpRequest之所以叫这个名字是因为它与服务器通信得过称中利用XMLHttp（post、head或者get方式）请求（Request）的过程，然后通过XML（XML是常用格式，并不限于和XML 文档，可以接收任何形式的文本文档）的形式将服务器的返回结果发送到客户端进行解析。上面的话翻译成英文就是：the object send request in order to get the XML byXMLHttp method.（你说外国人编程能不好么，人家写代码就跟说话一样，丫的！）

其实XMLHttpRequest对象也不是一个新技术，这个对象最早出现在微软的IE浏览器中，是以ActiveX组件的形式出现的，况且也不是W3C的标准，所以在当时并没有引起开发人员太大的注意。自从Google推出Google Map和Google Suggest产品以后，Ajax技术以飞快的速度发展起来，而XMLHttpRequest对象又是Ajax的重要组成部分，所以XMLHttpRequest对象也开始重新受到重视。到目前为止XMLHttpRequest依旧不是W3C的标准，所以一个有趣的现象就是常用的各种浏览器提供对XMLHttpRequest对象支持，但是在各种浏览器中，XMLHttpRequest对象的创建方法稍有不同，更加奇怪的是创建成功之后，在使用方法上是没有任何区别的。也就是说这个对象已经成为事实意义上的标准，只是标准还不是很完善罢了。

创建XMLHttpRequest：

 

function createXMLHttpRequest(){
    if(window.XMLHttpRequest){
        //Mozilla浏览器
        XMLHttpReq=new XMLHttpRequest();
    }else{
        //IE浏览器
        if(window.ActiveXObject){
            try{
                XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");
            }catch(e){
                try{
                    XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){}
            }
        }
    }
}

 

 

在上面这个JavaScript函数中，实现的功能是创建一个XMLHttpRequest对象，其中windowXMLHttpRequest可以判断浏览器是否通过JavaScript本地方法支持XMLHttpRequest对象，如果是通过JavaScript本地方法支持XMLHttpRequest对象，就可以用第5行代码的方法创建这个对象，这就是除IE浏览器外其他浏览器中创建XMLHttpRequest对象的方法。

用windowActiveXObject可以判断浏览器是否支持ActiveX，在IE浏览器中是通过ActiveX组件支持XMLHttpRequest对象，如果浏览器支持ActiveX，就可以使用下面的方法创建XMLHttpRequest对象，这就是在IE浏览器中创建XMLHttpRequest对象的方法。

总之，这里提供的XMLHttpRequest对象的创建方法解决了不同浏览器的差异，而且也处理了不同版本IE浏览器之间的差别，所以可以作为创建XMLHttpRequest对象的通用方法。无论读者使用哪种浏览器都可以在自己的程序中使用上面的代码创建XMLHttpRequest对象。

XMLHttpRequest常用的方法：

在XMLHttpRequest对象创建之后，就可以对这个对象进行各种不同的操作，从而完成和服务器的通信，接下来介绍XMLHttpRequest对象常用的方法。

open(Method, URL, Asynchronous, UserName, Password )方法可以建立对服务器的调用，这个方法有五个参数，前两个参数是必须的，其中method可以是GET或者POST，url是指所要访问的服务器资源的位置，Asynchronous是指异步访问服务器还是同步访问，默认是异步访问，异步访问正是Ajax的优势所在。使用最后两个参数可以使用指定的用户名和密码访问服务器资源。

send( Data)这个方法可以向服务器发送请求，这个方法中的参数回座位请求中的内容发送到服务器。

小结：常用的方法就两个，一个open一个send，类比数据库的知识，想要和服务器进行交互，首先要打开连接，然后发送请求。

XMLHttpRequest常用属性：

readyState这个属性，每个状态的改变都会调用事件处理器，使用这个属性可以监听XMLHttpRequest的状态。状态可以取下面的5个值：0（为初始化）、1（正在加载）、2（已加载）、3（交互中）、4（已完成）。

onreadystatechange属性，比较标准的叫法应该叫The onreadystatechange event listener。是一个监听器，每个状态的改变都会调用这个事件处理器，使用这个属性可以监听状态的变化，并提供对应的处理方法（有些地方叫回调函数）。

status属性描述了服务器的状态码，可以是200也可以是404

statusText描述了HTTP状态码对应的文本，例如200对应OK、404对应Not Found等。

responseText是服务器以文本字符串返回的响应

responseXML是服务器以XML格式返回的响应，以XML返回的好处是可以方便的解析返回的内容。

小结：交互必是两个以上的对象，所以双方的状态都需要考虑（readyState，status或statusText），而判断双方是否准备好需要一个触发事件（onreadystatechange），当双方都准备好之后就开始进行传输（responseText，responseXML）。

总结：

创造的好处是明显的，但是成本也是令人望而生畏的，与此相比，利用已有的资源通过改变思想，然后去解决新的问题就显得更加高明。换句话说，思想上的创造比具体事物上的创造更加具有颠覆作用。SB英语学习中的走遍美国、EAI当中对已有系统的整合都和XMLHttpRequest在Ajax当中的应用有异曲同工之妙，思想上的创造才是真正的创造。