XMLHttpRequest对象五步使用法
在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的五步使用法：
<!DOCTYPE html><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var xmlhttp; function submit(){ //1.创建XHLHttpRequest对象 if(window.XMLHttpRequest){ //alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera"); //IE7，IE8 ,FireFox。Mozillar、Safari，Opera xmlhttp=new XMLHttpRequest(); if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //IE6,IE6.5 IE5 alert("IE6,IE6.5 IE5"); var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0', 'MSXML2.XMLHTTP.1.0']; for(var i=0; i<activexName.length;i++){ try{ xmlhttp=new ActiveXObject(activexName[i]); break; }catch(e){ } } } if(xmlhttp==undefined||xmlhttp==null){ alert("当前浏览器不支持穿件XMLHttpRequest对象，请更换浏览器"); return; } //alert(xmlhttp); //2.注册回调方法 xmlhttp.onreadystatechange=callback; //错误的写法callback(); //记忆一个固定用法，获取文本框中用户输入的内容 var userName=document.getElementById("UserName").value; /* //GET方式交互 //设置和服务器端交互的相应参数 xmlhttp.open("GET","AjaxServer?name="+userName,true); //4.设置向服务器端发送的数据，启动和服务器端的交互 xmlhttp.send(null); */ //POST方式交互 //3.设置和服务器端交互的相应参数 xmlhttp.open("POST","AjaxServer",true); //POST方式交互所需要增加的代码 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.设置向服务器端发送的数据，启动和服务器端的交互 xmlhttp.send("name="+userName); } function callback(){ //5.判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据 if(xmlhttp.readyState==4){ //表示和服务器端的交互已经完成//服务器返回的http状态码//200表示“成功”，404表示“未找到”。500表示“服务器内容部错误” //alert(xmlhttp.status); if(xmlhttp.status==200){ //表示服务器端的响应代码是200，正确的返回了数据 //纯文本数据的接受方法 var message=xmlhttp.responseText; //XML数据对应的DOM对象的接受方法 //使用前提是，服务器端需要设置content-type为text/xml //var domXml=xmlhttp.responseXML; alert("bb"); //记忆想div标签填充文本内容的方法 var div=document.getElementById("message"); div.innerHTML=message; } } } </script> </head> <body> <input type="text" id="UserName"/> <input type="button" value="校验用户名" onclick="submit()"/> <br/> <div id="message"></div> </body></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对象的实现方法。