• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    如何封装一个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小封装实例
    上一篇:laravel ajax curd 搜索登录判断功能的实现
    下一篇:Ajax常用封装库——Axios的使用
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    如何封装一个Ajax函数 如何,封装,一个,Ajax,函数,