html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/ajax_post_ask.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(ev) {
var but = document.querySelector("button");
but.onclick = function(ev1) {
ajax("POST", "php/post_ask.php", {
"userName" : "yxy",
"passWord" : "123123123"
}, 3000, function(xmlhttp){
//发送请求成功
console.log(xmlhttp.responseText);
}, function(xmlhttp){
//发送请求失败
alert("请求失败");
console.log("请求失败");
});
}
}
</script>
</head>
<body>
<button type="button">发送请求</button>
</body>
</html>
//定义obj2str方法
function obj2str(obj){
//将对象转换成字符串的方法
var str = [];
//定义t作为obj对象的一个固定属性
obj.t = new Date().getTime();
//遍历obj中的属性
for(var key in obj){
//通过数组的push方法将obj中key和value的值添加进入str数组
str.push(decodeURIComponent(key) + "=" + decodeURIComponent(obj[key]));//decodeURIComponent方法将中文字符串转为字符,提高IE的兼容性
}
//通过join将for循环中遍历的到的每一个字符串通过&分隔开
return str.join("&");
}
function ajax(type, url, obj, timeout, success, error) {
//将传入的对象转换成字符串
var str = obj2str(obj);
//创建一个异步对象和时间长度
var xmlhttp, timer;
//判断是否存在XMLHttpRequest方法
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
//不存在XMLHttpRequest方法则使用ActiveXObject方法
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if(type == "GET"){
// 2.设置请求方式和请求地址
xmlhttp.open(type, url + "?" + str, true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
}
else{
// 2.设置请求方式和请求地址
xmlhttp.open(type, url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//基本格式
// 3.发送请求
xmlhttp.send(str);//post请求中send方法中需要传参
}
xmlhttp.onreadystatechange = function(ev2) {
if (xmlhttp.readyState === 4) {
clearInterval(timer);
//判断是否请求成功
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
// console.log("发送请求数据成功");
// console.log(xmlhttp.responseText);
success(xmlhttp);
} else {
// console.log("发送请求数据失败");
error(xmlhttp);
}
}
}
//判断有无超时时间传入
if(timeout){
timer = setInterval(function(){
alert("请求超时");
//超时后异步对象停止进行后面的过程
xmlhttp.abort();
//停止定时器
clearInterval(timer);
}, timeout);//timeout是定时器响应时间
}
}