您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

如何封装一个Ajax函数

51自学网 2022-02-21 10:50:50
  ajax

如何封装Ajax函数

一个Ajax函数:

// 一个Ajax函数var xhr = null;if(window.XMLHttpRequest){   xhr = new XMLHttpRequest;}else{   xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("GET","https://jsonplaceholder.typicode.com/users");xhr.send(null);xhr.onreadystatechange = function(){   if(this.readyState === 4){        console.log(xhr.responseText)    }}

封装自己的 Ajax 函数

参数1:{string} 请求方法--method
参数2:{string} 请求地址--url
参数3:{object} 请求参数--params
参数4:{function} 请求完成后,执行的回调函数--done

 function ajax(method,url,params,done){//  统一将method方法中的字母转成大写,后面判断GET方法时 就简单点  method = method.toUpperCase();   //IE6的兼容  var xhr = window.XMLHttpRequest   ? new XMLHttpRequest()   : new ActiveXObject("Microsoft.XMLHTTP");  //创建打开一个连接 open               //将对象格式的参数转为urlencoded模式  //新建一个数组,使用for循环,将对象格式的参数,  //以(id = 1)的形式,每一个键值对用 & 符号连接 var pairs = []; for(var k in params){     pairs.push(k + "=" + params[k]);  }  var str = pairs.join("&");         //判断是否是get方法 , get方法的话,需要更改url的值 if(method == "GET"){       url += "?" + str;  }             //创建打开一个连接 xhr.open(method,url);var data = null;if(method == "POST"){    //post方法 还需要设置请求头、请求体    xhr.setRequestHeader("Content-Type",    "application/x-www-form-urlencoded");    data = str;                 }xhr.send(data); //执行回调函数xhr.onreadystatechange = function(){   if(this.readyState == 4) {       done(JSON.parse(this.responseText));   }return;   // 执行外部传进来的回调函数即可   // 需要用到响应体   }}  //调用函数//get方法//  ajax("GET","http://localhost:3000/users",//     {"id":1},//     function(data){//         console.log(data);//  });//post方法     ajax("POST", "http://localhost:3000/users", { "name": "lucky","class":2,"age":20 }, function (data) {     console.log(data);});

以上就是如何封装一个Ajax函数的详细内容,更多关于封装Ajax函数的资料请关注51zixue.net其它相关文章!


下载地址:
laravel ajax curd 搜索登录判断功能的实现
Ajax常用封装库
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。