原生js封装Ajax

288 阅读1分钟
//封装ajax,参数为一个对象
function ajax(obj) {
   var xhr = new XMLHttpRequest();  //创建XHR对象
   //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
   obj.url = obj.url + '?rand=' + Math.random();
   obj.data = params(obj.data);  //通过params()将对象名值对转换成字符串
   //若是GET请求,则将数据加到url后面
   if (obj.method === 'get') {
       obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
   }
   if (obj.async === true) {   //true表示异步,false表示同步
       //使用异步调用的时候,需要触发readystatechange 事件
       xhr.onreadystatechange = function () {
           if (xhr.readyState == 4) {   //判断对象的状态是否交互完成
               callback();      //回调
           }
       };
   }
   //在使用XHR对象时,必须先调用open()方法,
   //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
   xhr.open(obj.method, obj.url, obj.async);
   if (obj.method === 'post') {
       //post方式需要自己设置http的请求头,来模仿表单提交。
       //放在open方法之后,send方法之前。
       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
       xhr.send(obj.data);     //post方式将数据放在send()方法里
   } else {
       xhr.send(null);     //get方式则填null
   }
   if (obj.async === false) {  //同步
       callback();
   }
   function callback() {
       if (xhr.status == 200) {  //判断http的交互是否成功,200表示成功
           obj.success(xhr.responseText);          //回调传递参数
       } else {
           alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
       }  
   }
}
//对象名值对转换为字符串
function params(data) {
   var arr = [];
   for (var i in data) {
       console.log('i :',i);
       //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
       arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
   }
   return arr.join('&');
}

ajax({
   method : 'post',
   url : 'demo.php',
   data : {
       name : jr,
       pwd:pwd
   },
   success : function (message) {
       alert(message);
   },
   async : true
});