当前位置：文档之家 › 第20章 使用XMLHttpRequest对象

第20章 使用XMLHttpRequest对象

  • 格式：pdf
  • 大小：595.64 KB
  • 文档页数：22

第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头信息。

合集下载

使用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 对象概述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 对象的方法

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对象创建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的变量。