如何封装一个Ajax函数
2021/5/4 10:55:45
本文主要是介绍如何封装一个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函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程