• 【转】封装原生JS实现Ajax


     1 function createXHR() {
     2             if (window.XMLHttpRequest) {    
     3                 //IE7+、Firefox、Opera、Chrome 和Safari    
     4                     return new XMLHttpRequest();
     5             } else if (window.ActiveXObject) { 
     6                  //IE6 及以下    
     7                     var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
     8                     for (var i = 0,len = versions.length; i<len; i++) {
     9                         try {    
    10                                 return new ActiveXObject(version[i]);    
    11                                 break;    
    12                     } catch (e) {    
    13                             //跳过    
    14                         }
    15                     }    
    16              } else {    
    17                         throw new Error('浏览器不支持XHR对象!');    
    18                 }
    19     }
    20 
    21  var xhr = createXHR();  //创建XHR对象
    22 //封装ajax,参数为一个对象
    23  function ajax(obj) {    
    24          var xhr = createXHR();    
    25         //创建XHR对象    //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题    
    26         obj.url = obj.url + '?rand=' + Math.random();    
    27         obj.data = params(obj.data);   //通过params()将名值对转换成字符串    
    28         //若是GET请求,则将数据加到url后面
    29            if (obj.method === 'get') {    
    30                 obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
    31         }
    32     
    33         if (obj.async === true) { 
    34              //true表示异步,false表示同步    
    35                 //使用异步调用的时候,需要触发readystatechange 事件
    36              xhr.onreadystatechange = function () {    
    37                     if (xhr.readyState == 4) {
    38                       //判断对象的状态是否交互完成    
    39                             callback();    //回调    
    40                     }    
    41                 };
    42             }
    43             //在使用XHR对象时,必须先调用open()方法,
    44             //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
    45             xhr.open(obj.method, obj.url, obj.async);
    46             if (obj.method === 'post') {
    47                     //post方式需要自己设置http的请求头,来模仿表单提交。    
    48                     //放在open方法之后,send方法之前。    
    49                     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');    
    50                     xhr.send(obj.data);    //post方式将数据放在send()方法里    
    51         } else {    
    52                     xhr.send(null);//get方式则填null    
    53         }
    54         if (obj.async === false) { 
    55              //同步    
    56                 callback();    
    57         }    
    58 
    59         function callback() {    
    60                     if (xhr.status == 200) { 
    61                          //判断http的交互是否成功,200表示成功    
    62                             obj.success(xhr.responseText);    //回调传递参数    
    63                     } else {    
    64                             alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
    65                     }    
    66          }
    67     }
    68 
    69      //名值对转换为字符串
    70      function params(data) {    
    71              var arr = [];
    72                 for (var i in data) {    
    73                     //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理    
    74             arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));    
    75     } 
    76 return arr.join('&'); 77 }

    使用方式:

     1 ajax({
     2     method : 'post',
     3     url : 'demo.php',
     4     data : {
     5         'name' : 'JR',
     6         'age' : 22
     7     },
     8     success : function (message) {
     9         alert(message);
    10     },
    11     async : true
    12 });
  • 相关阅读:
    Android测试入门篇
    SQL的基本知识
    正则表达式
    ES5语法
    vscode
    继承小结
    工作遇到的问题
    后台程序员的HTTP缓存
    xhr下载图片/服务器向客户端推送消息
    HTTP2.0
  • 原文地址:https://www.cnblogs.com/NoRoad/p/6016170.html
Copyright © 2020-2023  润新知