一步一步理解Ajax(一)
Ajax是Asynchronous Javascript And XML的缩写。
作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。
1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest()
对于IE早期版本(IE7及以下版本)使用,new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP")等方式创建对象
2、XMLHttpRequest对象常用属性和常用方法
属性
readystate 返回XMLHTTP请求的当前状态码
state 返回当前请求的HTTP状态码
statusText 返回HTTP状态码对应的文本
方法
onreadystatechange 监听readystate和state状态
open 建立连接请求
send 发送连接请求
readystate状态码
0(未初始化) 对象已建立,但尚未初始化
1(初始化) 对象已建立,尚未调用send方法
2(发送数据) send方法已调用,但是当前的状态码及http头未知
3(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
4(完成) 数据接收完毕,此时可以通过responseBody和responseText获取完整的回应数据
state常用状态码
200 OK 服务器成功返回网页
404 Not Found 客户端所有请求的页面不存在
503 Service Unavailable 服务器响应超时
open(method,URL,flag,name,password)方法有五个参数
method参数用于指定使用什么方式向服务器发送HTTP请求,参数可以为get、post、head、put和delete五种
url指定服务器的URL
flag参数用于指定提交HTTP请求方方式,true为异步(默认),false为同步
name提交用户名,可选
password提交密码,可选
// 创建XMLHttpRequest对象
function createXHR(){
return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}
function Ajax(){
var xhr=new createXHR();
xhr.onreadystatechange=function(){
if(4==xhr.readystate&&200==state){
/* 成功 */
}
else{
/* 异常 */
}
}
xhr.open("get",url,true);
xhr.send();
}