但凡我们要发送一个AJAX请求，都需要做5步操作：
AJAX五部曲
- 创建一个异步对象xmlhttp；
new XMLHttpRequest();
new ActiveXObject("Microsoft.XMLHTTP");
- 设置请求方式和请求地址；
xmlhttp.open("POST","01-ajax-get.php",true);
- 发送请求；
xmlhttp.send();
监听状态的变化；
通过onreadystatechange 事件来监听发送的状态变化，readyState状态为4时，请求结束。处理返回的结果；
通过status来判断请求是否是成功,处理返回的结果
特别注意的是：如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
所以完善一下之前封装好的ajax代码：
即添加一个请求的类型参数type
function ajax(type,url,obj,timeout,success,error){
// 0.将对象转换成字符串
var str = objToString(obj);
// 1.创建一个异步对象xmlhttp；
var xmlhttp,timer;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
} else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址；
// 判断请求的类型是POST还是GET
if (type === 'GET') {
xmlhttp.open(type,url+"?t=" +str,true);
// 3.发送请求；
xmlhttp.send();
}else{
xmlhttp.open(type,url,true);
// 注意：在post请求中，必须在open和send之间添加HTTP请求头：setRequestHeader(header,value);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.发送请求；
xmlhttp.send(str);
}
// 4.监听状态的变化；
xmlhttp.onreadystatechange = function(){
clearInterval(timer);
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
// 5.处理返回的结果；
success(xmlhttp);//成功后回调；
}else{
error(xmlhttp);//失败后回调；
}
}
}
}
//处理obj
function objToString(obj){
obj.t = new Date().getTime();
var res =[];
for(var key in obj){
//需要将key和value转成非中文的形式，因为url不能有中文。使用encodeURIComponent();
res.push(encodeURIConponent(key) + " = " +encodeURIConponent(obj.[key]));
}
return res.join("&");
}
//判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function(){
xmlhttp.abort();//中断请求
clearInterval(timer);
},timeout);
}
