（转）XMLHTTPRequest对象原理介绍与应用

 

转自： http://hi.baidu.com/liuxinhuahao/blog/item/2d1a77eff54a68f3b2fb95da.html

写得很生动形象

XMLHTTPRequest对象原理介绍与应用

前一阵支援EKP，发现小蒋的代码中已经用JQuery做前端的开发了，于是就想到MAP3.0的时候希望每个开发人员都能掌握JQuery，这将会提高开发效率和质量。为什么我一直没用，说到这因为面临一个问题，原来prototype很流行，比较早的js开发库，而且不是每个开发人员都掌握的，那么就会带来一些问题，你写的代码别人看不懂，何谈修改，会给其它同事和项目开发人员带来一些痛苦和困惑，而且在长期的环境下，大多数开发人员已经习惯了“复制－粘贴－修改”的工作习惯，就像我一样，我现在都习惯这种开发方式了，而且好像也没带来什么问题，这种意识在长期的积累中会不断的加深，再加上平常进度的压力，已经不太主动去接受新事物了，所以希望公司这轮质量和性能的改革春风也能把我们这些开发人员吹一吹，也包括我，所以我今年的学习计划就是尽力的把以前学的给捡回来，也希望在捡的过程中，把一些分享给大家。这次分享本来想给大家分享jQuery的强大和开发的高效，但jquery这几天正在捡，过段时间再想想怎么介绍给大家比较合适，如果只是把常用方法，属性列出来可能有些乏味，所以要换种浅显易懂的方式。既然不介绍jquery那你还写这个干嘛？？因为我想起jquery就想起了Ajax，想起ajax就想起了郭昊，然后再回过头想到了我们代码中的openXMLHTTP方法，最后想起了开头的一段：由于我们习惯copy的模式，可能有些原理就没有去学习和理解，所以想想就先介绍一下XMLHTTPRequest这个对象给大家，因为它是Ajax应用的基础，在jquery中有个好听的名字：ajax引擎！     XMLHTTPRequest最早是由微软IE5作为ActiveXObecjt对象引入的，引入这个东西的目的就是能向服务器发送异步请求，但这一对象直到Ajax技术的出现才真正有了用武之地，而其它浏览器厂商也认识到这一对象的重要性，纷纷引入但不是作为ActiveXObject对象引入，而是作为一个标准的浏览器对象引入的，现在IE7,IE8微软已经修正作为一个标准的浏览器对象引入，而且W3C组织也可能要把它标准化。所以以后我们的代码可能不会写成 Var xmlhttp = new ActiveXObject(“Miscrosoft.XMLHTTP”);而直接写成var xmlhttp=new XMLHTTPRequest();那么说到这XMLHTTPRequest到底是什么，可以怎么用？如果你了解http协议这个问题就很好理解，就目前来讲所有的web的应用都是基于http协议的，这个协议规定了请求与响应一方应遵守的标准，只要满足这个标准就可以通信，例如我们建一个form然后填写信息提交到服务器，等待服务器处理，这个过程的实质其实就是浏览器把我们的请求包括form中的信息格式化成一个标准http协议的请求报头和请求正文，然后传送给服务器，我们一般都是这么干的，实质上XMLHTTPRequest也能这么干，也能格式化请求并发送请求而且还能返回服务器响应的内容。这也正是ajax应用的本质所在：只取客户端关心的数据，而不必回送整个页面，实现了无刷新的效果！那么XMLHTTPRequest是怎么干的呢？下面就介绍一下XMLHTTPRequest这个对象的方法和属性，并告诉你它是怎么干的。   场景：我想找个人帮我问李四：王五回家没有？ 步骤1：var xmlhttp = new XMLHTTPRequest(); //实例化一个XMLHTTPRequest对象 比喻：找“张三”帮我做这个事，但现在张三只知道要帮我问话。   步骤2：xmlhttp.onreadystatechane=callback;//注册回调函数 比喻：张三带个手机，好告诉进展。   步骤3：xmlhttp.open(“get/post”,URL,isAsyn,username,password)5个参数。 get/post:采用哪种方法 URL请求的URL，同步或異步（true异步，默认值），username验证的用户名，password对应的密码，后两个参数可选，第三个参数省略用默认值 //初始化http请求，并准备发送请求 比喻：我现在告诉张三(xmlhttp)去问李四(URL).              采用get方向则直接是url?问话=王五回家没有， 采用post则我把“问话=王五回家没有”写到纸条上并告诉李四你要问的就是纸上的问题。如何选择同步意味着我必须等到张三回来我才能走开干其它的事，如果选择异常我吩咐完就干我自己的事了，等张三回来告诉我结果就行了。 后面两个参数，如果李四不信任张三是我派去的，就会要求张三提供“暗号”，不然拒绝回答！张三已经准备好，准备出发了！   步骤4、xmlhttp.send(null);若采用post方式写成xmlhttp.send(data) 场景：张三快去吧！张三已经出发了。   场景5、function callback() {             If(xmlhttp.state==4&&xmlhttp.status==200)             Alert(xmlhttp.responseText);//问的结果 } 场景：收到李四的回答！ 但在场景5中为什么有判断，4代码什么，200又代码什么，因为张三去做这件事的时候还有其它状态，张三去问了在回来的路上和张三回来了。张三回来了就是4代码数据接收完成。200又代码什么呢，因为还有其它情况，例如张三没找到李四：404错误。 张三找到李四，李四说不清楚（没法处理），李四病了虽然知道说不了话（服务端不能正确响应请求），所以200代码李四没出现其它情况，是OK的。所以要加个判断！   说到这应该差不多明白了吧.下面就简单列举一下方法和属性及事件！ 方法： abort方法，忽略xmlhttp对象，重新回到未初始化状态，也意味着终止请求。 open方法，初始化请求。 send发送请求。 setRequestHead设置请求的报头。例如请求的编码格式，就像告诉李四张三说的是英语你不能按照中文理解。 getResponseHead获取响应的指定报头。 getAllResponseHead获取响应的全部报头。 属性： readystate状态就是描述张三是什么状态了，5个值，从0开始。0张三还不知道干啥事。 1知道干啥事了，还没去。2已经去了 3,回来了还没到。4回来了并且已经到了。 status存放响应的状态码。 statusText存放响应状态码的简短描述。 responseText存放响应的文本，以文本方式存放。 responseXML存放响应的XML文档模式对象，如果返回的是文本些值为null. onreadystatechange注册回调处理函数。 事件： onreadystatechange事件当state状态发生改变时触发，即调用注册的回调函数处理！

 

转载于:https://www.cnblogs.com/JarvisChu/archive/2011/01/10/2752509.html