ajax post 调用,AJAX的POST请求

但凡我们要发送一个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);

}