如何封装一个Ajax函数

 更新时间:2021年05月06日 16:50:53   作者:小白可别不举铁  
这篇文章主要介绍了如何封装一个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函数的资料请关注脚本之家其它相关文章!

相关文章

  • rails制作rss feed代码

    rails制作rss feed代码

    在网上Google了很多次,能找到用rails制作rss,但是总是找不到完整的。今天把完整的过程抄录在这里
    2008-09-09
  • AJAX javascript的跨域访问执行

    AJAX javascript的跨域访问执行

    在网站调用加载评论等信息的时候遇到了不同域名间javascript不能执行的问题,一直都在加载中显示不出来,而换个网址访问的话就能正确显示,一直没去注意浏览器提示的错误信息:
    2008-04-04
  • 在Ajax中使用get和post所遇到的问题及解决办法

    在Ajax中使用get和post所遇到的问题及解决办法

    本文重点给大家介绍在ajax中使用get和post所遇到的问题及解决办法,及get请求和post请求的区别简单介绍,本文介绍的非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • 简单实体类和xml文件的相互转换方法

    简单实体类和xml文件的相互转换方法

    下面小编就为大家带来一篇简单实体类和xml文件的相互转换方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Ajax基础详解教程(一)

    Ajax基础详解教程(一)

    ajax技术在前端应用开发中经常会用到,是必须要掌握的知识。下面脚本之家小编给大家带来了Ajax基础详解教程(一),感兴趣的朋友跟着一起学习吧
    2016-06-06
  • iframe式ajax调用示例

    iframe式ajax调用示例

    想必大家对ajax调用有所熟悉,下面为大家介绍下iframe式ajax调用,需要的朋友可以参考下
    2014-02-02
  • 前端实现滑动按钮AJAX与后端交互的示例代码

    前端实现滑动按钮AJAX与后端交互的示例代码

    这篇文章主要介绍了前端实现滑动按钮AJAX与后端交互的示例代码,前端代码分为html代码和css代码,通过js事件触发,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-02-02
  • Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    Ajax获取到数据放入echarts里不显示的原因分析及解决办法

    在做一个需要用到echarts地图的项目的时候,成功通过ajax获取到了后台提供的数据,并生成了想要的JSON串。但是,放到echarts option.series[0].data里,获取不到数据。在生成的地图上无法看到你从后台获取到的值,下面小编给大家分享我的解决办法,需要的朋友参考下
    2016-01-01
  • Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法

    Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法

    最近做项目遇到这样的需求:管理后台需要随时下载数据报表,数据要实时生成后转换为excel下载。怎么解决这个问题呢?下面小编给大家分享Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法,一起看看吧
    2017-09-09
  • history保存列表页ajax请求的状态使用示例详解

    history保存列表页ajax请求的状态使用示例详解

    这篇文章主要为大家介绍了history保存列表页ajax请求的状态使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论