//封装适合各种情况的简化版ajax函数
//利用解构,获取将来参数对象中每个属性值
//请求类型: "get"||"post"
//请求的url地址: "xxx.php"
//请求携带的参数: "变量1=值&..."
//服务器端返回值类型: "json"||"text"
/*function ajax({type,url,data,dataType}){*/
function ajax(obj){
//服务器端返回值类型默认为text
dataType=obj.dataType||"text";
//只要远程请求,必有延迟,只要延迟,比用promise等待完成后,才执行后续操作
return new Promise(function(resolve){//.then()
//AJAX 4步/5步:
if(XMLHttpRequest){
var xhr=new XMLHttpRequest();//1.获得xhr对象
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//如果是get请求,且传入了data参数,才需要拼接url和data为get请求的完整地址
if(obj.type.toLowerCase()=="get"&&obj.data!==undefined)
obj.url+="?"+obj.data;
xhr.open(obj.type,obj.url,true);//2. 建立连接
//3. 设置请求状态回调函数
xhr.onreadystatechange=function(){
//如果请求完成,且成功!
if(xhr.readyState==4&&xhr.status==200){
//如果服务器端响应类型不是json,则调用后续resolve操作,并传入原始responseText,做后续处理
if(obj.dataType.toLowerCase()!="json")
resolve(xhr.responseText);
else//如果服务器端响应类型是json,则自动调用JSON.parse转为js对象,再交给resolve函数做后续处理
resolve(JSON.parse(xhr.responseText));
}
}
//只有type为post,才需要设置请求头
if(obj.type.toLowerCase()=="post")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//只有type为post,才需要send时,传入参数
xhr.send(obj.type.toLowerCase()=="post"?obj.data:null);
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
<script src="js/polyfill.min.js"></script>
<script src="js/ajax.js"></script>
<script type="text/javascript">
ajax({
type:'get',
url:'http://localhost/test/test.php',
dataType:'json',
}).then(function(data){
console.log(data);
alert(data.ok);
})
</script>
</body>
</html>
尝试了下IE,IE9以及以上都可以用。不过需要先引入polyfill.min.js。
polyfill.min.js下载地址:http://www.bootcdn.cn/babel-polyfill/
打开某个链接,直接复制粘贴代码即可。