1.什么是Ajax
Ajax是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。
2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 )
AJAX 的要点是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的,IE浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
例如:
var xhr=null;
if (window.XMLHttpRequest)
{// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
} else{// 兼容 IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
3.操作XMLHttpRequest 对象
(1)设置请求参数(请求方式,请求页面的相对路径,是否异步)
xhr.open(method,url,async);
send(string);//post请求时才使用字符串参数,否则不用带参数。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
注意:post请求一定要设置请求头的格式内容,get请求的参数拼接在url后面
(2)设置回调函数,一个处理服务器响应的函数,使用 onreadystatechange ,类似函数指针,如
xhr.onreadystatechange=function()
{
// 相应的执行代码
}
(3)获取异步对象的readyState 属性
该属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
readyState 属性可能的值:
0:未初始化 – 尚未调用.open()方法;
1:启动 – 已经调用.open()方法,但尚未调用.send()方法;
2:发送 – 已经调用.send()方法,但尚未接收到响应;
3:接收 – 已经接收到部分响应数据;
4:完成 – 已经接收到全部响应数据,而且已经可以在客户端使用了;
在调用时,我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
// 从服务器的response获得数据
}
}
(4)判断响应报文的状态,若为200说明服务器正常运行并返回响应数据,
(5)读取响应数据,可以通过 responseText 属性来取回由服务器返回的数据。
xhr.onreadystatechange=function()
{
if(xhr.readyState==4){
if(xhr.status==200){
document.myForm.time.value=xmlHttp.responseText;
}
}
}
整体示例如下:
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
function ajaxFunction()
{
var xhr=null; //定义XMLHttpRequest对象
if (window.XMLHttpRequest)
{// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
} else{// 兼容 IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","****.ashx",true)//设置请求方法,请求的目标页面,以及是否异步
xhr.setRequestHeader("If-Modified-Since","0");
xhr.onreadystatechange=function(){ //定义XMLHttpRequest对象的onreadystatechange属性
if(xhr.readyState==4) { //判断XMLHttpRequest对象的状态
if(xhr.status==200){
document.myForm.time.value=xhr.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据
}
}
}
xhr.send(null);//发送异步请求
}