如何封装一个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函数的资料请关注真格学网其它相关文章!

您可能感兴趣的文章:利用promise及参数解构封装ajax请求的方法详解JavaScript原生封装ajax请求和Jquery中的ajax请求vue 组件的封装之基于axios的ajax请求方法原生js封装的ajax方法示例纯js封装的ajax功能函数与用法示例详解自定义ajax支持跨域组件封装react中的ajax封装实例详解基于ajax和jsonp的原生封装(实例)使用原生js封装的ajax实例(兼容jsonp)vue-ajax小封装实例

  • 本文相关:
  • ajax 配合node js multer 实现文件上传功能
  • ajax实现异步文件或图片上传功能
  • 用ajax动态加载需要的js文件
  • 利用 linq+jquery+ajax 实现异步分页功能可简化带宽压力
  • ajax中文乱码解决新方法分享
  • js对ajax返回数组的处理介绍
  • 强烈推荐-ajax开发者必看的文章
  • ajax实现数据删除、查看详情功能
  • ajax回调函数中使用$(this)取不到对象的解决方法
  • 看图理解 普通交互方式和ajax交互方式区别
  • 想问一个Nike AJ扣碎3.0的价格问题,鉴于扣碎和丝绸扣碎的价...
  • 我托一个在澳大利亚的同学帮我买aj 怎么运回国内?还不会被海...
  • AJ被划开了一个口子怎么办啊,对鞋子有影响吗?
  • aj鞋面划了一个道子怎么办
  • excel 插入数据问题,将AJ列的数据插入到AH列,一个小组一个电...
  • aj爱好者请进,我问个关于篮球鞋的问题:aj新品上市怎么查询?有...
  • 推荐一个卖正品AJ的淘宝店
  • 穷学生,想到淘宝买一个盗版的aj的鞋,请问aj 几好啊,什么配色好...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关利用promise及参数解构封装ajax请求的方法详解javascript原生封装ajax请求和jquery中的ajax请求vue 组件的封装之基于axios的ajax请求方法原生js封装的ajax方法示例纯js封装的ajax功能函数与用法示例详解自定义ajax支持跨域组件封装react中的ajax封装实例详解基于ajax和jsonp的原生封装(实例)使用原生js封装的ajax实例(兼容jsonp)vue-ajax小封装实例ajax 配合node js multer 实现文件上传功能ajax实现异步文件或图片上传功能利用 linq+jquery+ajax 实现异步分页功能可简化带宽压力ajax中文乱码解决新方法分享js对ajax返回数组的处理介绍强烈推荐-ajax开发者必看的文章ajax实现数据删除、查看详情功能ajax回调函数中使用$(this)取不到对象的解决方法看图理解 普通交互方式和ajax交互方式区别jquery ajax 向后台传递数组参数ajax readystate的五种状态详解jquery实现ajax定时刷新局部页面ajax中的async属性值之同步和异步ajax传递多个参数具体实现ajax获取数据然后显示在页面的实ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ie使用ajax跨域调用springboot框架的api传输解析ajax核心xmlhttprequest对象的创建与ajax跳转到新的jsp页面的方法ajax实现省市三级联动效果xmlhttprequest of ajaxjquery的ajax传参巧用json使用示例(附jsojquery ajax中使用serialize()方法提交表jquery ajax json 数据的遍历代码使用html5中postmessage知识点解决ajax中jquery的ajax同步和异步的理解及示例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved