封装一个Ajax工具函数

封装一个Ajax工具函数

原生JS简单实现Ajax

1、先写出调用函数 然后一步步分析封装

  // jQuery里面的Ajax就是这样的调用方式
   $.ajax({
           type:'get',                 // 请求方式
           url:'demo.php',             // 后台处理程序地址接口
           data:{name:'哈哈',age:22},  // 传输的数据
           callback:function(data){    // 回调函数
               // data为获取到的数据
               console.log(data);
           }
       });

2、引入一个命名空间

// 定义一个命名空间  防止全局污染
var $ = {
        // 传输数据处理函数
        joint:function(){},
        ajax:function(){}
};

3、首先对要传输的数据进行处理

  // data处理函数  将数据处理为 以key1=value1&key2=value2...格式输出
   joint:function(data){
       var d = '';
       // 遍历data数据
       for(var key in data){
           // 拼接为key1=value1&key2=value2...
           d += key + '=' + data[key] + '&';
       }
       // 去除最后一个&
       d = d.slice(0, -1);
       // 最后返回d
       return d;
   }

4、书写ajax函数

  // ajax
   ajax:function(obj){
       // type无数据时默认为get
       var type = obj.type || 'get';
       // url无数据时默认为当前地址
       var url = obj.url || location.pathname;
       // data数据处理 
       var data = this.joint(obj.data);

第一步new

  // 实例化
     var xhr = new XMLHttpRequest();
     // 判断为get提交时 改变url结构
     if(type == 'get'){
         url = url + '?' + data;
         data = null;
     }

第二个步open

  // 发出请求 请求行信息
     xhr.open(type,url);

第三步set

   // 判断为post提交时
     if(type == 'post'){
         // 为get提交时可以不写
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     }

第四步send

     // 发送数据
     xhr.send(data);

监听响应状态并处理

      xhr.onreadystatechange = function(){
           // 处理成功
           // xhr.readyState = 4时  响应完成
           // xhr.status = 200  成功接收请求
           if(xhr.readyState == 4 && xhr.status ==200){
               // 获取响应的数据
               var data = xhr.responseText;
               // 获取响应头文件中的Content-Type信息
               var ct = xhr.getResponseHeader('Content-Type');
               // 转小写
               ct = ct.toLowerCase();
               // 判断为响应的为json格式的数据
               if(ct.indexOf('json') != -1){
                   // 将json格式的数据解析为JS类型的json数据
                   data = JSON.parse(data);
                   // 判断为响应的为XML格式数据
               }else if(ct.indexOf('xml') != -1){
                   // 获取XML数据
                   data = xhr.responseXML;
               }
               // 回调函数返回响应的数据
               obj.callback(data);
           }
       }
   }

源代码下载