锁定源头,自己封装Ajax
我们在使用JQuery的$.ajax封装的时候存在一个问题,就是在success下面无法实现对网络状态的多重不确定性的HTTP状态控制
下面我们自己来干一个:
注意!如果你使用 class ES6 module语法请将class置顶
XMLHttpRequest
/*@@@ **………………………………………………………………………………………………………………………………………
@@@ ** …………………………… My Ajax ………………………………
@@@ **………………………………………………………………………………………………………………………………………
*/
<script>
if($){$.ajax = ajax}else{window.$ = function(){};$.ajax = ajax;}
</script>
function ajax(obj){
var xhr = new XMLHttpRequest();
xhr.open(obj.type, obj.url, true);
if(obj.dataType)xhr.responseType=obj.dataType;
if(obj.type!='GET'){
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(obj.data)
}else{
xhr.send(null);
}
xhr.onreadystatechange = function(res){
var response = xhr.response;
if(xhr.readyState===4 && xhr.status===200){
if(obj.dataType==='json'){
if(typeof xhr.response === 'string'){
response = JSON.parse(response);
}
}
obj.success(response);
}else if(xhr.status!=200){
obj.fail(xhr.status);
}
}
}
调用:
$.ajax({
url: 'http://dome.php',
type: 'GET',
success: function(res) {
console.log(res)
},
fail: function(httpStatus) {
switch(httpStatus) {
case 500: // doit
break;
}
}
})