Ajax_13｜封装
Posted 接引之书
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax_13｜封装相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="Utf-8" />
<title>ajax封装</title>
<script type="text/javascript">
/*
如果想改成动态,那么参数就全部要改,最好办法是直接定义成对象
*/
window.onload = function(){
ajax({
url:'http://localhost:8081/ajax/test.json',
method:'get',
data:"name=clyun",
success:function(data){
console.log(data);
}
});
function ajax(args){
var defaulArg = { //设置默认值,如果外部不定义就用这里面定义的
method:'get', //请求方法
asyns:true, //是否异步
beforeSend:function(){
},
success:function(data){
console.log(typeof data);
},
error:function(status){
console.log(status);
}
}
//如果外边定义有值,就覆盖这默认值,(用深拷贝方法)
for(var key in args){
defaulArg[key] = args[key]; //因为这里没有纯对象的内容,就没有用递归方法
}
var xhr = new XMLHttpRequest();
xhr.open(defaulArg.method,defaulArg.url,defaulArg.asyns);
defaulArg.beforeSend(xhr);
//判断是什么请求
//如果传过来的是空 && 或者等于post,就用默认值
if(defaulArg.data && defaulArg.method.toUpperCase() === 'POST'){ //toUpperCase() :转成大写
xhr.send(defaulArg.data);
}else{
xhr.send();
}
xhr.onload = function(){
defaulArg.success(xhr.response);
}
xhr.onerror = function(){
defaulArg.error(xhr.status);
}
}
}
</script>
</head>
<body>
</body>
</html>
浏览器:
目录大纲
以上是关于Ajax_13｜封装的主要内容，如果未能解决你的问题，请参考以下文章
PCL异常处理：pcl 1.8.13rdpartyoostincludeoost-1_64oost ypeofmsvc ypeof_impl.hpp(125): error(代码片段
VSCode自定义代码片段14——Vue的axios网络请求封装
VSCode自定义代码片段14——Vue的axios网络请求封装