封装一个Ajax函数怎么做，怎样实现封装自己的Ajax函数
导读：在这篇文章中，我们将学习“封装一个Ajax函数怎么做，怎样实现封装自己的Ajax函数”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。 目录 如何封...
在这篇文章中，我们将学习“封装一个Ajax函数怎么做，怎样实现封装自己的Ajax函数”的相关知识，下文有详细的介绍及示例，小编觉得挺不错的，有需要的朋友可以借鉴参考，希望对大家阅读完这篇能有所获。目录
- 如何封装Ajax函数
- 封装自己的 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函数”的内容了，通过以上内容的阐述，相信大家对封装一个Ajax函数怎么做，怎样实现封装自己的Ajax函数已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 封装一个Ajax函数怎么做，怎样实现封装自己的Ajax函数
本文地址： https://pptw.com/jishu/653927.html