如何封装一个Ajax函数

 更新时间:2021年05月06日 16:50:53   作者:小白可别不举铁  
这篇文章主要介绍了如何封装一个Ajax函数,帮助大家更好的理解和学习网络编程,感兴趣的朋友可以了解下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

如何封装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函数的资料请关注程序员之家其它相关文章!

相关文章

  • 经典的20道AJAX面试题(必知必会)

    经典的20道AJAX面试题(必知必会)

    本文给大家介绍20道jquery ajax面试题,在前端开发阶段经常会问到,今天小编给大家分享经典的20道AJAX面试题,感兴趣的朋友一起学习吧
    2016-09-09
  • AJAX聊天室V1.0发布

    AJAX聊天室V1.0发布

    AJAX聊天室V1.0发布...
    2006-09-09
  • Ajax实现phpcms 点赞功能实例代码

    Ajax实现phpcms 点赞功能实例代码

    这篇文章主要介绍了Ajax实现phpcms 点赞功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • AJAX 常用函数

    AJAX 常用函数

    AJAX 常用函数...
    2007-01-01
  • Struts2和Ajax数据交互示例详解

    Struts2和Ajax数据交互示例详解

    这篇文章主要给大家介绍了关于Struts2和Ajax数据交互的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • JQuery+ajax实现批量上传图片(自写)

    JQuery+ajax实现批量上传图片(自写)

    jquery+ajax方式实现单张图片上传的代码是可以搜的到,实现批量上传图片的程序却没搜索到于是自己写了个,感兴趣的朋友可以参考下
    2013-04-04
  • ajax上传图片到PHP并压缩图片显示的方法

    ajax上传图片到PHP并压缩图片显示的方法

    这篇文章主要为大家详细介绍了ajax上传图片到PHP并压缩图片显示的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Ajax与mysql数据交互实现留言板功能

    Ajax与mysql数据交互实现留言板功能

    最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是PHP,数据库是mysql,下面通过本文给大家详细介绍下
    2016-12-12
  • 一个伪ajax图片上传代码实现示例

    一个伪ajax图片上传代码实现示例

    这篇文章主要介绍了自己写的一个伪ajax图片上传实现代码,需要的朋友可以参考下
    2014-03-03
  • Ajax实现三级联动效果

    Ajax实现三级联动效果

    这篇文章主要为大家详细介绍了Ajax实现三级联动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论

?


http://www.vxiaotou.com