在刚学习ajax的时候,我封装了一个ajax函数
/**
* method:请求方式 GET或POST方式
* url:请求的地址
* data:传输的数据
* callback:回调函数的名称
* flag:选择是异步传输还是同步传输
* true为异步,flag为同步,缺省情况下默认为异步传输
*/
function ajax(method, url, data, callback, flag) {
var xhr = null;
//做一个ie浏览器的兼容
if (window.XMLHttpRequest) {//非ie
xhr = new XMLHttpRequest();
} else { //ie浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
method = method.toUpperCase();//将请求方式转换成大写,防止书写不一致
/*
GET和POST请求方式不同,代码不同。因为Post请求时把数据放在请求头中,
所以要设置请求头的信息。而GET方式只需要放在url中通过 ?和 & 符号叠加即可
*/
if (method == "GET") {
var date = new Date(),
timer = date.getTime();
xhr.open(method, url + "?" + data+'&timer='+timer, flag);
xhr.send();
} else if (method == "POST") {
xhr.open(method, url, flag);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
//通过状态改变的事件触发器来获取返回的数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
callback(xhr.responseText);
}else{
console.log("error")
}
}
}
}
解释:
-
onreadystatechange 状态改变的事件触发器。
触发器中有5个状态 readyState:
0 : 未初始化,未调用send()方法
1 : 读取中,已调用send(),正在发送请求
2 : 已读取,send方法执行完成,接收到全部响应内容
3 : 交互中,正在解析响应内容
4 : 完成,响应内容解析完成(通常只用第四个) -
status:返回的状态码 200 成功 404 文件未找到 500服务器内部错误
-
responseText:获得字符串形式的数据 通常用
JSON.parse()
来处理