一、发送请求
Ajax中通过XMLHttpRequest对象发送异步方式的后台请求时。通常有两种方式的请求,一种是GET请求,另一种是POST请求。发送请求一般要经过4个步骤分别是:
(1)初始化XMLHttpRequest对象
(2)为XMLHt指定一个返回结果的回调函数,用于返回结果的处理
(3)创建一个与服务器的连接。指定发送的请求是GET还是POST且是否采用异步方式发送请求
(4)向服务器发送请求。
<script type="text/javascript"> function checkBrowerType(){
//第一步:初始化XMLHttpRequest对象
var http_request = false;
if(window.XMLHttpRequest){ //非IE浏览器; 在调用window.ActiveXObject将返回一个对象,或是null(如果返回一个对象则为true,返回null则为false)
http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象 }else if(window.ActiveXObject){
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
}catch(e){ }
}
}
if(!http_request){
alert("不能创建XMLHttpRequest对象实例");
return false;
}
//第二步:设置回调函数
http_request.onreadystatechange = getResult; //调用返回处理函数
/*
注意:如果XMLHttpRequest对象的onreadystatechange属性指定回调函数时,
不能指定要传递的参数。如果要指定参数可以使用以下方法:
http_request.onreadystatechange = function(){
getResult(param)
};
*/ //第三步:创建一个与服务器的连接,(请求采用GET或POST请求方式,以及是否采用异步方式)
http_request.open("GET",url,true);
//第四步:向服务器发送请求
http_request.send(null);
}
/*编写回调函数getResult()*/
function getResult(){ }
</script>
查看代码
小技巧:在建立与服务器的连接时,指定open(“method”,“url” ,async)中的url参数时,最好将一个时间戳追加到该url参数后面,这样可以防止因浏览器缓存结果而不能实时得到最新的结果。例如:可以这样指定url参数:String url="deal.jsp?nocache="+new Date().getTime();
二、处理服务器的响应
在处理服务器响应时需要通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数,用来处理服务器响应。在这个回调函数中,首先需要判断服务器的请求状态,保证请求已经完成;然后根据服务器的HTTP状态码,判断服务器对请求响应是否成功,如果成功,则获取服务器的响应反馈给客户。
XMLHttpRequest中提供了两种访问服务器响应的属性:一个是responseText属性,返回字符串响应;另一个是responseXML属性,返回XML响应。
(1)处理字符串响应
例如:
function getResult(){
if(http_request.readyState == 4){ //判断请求状态
if(http_request.status == 200){ //请求成功,开始处理返回结果
alert(http_request.responseText); //显示判断结果
}else{
alert("请求的页面有错误!");
}
}
}
(2)处理XML响应
如果在服务器端需要生成特别负责的响应,则就要应用XML响应。
例:保存图书信息到XML文档中,并且使用回调函数将XML中的信息读取出来。
①XML中的图书信息,代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<mr>
<books>
<book>
<title>Java Web程序开发</title>
<publisher>人民邮电出版社</publisher>
</book>
<book>
<title>Java从入门到精通</title>
<publisher>人民邮电出版社</publisher>
</book>
</books>
</mr>
②在回调函数中遍历保存图书信息的XML文档,并将其显示到页面中,代码如下:
<script type="text/javascript">
function getResult(){
//判断请求状态
if(http_request.readyState == 4){
//请求成功,开始处理响应
if(http_request.status == 200){
var xmldoc = http_request.responseXML;
var str = "";
for(int i=0;i<xmldoc.getElementsByTagName("book").length;i++){
var book = xmldoc.getElementsByTagName("book").item(i);
str = str + "《"+book.getElementsByTagName("title")[0].firstChild.data + "》 由“"
+book.getElementByTagName("publisher")[0].firstChild.data + "” 出版<br>";
}
document.getElementById("book").innerHTML = str; //显示图书信息
}else{
alert("请求的页面有错误!");
} }
}
</script>
<div id="book"></div>