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

相关文章

  • jquery中的ajax异步上传

    jquery中的ajax异步上传

    本篇文章给大家介绍jquery中的ajax异步上传,在此需要引入ajaxfileupload.js这个js文件。接下来,有需要的朋友跟着小编一起学习吧
    2015-09-09
  • Ajax读取txt并对txt内容进行分页显示功能

    Ajax读取txt并对txt内容进行分页显示功能

    这篇文章给大家介绍了Ajax读取txt并对txt内容进行分页显示功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-11-11
  • Ajax加载外部页面弹出层效果实现方法

    Ajax加载外部页面弹出层效果实现方法

    这篇文章主要介绍了Ajax加载外部页面弹出层效果实现方法,涉及Ajax加载弹出层的实现技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • ajax 怎么设置超时(一个action执行了2遍)

    ajax 怎么设置超时(一个action执行了2遍)

    一个action执行了2遍 ,这个操作大致需要5分多钟才能完成,于是搜了几个可以设置超时的地方,希望对大家有所帮助
    2014-08-08
  • AJAX+Servlet实现的数据处理显示功能示例

    AJAX+Servlet实现的数据处理显示功能示例

    这篇文章主要介绍了AJAX+Servlet实现的数据处理显示功能,结合实例形式分析了前台ajax与后台Servlet生成随机数显示的相关交互操作技巧,需要的朋友可以参考下
    2018-06-06
  • ajax实现修改功能

    ajax实现修改功能

    本文主要介绍了ajax实现修改功能的相关资料,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Ajax()方法如何与后台交互

    Ajax()方法如何与后台交互

    Ajax全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合
    2016-03-03
  • Ajax四种元素的关系介绍

    Ajax四种元素的关系介绍

    应用程序通过XMLHttpRequest对象以后台的方式从服务器获取数据,通过CSS和DOM改变界面的外观,感兴趣的朋友可以了解下本文
    2014-01-01
  • ajax异步加载图片实例分析

    ajax异步加载图片实例分析

    这篇文章主要介绍了ajax异步加载图片的方法,结合实例形式较为详细的分析了ajax图片异步加载的原理与相关实现技巧,需要的朋友可以参考下
    2016-02-02
  • Ajax客户端异步调用服务端的实现方法(js调用cs文件)

    Ajax客户端异步调用服务端的实现方法(js调用cs文件)

    下面小编就为大家分享一篇Ajax客户端异步调用服务端的实现方法(js调用cs文件),具有很好的参考价值,希望对大家有所帮助
    2017-12-12

最新评论