第20章 使用XMLHttpRequest对象
使用XMLHttpRequest对象
们已经讨论了动态Web应用的发展历史，并简要介绍了Ajax，下面再来讨论问题我的关键：如何使用XMLHttpRequest对象。
尽管与其说Ajax是一种技术，不如说是一种技巧，但如果没有对XMLHttpRequest的广泛支持，Google Suggest和Ta-da List可能不会像我们看到的有今天这样的发展，而你可能也不会看到手上的这本书！XMLHttpRequest最早是在IE 5中以ActiveX组件形式实现的。
由于只能在IE中使用，所以大多数开发人员都没有用XMLHttpRequest，直到最近，Mozilla 1.0和Safari 1.2把它采用为事实上的标准，情况才有改观。
需要重点说明的是，XMLHttpRequest并不是一个W3C 标准，不过许多功能已经涵盖在一个新提案中：DOM Level 3加载和保存规约（DOM Level 3 Load and Save Specification）。
因为它不是标准，所以在不同浏览器上的表现也稍有区别，不过大多数方法和属性都得到了广泛的支持。
当前，Firefox、Safari、Opera、Konqueror和Internet Explorer都以类似的方式实现了XMLHttpRequest对象的行为。
前面已经说过，如果大量用户还是在使用较旧的浏览器访问网站或应用，就要三思了。
第1章讨论过，在这种情况下，如果要使用Ajax技术，要么需要开发一个候选网站，要么你的应用应当能妥善地降级。
大多数使用统计表明，在当前使用的浏览器中只有极少数不支持XMLHttpRequest，所以一般情况下不会存在这个问题。
不过，还是应该查看Web日志，确定你的用户在使用什么样的客户端来访问网站。
2.1 XMLHttpRequest对象概述在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。
XMLHttpRequest 对象详解
XMLHttpRequest 对象详解一、XMLHttpRequest 对象概述XMLHttpRequest是整个Ajax技术中的核心，缺少了它Ajax技术就无法成为一个有机的整体，将土崩瓦解。
Ajax赖以生存的核心就是异步发送请求。
1999年上半年，Microsoft 在IE 5.0 中首次使用了这种新技术，使用这种新技术，浏览者不必使用Web页跳转或表单提交来发送请求，可以直接从界面中发送请求到服务器，也可从服务器读取数据。
以前这种直接与服务器通信的实现方式仅有iframe，这个功能相当重要，可减少无状态连接的痛苦，还可减少下载冗余的html代码，从而提高响应速度。
于是Mircosoft 就发布了XMLHTTP 的ActiveX 对象，让开发者也能异步与服务器进行交互。
二、XMLHttpRequest的方法和属性abort() 停止发送当前请求。
getAllResponseHeaders(): 获取服务器返回的全部响应头。
getResponseHeader(“headerLabel”): 根据响应头的名字，获取对应的响应头。
open (“method” , “URL”,[asyncFlag],[userName],[password]);建议与服务器的URL连接，并设置请求的方法，以及是否使用异步请求。
如果远程服务需要用户名密码，则提供对应的用户名和密码。
send(content)：发送请求，其中content 是请求的参数。
setRequestHeader(“label”,”value”)：在发送请求之前，先设置请求头。
示例：//定义了XMLHttpRequest对象var xmlrequest;//完成XMLHttpRequest对象的初始化function createXMLHttpRequest(){if(window.XMLHttpRequest){//DOM 2浏览器xmlrequest = new XMLHttpRequest();}else if (window.ActiveXObject){// IE浏览器try{xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){}}}}//补充说明：Xmlrequest创建时判断浏览器支持javascript的类型的原因是,各种浏览器对JavaScript的支持不一样..所以XmlHttpRequest对象的产生方式也不一样.比如IE.他支持的是ActiveX的方式.["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XM LHttp","Microsoft.XMLHttp"];这些是他ActiveX的版本.而有些浏览器.象FireFox,浏览器本身有对XmlHttpRequest的支持.浏览器有内置对象.所以用"xmlHttp = new XMLHttpRequest(); "就可以了if(window.XMLHttpRequest)是判断浏览器是否内置XmlHttpRequest对象//补充说明结束//事件处理函数，当下拉列表选择改变时，触发该事件function change(id){//初始化XMLHttpRequest对象createXMLHttpRequest();//设置请求响应的URLvar uri = "second.jsp?id=" + id;//打开与服务器响应地址的连接xmlrequest.open("POST", uri, true);//设置请求头xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置处理响应的回调函数xmlrequest.onreadystatechange = processResponse;//发送请求xmlrequest.send(null);}//定义处理响应的回调函数function processResponse(){//响应完成且响应正常if (xmlrequest.readyState == 4){if (xmlrequest.status == 200){// 信息已经成功返回，开始处理信息var headers = xmlrequest.getAllResponseHeaders();//通过警告框输出请求头alert("请求头的类型：" + typeof headers + "\n"+ headers);//在页面输出所有请求头document.getElementById("output").innerHTML = headers;}else{//页面不正常window.alert("您所请求的页面有异常。
XMLHttpRequest 对象的方法
XMLHttpRequest对象的方法:
1/ void open( string method , string url , Boolean asynch , string username , string password ) 参数中的method用来指定HTTP请求使用的方法，可以是get , post或者是put . 第二个参数用来指定请求发送的URL , 第三个参数是指定这个发送请求是异步的还是同步的，默认值为true ，这表示是异步的。
2/ void send(dt) 这个函数用来向服务器发出请求。
如果前面的open( ) 方法中指定的请求声明为异步的，这个方法就会立即返回。
如果不是异步的，那就是和普通的web请求一样，他会等待所有的操作结束后再返回，直到从服务器端接受到了响应。
3/ void setRequestHeader( string header, string str ) 这个函数用来设置HTTP 请求中首部的信息。
它有两个参数，第一个参数代表被设置的首部，第二个参数代表在首部中设置的值。
它只能在open( ) 函数调用后才能调用。
4/ void abort( ) 这个函数用来停止或放弃请求
5/ string getAllResponseHeaders( ) 这个函数会返回一个字符串，字符串中包含HTTP 请求的所有响应首部。
其中包括Date , URL 和Content-Length
6/ stirng getResponseHeader( stirng header ) 这个函数与getAllResponseHeaders( )是对应的，其中参数用来表示希望得到哪一个首部值，并且会返回该值。
创建和使用XMLHttpRequest对象
在线学习好工作/创建和使用XMLHttpRequest对象创建XMLHttpRequest对象，我有以下几种方法，顺带给大家介绍下他们的使用，一起来看看那吧。
1. 第一种，我们可以使用构造函数的方式。
直接new的方式，这样我们就构造了这个对象。
request = new XMLHttpRequest()但是，这个语句只针对Firefox，opera以及Safari等高级浏览器。
2、如果我们要针对IE6或者IE6以上的。
那么，我们需要换一个方式，然后里面还要传一些参数。
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP')3、假如这样创建还是不成功，那我们就要换一个方式，就是修改里面的一些参数。
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')4、如果以上3种方式，还不能创建这个对象，那这个用户使用的浏览器就是过时的。
我们可以提示它，浏览器不支持ajax技术。
运行注意1) 我们创建的这个对象，首先必须运行在web服务器中的一个网页中，因为它依赖于JavaScript。
JavaScript必须在网页中执行。
2) 我们一定要注意这个网页的编码。
不然，通过这个异步获取的数据，有可能是乱码。
代码演示1. 这是一个我写好的网页代码开始的模板。
这里面我绑定了一个onclick事件，调用doAjax函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ajax初步入门教学视频-麦子学院</title></head><body><script type="text/javascript">function doAjax(the_request){}</script><input type="button" onclick="doAjax('ajax-02.txt')" /><br/><br/><div id="vv"></div></body></html>2. 填充这个函数里面的内容1) 首先，我们定义一个默认为null的变量。
04-使用XMLHttpRequest对象发送和接收数据
04-使用XMLHttpRequest对象发送和接收数据XMLHttpRequest常用方法（红色为常用的方法）：abort() 停止当前请求getAllResponseHeaders() 返回包含HTTP请求的所有响应头信息，其中响应头包括Content-Length,Date,URI等内容。
返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔getResponseHeader(String header) 返回HTTP请求的响应头中指定的键名header对应的值open(String method,String url,boolean asynch,String username,String password) 建立对服务器的调用。
其中method表示HTTP 调用方法。
一般使用“GET”，“POST”，url表示调用的服务器的地址，asynch表示是否采用异步方式，true表示异步，后两个参数可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码send(content) 向服务器发出请求，如果采用异步方式，该方法会立即返回。
Content可以不指定，其内容可以是DOM对象，输入流或是字符串。
setRequestHeader(String header,String value) 设置HTTP请求中的指定首部header的值为value。
此方法需在open方法以后调用。
onreadystatechange请求状态改变的事件触发器（readyState 变化时会调用此方法）。
通常是一个javascript函数readyState请求状态0=未初始化。
1=open方法成功调用以后。
2=服务器已经应答客户端的请求。
3=交互中。
Http头信息已经接收，响应数据尚未接收。
4=完成。
数据接收完成。
XMLHttpRequest对象五步使用法
XMLHttpRequest对象五步使用法在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。
XMLHttpRequest简介XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个DOM 文档形式返回内容。
尽管名为 XMLHttpRequest，它并不限于和XML 文档一起使用：它可以接收任何形式的文本文档。
XMLHttpRequest 对象是名为 AJAX 的Web 应用程序架构的一项关键功能。
XMLHttpRequest和JavascriptJavascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。
不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。
XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document 对象、Ado Stream对象或者unsignedbyte数组的方式组装起来，提供给Javascript处理。
XMLHttpRequest对象五步使用法
在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。
XMLHttpRequest简介XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个DOM 文档形式返回内容。
尽管名为 XMLHttpRequest，它并不限于和XML 文档一起使用：它可以接收任何形式的文本文档。
XMLHttpRequest 对象是名为 AJAX 的Web 应用程序架构的一项关键功能。
XMLHttpRequest和JavascriptJavascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。
不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。
XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsignedbyte数组的方式组装起来，提供给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。
XmlHttpRequest使用
XmlHttpRequest使⽤1. IE7以后对xmlHttpRequest 对象的创建在不同浏览器上是兼容的。
下⾯的⽅法是考虑兼容性的，实际项⽬中⼀般使⽤Jquery的ajax请求，可以不考虑兼容性问题。
function getHttpObject() {var xhr=false;if (windows.XMLHttpRequest)xhr=new XMLHttpRequest();else if (window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHttp");}return xhr;}2. XMLHttpRequest的属性及⽅法属性描述onreadystatechange每个状态改变都会触发，通常会调⽤⼀个javascript函数readyState请求的状态，5个值； 0：为初始化，1：正在加载；2：已经加载，3：交互中，4：完成responseText服务器的响应，表⽰为字符串responseXML服务器的响应，表⽰为XML，可以解析为DOM对象status服务器的HTTP状态码(200：ok,304:not modified,404:Not Found 等)statusText Http状态码的相应⽂本(ok或Not Found)⽅法描述abort()停⽌当前请求getAllResponseHeaders()把HTTP请求的所有响应⾸部作为键/值对返回getResponseHeader(“header”)返回指定键的⾸部串值open(“method”,”url”)建⽴对服务器的调⽤，Method可以是GET，POST或PUT，URL可以是相对或绝对URLsend（content）向服务器发送请求setRequestHeader(“header”,”value”)把指定⾸部设置为所提供的值。
在设置任何⾸部之前必须调⽤open()⼿写⼀个Ajax请求的例⼦：$(function(){$("#id").onclick(tunction(){var request=new XMLHttpRequest();var url="";var method="GET";request.open(method,url);request.send(null);request.onreadystatechange=function(){if (request.readyState==4&&(request.status==200 || request.status==304))alert (request.reponseText);//如果返回的是html 标签，则可以使⽤//$(“#id2”).innerHtml=request.reponseText;//如果返回的xml格式,则需要将结果通过getElementByTagName(“”)[index]解析//alert(request.reponseXML.getElementByTagName(“”)[index])}})})这⾥再插⼊⼀下window.onload 和$(function(){})（$(document).ready(function(){})）的区别：1. window.onload 必须等到页⾯内包括图⽚的所有元素加载完毕才能执⾏$(function(){}) 是DOM结构绘制完毕后就执⾏，不必等到加载完毕。
XMLHttpRequest对象属性参数参考
XMLHttpRequest对象属性参数参考readyState：提供当前 HTML 的就绪状态。
readyState可能返回的值：0：请求未初始化（还没有调⽤ open()）。
1：请求已经建⽴，但是还没有发送（还没有调⽤ send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可⽤了，但是服务器还没有完成响应的⽣成。
4：响应已完成；您可以获取并使⽤服务器的响应了。
status：返回当前请求的 HTTP 状态码，因为 XMLHTTP 返回成功了，不⼀定表⽰服务器已经正确处理我们的数据了，可能出现了 500服务器内部错误或 404找不到⽂件的错误等。
100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提⽰知道新⽂件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，⽤户代理必须复位当前已经浏览过的⽂件206——服务器已经完成了部分⽤户的GET请求300——请求的资源可在多处得到301——删除请求数据302——在其他地址发现了请求数据303——建议客户访问其他URL或访问⽅式304——客户端已经执⾏了GET，但⽂件未变化305——请求的资源必须从服务器指定的地址得到306——前⼀版本HTTP中使⽤的代码，现⾏版本中不再使⽤307——申明请求的资源临时性删除400——错误请求，如语法错误401——请求授权失败402——保留有效ChargeTo头响应403——请求不允许404——没有发现⽂件、查询或URl405——⽤户在Request-Line字段定义的⽅法不允许406——根据⽤户发送的Accept拖，请求资源不可访问407——类似401，⽤户必须⾸先在代理服务器上得到授权408——客户端没有在⽤户指定的饿时间内完成请求409——对当前资源状态，请求不能完成410——服务器上不再有此资源且⽆进⼀步的参考地址411——服务器拒绝⽤户定义的Content-Length属性请求412——⼀个或多个请求头字段在当前请求中错误413——请求的资源⼤于服务器允许的⼤⼩414——请求的资源URL长于服务器允许的长度415——请求资源不⽀持请求项⽬格式416——请求中包含Range请求头字段，在当前请求资源范围内没有range指⽰值，请求也不包含If-Range请求头字段417——服务器不满⾜请求Expect头字段指定的期望值，如果是代理服务器，可能是下⼀级服务器不能满⾜请求500——服务器产⽣内部错误501——服务器不⽀持请求的函数502——服务器暂时不可⽤，有时是为了防⽌发⽣系统过载503——服务器过载或暂停维修504——关⼝过载，服务器使⽤另⼀个关⼝或服务来响应⽤户，等待时间设定值较长505——服务器不⽀持或拒绝⽀请求头中指定的HTTP版本1xx:信息响应类，表⽰接收到请求并且继续处理2xx:处理成功响应类，表⽰动作被成功接收、理解和接受3xx:重定向响应类，为了完成指定的动作，必须接受进⼀步处理4xx:客户端错误，客户请求包含语法错误或者是不能正确执⾏5xx:服务端错误，服务器不能正确执⾏⼀个正确的请求。
第20章 使用XMLHttpRequest对象
第20章 使用XMLHttpRequest 对象XMLHttpRequest 对象是Ajax 技术的核心，其主要任务是实现客房端与服务器的异步通信，缺少XMLHttpRequest 对象Ajax 技术将无从谈起。
然而，XMLHttpRequest 对象并不是独立存在的，要通过DOM 和CSS 动态操作HTML 页面元素，来实现页面的部分刷新。
20.1 XMLHttpRequest 对象XMLHttpRequest 对象和其他一样具有一定的属性和方法，在使用这些实例属性和实例方法前要首先创建XMLHttpRequest 对象实例。
20.1.1 创建XMLHttpRequest 对象由于XMLHttpRequest 对象还不是W3C 的标准，不同浏览器中其实现方式是不同的。
在Internet Explorer 7以前版本的IE 浏览器中，XMLHttpRequest 对象是以ActiveX 组件的形式实现的，而在Firefox 、Opera 等浏览器中XMLHttpRequest 对象是作为浏览器对象来提供的。
值得庆幸的是，IE7中XMLHttpRequest 对象可以作为浏览器对象使用，从而实现XMLHttpRequest 对象创建的统一。
在较老版本的IE 中创建XMLHttpRequest 对象的基本语法格式为：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");在较新版本的IE 中创建XMLHttpRequest 对象的基本语法格式为：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");而在IE7以及其他非IE 浏览器中使用如下语法格式创建XMLHttpRequest 对象：var xmlHttp = new XMLHttpRequest();由于在不同浏览器中XMLHttpRequest 对象的创建方式不同，在实际开发过程必须考滤代码的兼容性。
XMLHttpRequest使用详解
XMLHttpRequest使⽤详解1.什么是XMLHttpRequestXMLHttpRequest是⼀个浏览器接⼝，使得Javascript可以进⾏HTTP(S)通信，这就是我们熟悉的AJAX。
早期，各个浏览器的实现都不同，HTML5之后，W3C进⾏了统⼀。
2.XMLHttpRequest使⽤⽰例<script type="text/javascript">var xhr = new XMLHttpRequest();xhr.timeout = 3000;xhr.ontimeout = function (event) {alert("请求超时！");}var formData = new FormData();formData.append('tel', '182********');formData.append('psw', '111111');xhr.open('POST', ':8000/login');xhr.send(formData);xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}else {alert(xhr.statusText);}}</script>运⾏结果：属性说明：* xhr.readyState：XMLHttpRequest对象的状态，等于4表⽰数据已经接收完毕。
* xhr.status：服务器返回的状态码，等于200表⽰⼀切正常。
* xhr.responseText：服务器返回的⽂本数据* xhr.responseXML：服务器返回的XML格式的数据* xhr.statusText：服务器返回的状态⽂本。
XMLHttpRequest对象的属性与方法
XMLHttpRequest对象的属性与⽅法XMLHttpRequest对象是Ajax的核⼼，它有很多属性和⽅法。
1，readyState属性当⼀个XMLHttpRequest对象被创⽴后，readyState属性标⽰了当前对象处于什么状态，可以通过对该属性的访问，来判读此次请求的状态然后做出相应的操作，case 0 :未初始化状态，此时，已经创建了⼀个XMLHttpRequest对象，但是还没有初始化。
Case 1:准备发送状态：此时，已经调⽤了XMLHttpRequest对象的open()⽅法，并且XMLHttpRequest对象已经准备好将⼀个请求发送到服务器。
case 2：已发送状态，此时已经通过send⽅法把⼀个请求发送到服务器，等待响应。
case 3:正在接收状态，此时已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到。
case 4:完成响应状态，此时已经完成了HttpResponse响应的接收2.responseText属性responseText属性包含客服端接收到的HTTP响应的⽂本内容，当readyState属性为0、1或2时，responseText属性包含⼀个空字符串：当readyState属性值为3时，响应中包含客服端还没完成的响应信息；当readyState属性值卫4，responseText属性才包含完整的响应信息。
3.responseXML属性只有当readyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时，该属性才会有值并且被解析成⼀个XML⽂档，否则该属性为null。
如果是回传的XML⽂档结构不良或者未完成响应回传，该属性也会为null。
responseXML属性⽤来描述被XMLHttpRequest解析后的XML⽂档的属性。
4.status属性status属性描述了HTTP状态代码，注意，仅当readyState属性值为3（正在接受中）或者4（已加载）时，才能对此属性进⾏访问。
XMLHttpRequest对象详解
XMLHttpRequest对象详解AJAX大家已经都知道了，是为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架。
而，XMLHttpRequest对象则是其中的重重之中。
这篇博客重点总结一下这个对象的使用。
当然还是按照经典的五步法来学习，以后在实践中有更多更好的想法，会拿出来分享的！首先，需要先了解这个对象的属性和方法：属性说明readyState 表示XMLHttpRequest对象的open；1：open方法成功调用，但2：send方法已经调用，尚未3：正在接受数据。
Http响应4：完成，即响应数据接受完Onreadystatechange 请求状态改变的事件触发器（的javascript函数）。
responseText 服务器响应的文本内容responseXML 服务器响应的XML内容对应Status 服务器返回的http 状态码。
“服务器内部错误”等。
statusText 服务器返回状态的文本信息。
方法说明Open(string method,string url,boolean asynch, String username,string password) 指定和服务器端交互的HTTP Method:表示http请求方法，一url：表示请求的服务器的地址asynch：表示是否采用异步方后边两个可以不指定，usern 供http认证机制需要的用户名Send(content) 向服务器发出请求，如果采用content可以指定为null表示不流或字符串。
SetRequestHeader(String header,String Value) 设置HTTP请求中的指定头部此方法需在open方法以后调用getAllResponseHeaders() 返回包含Http的所有响应头信等内容。
返回值是一个字符串，包含所开，每一组键之间用CR和getResponseHeader(String header) 返回HTTP响应头中指定的键Abort() 停止当前http请求。
XMLHttpRequest对象详解
XMLHttpRequest对象详解1、概述2、XMLHttpRequest 的方法和属性XMLHttpRequest包含了基本的属性和方法，正是通过这些方法和属性实现了对服务器的通讯。
Ajax依赖XMLHttpRequest完成与服务器的通信。
XMLHttpRequest的基本方法如下：Abort():停止发送当前请求。
getAllResponseHeaders():获取服务器返回的全部响应头。
getResponseHeader(“headerLabel”):根据响应头的名字来获取响应头。
Open(“method”,”URL”,…):建立与服务器的连接，并设置请求的方法是否使用异步请求。
如果远程服务需要用户名，密码，则提供。
Send(content):发送请求。
setRequestHeader(“label”,”values”):在发送请求之前，先设置请求头。
看代码2/getAllResponseHeadersXMLHttpRequest的属性如下：1、onreadystatechange：用于指定XMLHttpRequest对象状态改变时的事件处理函数。
当XMLHttpRequest的状态放生改变时，该函数将被触发。
XMLHttpRequest对象有如下几种状态：0 ：XMLHttpRequest对象还没有完成初始化；1 ：XMLHttpRequest对象开始发送请求；2 ：XMLHttpRequest对象的请求发送完成；3 ：XMLHttpRequest对象开始读取服务器的响应；4 ：XMLHttpRequest对象读取服务器响应结束。
2、readyState: XMLHttpRequest对象的处理状态。
3、responseText:用于获取服务器的响应文本。
4、responseXML：用于获取服务器响应的XML文档对象。
5、status：服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码。
XMLHttpRequest对象获取服务端数据
XMLHttpRequest对 象 获 取 服 务 端 数 据
我们可以使用 XMLHttpRequest对象的ResponseXML属性获取服务器端数据。需要注意的是， 文件 index.aspx 的contentType 必 须是 text/xml ，XMLHttpRequest.ResponseXML属性才能解析成XML文件流。
44 {
45 var strvalue = "";
46 strvalue = document.getElementById("InputID").value;
47 var setValue = document.getElementById("showHot");
48 setValue.innerHTML = getAjaxValue(strvalue);
html 文件
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html> 3 <head> 4 <title></title> 5 <script language="javascript" src="JScript1.js"></script> 6 </head> 7 <body> 8 <input type="text" id="InputID"> 9 <input type="button" value="OK" onclick="ChangeValue();"> <br> 10 <div id="showHot"></div> 11 </body> 12 </html> 13
XMLHttpRequest的五步使用方法
XMLHttpRequest的五步使⽤⽅法1<html>2<head>3<title>Demo</title>4<style>5 body,input,button,select,h1{6 font-size: 30px;7 line-height: 1.8;8 }9</style>10<meta charset="UTF-8">11<meta name="viewport" content="width=device-width, initial-scale=1.0">12</head>13<body>14<h1>员⼯查询</h1>15<label>请输⼊员⼯编号：</label>16<input type="text" id="keyword"/>17<button id="search">查询</button>18<p id="searchResult"></p>1920<h1>员⼯创建</h1>21<label>请输⼊员⼯姓名:</label>22<input type="text" id="staffName"/><br>2324<label>请输⼊员⼯编号:</label>25<input type="text" id="staffNumber"/><br>2627<label>请输⼊员⼯性别:</label>28<select id="staffSex">29<option>男</option>30<option>⼥</option>31</select><br>3233<label>请输⼊员⼯职位:</label>34<input type="text" id="staffJob"/>3536<button id="save">保存</button>3738<p id="creatteResult"></p>3940<script>4142var request;43//1.创建XMLHttpRequest对象44if(window.XMLHttpRequest){45//建⽴IE7,IE8,FireFox,Mozilla,Safari,Opera对象46 request=new XMLHttpRequest();47if(request.overrideMimeType){48 request.overrideMimeType("text/xml");49 }50 }else if(window.ActiveXObject){51//建⽴IE5,IE6对象52var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML.2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"]; 53for(var i=0;i<activexName.length;i++){54try{55 request=new ActiveXObject(activexName[i]);56break;57 }catch(e){}58 }59 }6061//GET请求62 document.getElementById("search").onclick=function(){63//2.获取⽂本框中⽤户输⼊的内容64var Number=document.getElementById("keyword").value;65//3.使⽤open⽅法设置和服务器端交互的基本信息66 request.open("GET","Service?number="+Number);67//4.发送数据，开始与服务器端交互68 request.send();69//5.判断和服务器端的交互是否完成,和服务器端是否返回了正确的数据70 request.onreadystatechange=function(){71if(request.readyState===4){72if(request.status===200){73//获得字符串形式的响应数据74var message=request.responseText;75//固定⽤法,向div标签中填充⽂本内容的⽅法76var div=document.getElementById("searchResult");77 div.innerHTML=message;78 }else{79 alert("发⽣错误:"+ request.status);80 }81 }82 };83 };8485//POST请求86 document.getElementById("save").onclick=function(){87 request.open("POST","Service");88var data="name"+ document.getElementById("staffName").value89 +"&number="+ document.getElementById("staffNumber").value90 +"&sex="+ document.getElementById("staffSex").value91 +"&job="+ document.getElementById("staffJob").value;92//POST⽅式交互所需要增加的代码,⽤于查询响应中的某个字段的值93 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");94 request.send(data);95 request.onreadystatechange=function(){96if(request.readyState===4){97if(request.status===200){98var message=request.responseText;99var div=document.getElementById("searchResult");100 div.innerHTML=message;101 }else{102 alert("发⽣错误:"+ request.status);103 }104 }105 };106 };107</script>108</body>109</html>。
05-使用XMLHttpRequest对象发送和接收XML数据,及乱码问题的解决
ajaxxml.html：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>用户名校验ajax实例</title><script charset="UTF-8" type="text/javascript" src="jslib/verifyxml.js"></script></head><body><!-- 基于标准的一些好习惯，首先标签名要小写，其次标签必须关闭，第三属性名必须是小写的，第四属性值必须位于双引号中 --> 用户名校验的ajax实例，请输入用户名：<br/><!-- ajax方式下不需要使用表单来进行数据提交，因此不用写表单标签 --><!-- ajax方式不需要name属性，需要一个id的属性 --><input type="text" id="userName" /><input type="button" value="校验" onclick="verify()" /><!-- 这个div用于存放服务器端返回的信息，开始为空 --><!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 --><div id="result"></div><!-- div和span的直观差异，div中的内容独占行，span中的内容和前后其他内容相处良好 --><!--<div>123</div><div>456</div><span>123</span><span>456</span>显示效果如下：123456123456--></body></html>AjaxXMLServer.java：import java.io.IOException;import java.io.PrintWriter;import .URLDecoder;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class AjaxXMLServer*/@WebServlet("/AjaxXMLServer")public class AjaxXMLServer extends HttpServlet { private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public AjaxXMLServer() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {try {//修改点1----- text/html修改为text/xml，响应的Content-Type必须是text/xmlresponse.setContentType("text/html; charset=UTF-8");//response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();Integer inte = (Integer) request.getSession().getAttribute("total");int temp = 0;if (inte == null)temp = 1;elsetemp = inte.intValue() + 1;request.getSession().setAttribute("total", temp);// 1. 取参数信息String old = request.getParameter("name");// 2. 检查参数是否有问题//修改点2-----返回的数据需要拼装成xml格式StringBuilder builder = new StringBuilder();builder.append("<message>");if (old == null || old.length() == 0) {//out.println("用户名不能为空");builder.append("用户名不能为空").append("</message>");} else {String name = URLDecoder.decode(old, "UTF-8");// 3. 校验操作if (name.equals("wangxingkui")) {// 4. 和传统应用不同之处。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第20章 使用XMLHttpRequest 对象XMLHttpRequest 对象是Ajax 技术的核心，其主要任务是实现客房端与服务器的异步通信，缺少XMLHttpRequest 对象Ajax 技术将无从谈起。
然而，XMLHttpRequest 对象并不是独立存在的，要通过DOM 和CSS 动态操作HTML 页面元素，来实现页面的部分刷新。
20.1 XMLHttpRequest 对象XMLHttpRequest 对象和其他一样具有一定的属性和方法，在使用这些实例属性和实例方法前要首先创建XMLHttpRequest 对象实例。
20.1.1 创建XMLHttpRequest 对象由于XMLHttpRequest 对象还不是W3C 的标准，不同浏览器中其实现方式是不同的。
在Internet Explorer 7以前版本的IE 浏览器中，XMLHttpRequest 对象是以ActiveX 组件的形式实现的，而在Firefox 、Opera 等浏览器中XMLHttpRequest 对象是作为浏览器对象来提供的。
值得庆幸的是，IE7中XMLHttpRequest 对象可以作为浏览器对象使用，从而实现XMLHttpRequest 对象创建的统一。
在较老版本的IE 中创建XMLHttpRequest 对象的基本语法格式为：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");在较新版本的IE 中创建XMLHttpRequest 对象的基本语法格式为：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");而在IE7以及其他非IE 浏览器中使用如下语法格式创建XMLHttpRequest 对象：var xmlHttp = new XMLHttpRequest();由于在不同浏览器中XMLHttpRequest 对象的创建方式不同，在实际开发过程必须考滤代码的兼容性。
下面的范例中列出创建XMLHttpRequest 对象的通用代码。
-------------------------------------------------------------------------------------------------------------应用范例本例列出了创建XMLHttpRequest 对象的通用代码。
程序清单1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns ="/1999/xhtml"> 3 <head> 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>创建XMLHttpRequest 对象</title> 简明教程 •2•6 </head>7 <body>8 <script language ="javascript" type ="text/javascript"> 9 var xmlHttp = false;10 if (window.XMLHttpRequest) { // 在非IE 浏览器中创建XMLHttpRequest 对象 11 xmlHttp = new XMLHttpRequest();12 } else if (window.ActiveXObject) { //通过ActiveX 创建XMLHttpRequest 13 try {14 // 尝试按新版Internet Explorer 方式创建15 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 16 } catch (error1) { // 创建请求的ActiveX 对象失败 17 try {18// 尝试按老版Internet Explorer 方式创建19 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 20 } catch (error2) {21 // 不能通过ActiveX 创建XMLHttpRequest 22 xmlHttp = false; 23 } 24}25 }26 if(xmlHttp){ 27alert("创建XMLHttpRequest 对象成功！"); 28 } 29 </script> 30 </body> 31 </html>范例解析代码第9行定义了一个变量并赋值为false 。
第10行代码判断是否存在window.XMLHttpRequest ，如果存在就将XMLHttpRequest 对象作为浏览器对象来创建，如果不存在返回null ，if 语句会将其看作false 。
第12行代码判断浏览器是否支持ActiveX 组件，在接下来的try…catch 语句中，首先在第15行尝试使用新版Internet Explorer 方式创建XMLHttpRequest 对象。
如果创建失败，在catch 语句中嵌套的try…catch 中的第18行尝试按老版Internet Explorer 方式创建XMLHttpRequest 对象。
如果也创建失败则将变量xmlHttp 设置为false 。
代码第26行首先判断xmlHttp 的值，如果不为false ，则弹出提示框提示“创建XMLHttpRequest 对象成功”。
范例结果演示范例代码在IE6和FireFox 中的执行结果分别如图20-1和图20-2中所示。
图20-1 IE6中执行结果图 20-2 Firefox 执行结果•3•光盘路径代码位于光盘中的位置是/code/chap20/20-1.html。
20.1.2 XMLHttpRequest对象的属性和方法XMLHttpRequest对象和其他对象一样具有属性和方法，但和其他对象不同的是这些属性和方法之间的联系非常紧密，其使用不是独立的。
表20-1和20-2分别列出了XMLHttpRequest对象的属性和方法，本章后续部分会对这些属性和方法做详细的介绍。
表20-1 XMLHttpRequest对象的属性属性名称说明onreadystatechange指定当readyState属性改变时的回调函数。
readyState 返回当前请求的状态。
responseBody 返回以数组形式表示的响应信息正文（仅限IE浏览器）。
responseStream 以Ado Stream对象的形式返回响应信息（仅限IE浏览器）。
responseXML 返回XML Document对象形式表示的响应信息。
status 返回当前请求的HTTP状态码。
statusText 返回当前请求的HTTP状态信息。
表20-2 XMLHttpRequest对象的方法方法名称说明abort 取消当前请求。
getAllResponseHeaders获取响应的所有HTTP头。
getResponseHeader 从响应信息中获取指定的HTTP头。
open 创建一个新的HTTP请求，并指定此请求的方法、URL等信息。
send 发送请求到HTTP服务器并接收回应。
setRequestHeader 指定请求的某个HTTP头。
20.2 使用XMLHttpRequest对象发送请求20.2.1 打开请求使用XMLHttpRequest对象发送请求的第一步是使用open方法打开一个新的HTTP 请求，并指定此请求的方法、URL等。
open方法的基本请求格式为：xmlHttp.open(method, url, [async], [user], [password]);其中，xmlHttp为一个XMLHttpRequest对象实例，open方法各个参数说明如下：●method：字符串类型数据，表示http请求方法的类型，例如：POST、GET、PUT，不区分大小写。
简明教程•4•●url：字符串类型数据，表示请求的URL地址，可以为绝对地址也可以为相对地址。
●async：参数可选，布尔类型数据，指定此请求是否为异步方式，默认为true。
如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
●user：参数可选，字符串类型数据，如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
●password：参数可选，字符串类型数据，指定验证信息中的密码，如果用户名为空，则此值将被忽略。
下面是一个使用open方法的示例：xmlHttp.open("post","getMsg.jsp?msgid=256&msgtype=3");上面的代码xmlHttp表示已经创建的XMLHttpRequest对象实例，使用open方法打开一个请求，请求使用post方法。
请求的URL地址为“getMsg.jsp?msgid=256&msgtype=3”，在此地址中有两个参数msgid和msgtype。
20.2.2 发送请求使用open方法打开请求之后，就可以发送请求了。
发送请求的方法比较简单，使用send方法。
send方法的基本语法格式为：xmlHttp.send(body);send方法只有一个参数boyd，就是要发送的内容。
body内容以是键－值对的形式表示的，各个键－值对之间使用&分隔，类似于URL地址中查询字符串的部分，例如，"name=smartdong&sex=male"，表示向服务器发送name的值为smartdong以及sex的值为male。
send方法的同步或异步方式取决于open方法中的async参数，如果async为false，此方法将会等待请求完成或者超时时才会返回。
如果open方法的async参数为true，此方法将立即返回。
如果使用POST方法发送请求，那么在使用sned方法发送请求之前必须使用XMLHttpRequest对象的setRequestHeader方法按照如下方式设置HTTP头信息。