XMLHttpRequest对象是Ajax技术最核心内容,所有现代浏览器均支持XMLHttpRequest对象,XMLHttpRequest用于在后台与服务器交换数据,这意味着可以再不重新加载整个网页的情况下,对网页的某部分进行更新。下面分析XMLHttpRequest对象的基本知识。
1、创建XMLHttpRequest对象
在不同的浏览器中创建XMLHttpRequest对象的方法不同,其中,IE创建XMLHttpRequest对象的方法如下所示:
//使用较新版本的IE创建IE兼容的对象(Msxml2.XMLHTTP) var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); //使用较老版本的IE创建IE兼容的对象(Microsoft.XMLHTTP) var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
而在Mozilla、Opera、Safari和大部分非IE浏览器中,都使用如下方法创建XMLHttpRequest对象。
var xmlhttp = new XMLHttpRequest();
创建XMLHttpRequest对象时,如果在不同的浏览器中使用了不正确的创建方法,则浏览器将会报错,并且无法使用该对象,由此可见,很需要一种可以兼容不同浏览器的创建XMLHttpRequest对象的方法。例如,下面就是一个通用的解决方法:
var xmlhttp = false;//使用false作为判断条件,表示还没有创建XMLHttpRequest对象。 function createXMLHttp(){ try{ //尝试创建XMLHttpRequest对象,除IE外的浏览器都支持这个方法 xmlhttp = new XMLHttpRequest(); } catch(e){ try{ //使用较新版本的IE创建IE兼容的对象(Msxml2.XMLHTTP) xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ //使用较老版本的IE创建IE兼容的对象(Microsoft.XMLHttp) xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(failed){ //如果失败则保证request的值仍然为false xmlhttp = false; } } } return xmlhttp; }
此时可以使用如下代码判断创建XMLHttpRequest对象是否成功。
if(!xmlhttp){ //创建XMLHttpRequest对象失败 }else{ //创建成功 }
创建XMLHttpRequest对象完毕后,开始详细分析此对象的方法、属性以及最重要的onreadystatechange事件句柄。
2、XMLHttpRequest对象的方法
XMLHttpRequest对象中的方法如下所示:
1)、open(method,url,async):规定请求的类型、URL以及是否异步处理请求,参数的具体说明如下:
method : 请求的类型,有get或post两种。
url : 文件在服务器上的位置。
async :true(异步)或 false (同步)。
方法open() 中的参数url是服务器上文件的地址,例如下面代码:
xmlhttp.open("GET","ajax_test.jsp,true");
该文件可以使任何类型的文件,例如.xml和 .txt ,或者服务器脚本文件,例如 .asp和.jsp。
其实Ajax提及的异步是指javaScript和XML。XMLHttpRequest对象如果要用于Ajax,其方法open() 的async参数必须设置为true。
通过Ajax技术,JavaScript无需等待服务器响应,而是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理。
当使用参数async设置true时,Ajax规定在响应处于onreadystatechange事件中的就绪状态时执行的函数,例如下面的代码:
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDIv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","text1.txt",true); xmlhttp.send();
当将参数async设置为false时,请不要编写函数onreadystatechange(),把代码放到函数send()语句的后面即可。
xmlhttp.open("GET","text1.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
2)、取消当前响应,关闭连接并且结束任何未决的网络活动,其语法为:
abort()
3)、getAllResponseHeaders();把HTTP响应头部作为未解析的字符串返回,用于以字符串形式返回完整的HTTP头信息,其中,包括Server、Date、Content-Type和Content-Length。语法格式:
getAllResponseHeaders()
4)、setRequestHeader(header,value):返回指定的HTTP、响应头部的值。
header:规定头的名称
value:规定头的值
5)、send(String):发送HTTP请求,使用传递给open()方法的参数,以及传递给该方法的可选请求体。此方法用于向服务器发送请求,如果请求声明为异步,该方法立即返回,否则将等到接收到响应为止。
参数String用于指定发送的数据,可以是DOM对象的实例,输入流或字符串,如果没有参数传递可以设置为null。
6)、setRequestHeader():向一个打开但未发送的请求设置或添加一个HTTP请求,语法格式如下:
setRequestHeader("header",“value”)
header:用于指定HTTP头
value:用于指定的HTTP头设置值
注意:setRequestHeader()方法必须在调用open()方法之后才能调用
7)、getRequestHeader():用于字符串形式返回指定的HTTP头信息,语法格式如下:
getRequestHeader(“headerLabel”)
headerLabel用于指定HTTP头,包括Server、Content-Type和Date等。
3、XMLHttpRequest属性
XMLHttpRequest对象中的属性如下所示:
1)、readyState:HTTP请求的状态,属性值从0-4,具体说明如下:
0:请求为初始化
1:服务器连接以建立
2:请求以接收
3:请求处理中
4:请求以完成,且响应以就绪
2)、responseText:到目前为止服务器的接收到的响应体(不包括头部)
,如果还没有接收到数据,就是控制字符串。如果来自服务器的响应并非XML,建议使用responseText属性,因为responseText属性返回字符串形式的响应,所以可以用如下代码使用responseText属性。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText
3)、responseXML:对请求的响应,解析为XML并作为Document对象返回。如果来自服务器的响应是XML,而且需要作为XML对象进行解析,此时,需要使用responseXML属性。
4)、status:有服务器返回的HTTP状态代码。
5)、statusText:这个属性用名称而不是数字指定了请求的HTTP的状态代码。
4、XMLHttpRequest对象的时间句柄函数
当请求被发送到服务器时,需要执行一些基于响应的任务。事件onreadystatechange是每次readyState属性改变时调用的事件句柄函数。在属性readyState中保存了XMLHttpRequest的状态信息。
在onreadystatechange事件中规定,当服务器响应以做好被处理的准备时,所执行的任务。当readyState等于4或者200时,标示 响应已经就绪,代码如下:
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
如果在网站上存在多个Ajax任务,那么应该为创建的XMLHttpRequest对象编写一个标准的函数,并为每个Ajax任务调用函数callback(),函数callback()应该调用包含URL以及发生onreadystatechange事件时执行的任务,例如代码如下:
function myFunction(){ loadXMlDoc("ajax_info.txt",function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200a){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
在指定所触发的事件处理器时,所调用的javaScript函数不能添加小括号及指定参数名,不过这里可以使用匿名函数,例如,要调用带参数的函数getResult(),可以使用下面的代码。
http_request.onreadystatechange=function(){ getResult("添加的参数"); //调用带参数的函数 } //通过匿名函数指定要带参数的函数
简单的学习笔记,希望博友提成宝贵的意见和建议,非常感谢!