ajax并非是一门新的技术,而是现有技术的一种新的组合用法,即是结合异步javascript和XML,它是一种创建快速动态网页的技术。其中,异步javascript是相对于同步而言的,同步模式通常称为阻塞模式,即它会停止浏览器的后续解析,可想而知异步就是在浏览器下载js的同时,继续执行后续页面处理。接下来开始了解一下ajax的原理。
上述例子中 a sync的选项如果为false,即选择的是同步方式。那么整个的请求与响应以及显示的过程如下:
但是上述选项为true,即选择的是异步方式,则整个请求响应过程如下所示:
XMLHttpRequest
XMLHttpRequest对象是用于在后台和数据库之间交换数据的,它能够在不重新加载页面的情况下更新页面,页面已经加载之后能够请求和接收服务器的数据,还能够在后台向服务器发送数据。并且它被所有现在浏览器所支持。
创建
XMLHttpRequest的方式也很简单,现在浏览器中:
xmlhttp = new XMLHttpRequest();
在老版本的浏览器中(IE6/IE5):
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
为了让代码兼容所有的浏览器(包括IE6、IE5),将代码修改如下:
var xmlhttp;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6/IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器端发送请求
发送请求一共有两个方法:open()和send();
open()方法一共有三个参数,格式如下
:
xmlhttp.open(method,url,async);
参数的含义:
method:发送数据的方式,一共有两种,get 和 post.get速度快,大多数情况之下都选用get,但可传数据有限并且会显示在url之中,安全性能方面不是很好;post相较get方法速度稍慢,但安全性高,且可传的数据量大得多;
url:发送的目标,即文件在服务器上的位置。该文件可以为任意类型,.txt/.xml或者脚本.php等等;
async:true(异步)/false(同步)。
send()方法只有一个参数,且为可选,有参数的情况下必为post的请求方式。
xmlhttp.send(string);
这里举一个简单的例子:
xmlhttp.open("GET","demo_get.php?name=admin&name=123",true);
xmlhttp.send();
服务器响应
上一步向服务器发送请求,那么接下来无疑就是服务器的响应了。
服务器响应需要通过
XMLHttpRequest的responseText()或responseXML()来获取。它们都能获取响应数据,只是返回的数据格式不同。
responseText()返回的是文本格式的数据,
responseXML()返回的是xml格式的数据。如果需要将返回的数据显示到页面上,分别需要如下操作:
responseText():
document.getElementById('dataShow').innerHTML=xmlhttp.responseText();
responseXML():
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("data");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("dataShow").innerHTML=txt;
上述例子中 a sync的选项如果为false,即选择的是同步方式。那么整个的请求与响应以及显示的过程如下:
xmlhttp.open("GET","demo_get.php?name=admin&name=123",true);
xmlhttp.send()
document.getElementById("dataShow").innerHTML=xmlhttp.responseText;
但是上述选项为true,即选择的是异步方式,则整个请求响应过程如下所示:
xmlhttp.open("GET","demo_get2.php?name=bob&name=456",true);
xmlhttp.send()
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("dataShow").innerHTML=xmlhttp.responseText;
}
}
客户端发送了一个请求之后,并不知道服务器端什么时候完成这个请求,所以需要有一个能够捕获该请求的状态,上述代码中
的onreadystatechange事件就是能够完成这个功能的一个事件。onreadystatechange事件可以根据readystate的状态来指定一个回调函数,使之在不同的状态有不同的处理。
readystate一共有5中取值:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
在判断条件
(
xmlhttp.readyState
==
4
&&
xmlhttp.status
==
200)
中除了readystate之外还有status状态的查询,status又表示什么含义呢?
status常见的状态码:
HTTP: Status 200 – 服务器成功返回网页,
服务器已成功处理了请求.通常,这表示服务器提供了请求的网页。
HTTP: Status 404 – 请求的网页不存在
HTTP: Status 503 – 服务不可用
因此,上述的判断条件是当客户端请求完成且服务器端
成功处理了请求并
成功返回网页,在这些条件下,将返回的数据显示到页面。