javascript - 封装原生js实现ajax

  1             /*
              * ajax方法
              */
             var Ajax = function() {
                 var that = this;
                 //创建异步请求对象方法
                 that.createXHR = function() {
                     if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
                         return new XMLHttpRequest();
                     } else if(window.ActiveXObject) { //IE6 及以下
                         var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP'];
                         for(var i = 0, len = versions.length; i < len; i++) {
                             try {
                                 return new ActiveXObject(version[i]);
                                 break;
                             } catch(e) {
                                 //跳过
                             }
                         }
                     } else {
                         throw new Error('浏览器不支持XHR对象！');
                     }
                 }
                 //初始化数据方法
                 that.init = function(obj) {
                     //初始化数据
                     var objAdapter = {
                             method: 'get',
                             data: {},
                             success: function() {},
                             complete: function() {},
                             error: function(s) {
                                 alert('status:' + s + 'error!');
                             },
                             async: true
                         }
                         //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
                     that.url = obj.url + '?rand=' + Math.random();
                     that.method = obj.method || objAdapter.method;
                     that.data = that.params(obj.data) || that.params(objAdapter.data);
                     that.async = obj.async || objAdapter.async;
                     that.complete = obj.complete || objAdapter.complete;
                     that.success = obj.success || objAdapter.success;
                     that.error = obj.error || objAdapter.error;
                 }
                 //ajax异步调用
                 that.ajax = function(obj) {
                     that.method = obj.method || 'get';
                     if(obj.method === 'post'){
                         that.post(obj);
                     }else{
                         that.get(obj);
                     }
                 }
                 //post方法
                 that.post = function(obj) {
                     var xhr = that.createXHR(); //创建XHR对象
                     that.init(obj);
                     that.method='post';
                     if(that.async === true) { //true表示异步，false表示同步
                         //使用异步调用的时候，需要触发readystatechange 事件
                         xhr.onreadystatechange = function() {
                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
                                 that.callback(obj,this); //回调
                             }
                         };
                     }
                     //在使用XHR对象时，必须先调用open()方法，
                     //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
                     xhr.open(that.method, that.url, that.async);
                     //post方式需要自己设置http的请求头，来模仿表单提交。
                     //放在open方法之后，send方法之前。
                     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                     xhr.send(that.data); //post方式将数据放在send()方法里
                     if(that.async === false) { //同步
                         that.callback(obj,this); //回调
                     }
                 };
                 //get方法
                 that.get = function(obj) {
                     var xhr = that.createXHR(); //创建XHR对象
                     that.init(obj);
                     if(that.async === true) { //true表示异步，false表示同步
                         //使用异步调用的时候，需要触发readystatechange 事件
                         xhr.onreadystatechange = function() {
                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
                                 that.callback(obj,this); //回调
                             }
                         };
                     }
                     //若是GET请求，则将数据加到url后面
                     that.url += that.url.indexOf('?') == -1 ? '?' + that.data : '&' + that.data;
                     //在使用XHR对象时，必须先调用open()方法，
                     //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
                     xhr.open(that.method, that.url, that.async);
                     xhr.send(null); //get方式则填null
                     if(that.async === false) { //同步
                         that.callback(obj,this); //回调
                     }
                 }
                 //请求成功后，回调方法
                 that.callback = function(obj,xhr) {
                         if(xhr.status == 200) { //判断http的交互是否成功，200表示成功
                             obj.success(xhr.responseText); //回调传递参数
                         } else {
                             alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
                         }
                     }
                 //数据转换
                 that.params = function(data) {
                     var arr = [];
                     for(var i in data) {
                         //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
                         arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
                     }
                     return arr.join('&');
                 }
                 return {
                     post : that.post,
                     get : that.get,
                     ajax : that.ajax
                 }
             }

上述的Ajax方法可以看成是一个类，共有方法有:

1. 初始化数据方法init(),

2. 创建异步请求对象方法createXHR()，

3.请求方法ajax(),post(),get()，

4.请求成功后回调方法callback(),

5.数据格式转换方法params()

也可以看成一个函数，return 返回的json对象中定义的接口用于函数内方法的调用

故而有有两种方式进行使用封装的Ajax

函数方式：测试代码数据

             Ajax().post({
                 url: 'ajax.php',
                 data: {
                     'name': 'JR',
                     'age': 22
                 },
                 success: function(message) {
                     console.log(message);
                 },
                 async: true
             });

类方式：测试代码数据

             var ajax = new Ajax();
             ajax.post({
                 url: 'ajax.php',
                 data: {
                     'name': 'JR',
                     'age': 22
                 },
                 success: function(message) {
                     console.log(message);
                 },
                 async: true
             });

对上述封装的ajax方法进行优化

var Ajax = {
                 //ajax模块
                 init: function(obj) {
                     //初始化数据
                     var objAdapter = {
                             url: '',
                             method: 'get',
                             data: {},
                             success: function() {},
                             complete: function() {},
                             error: function(s) {
                                 alert('status:' + s + 'error!');
                             },
                             async: true
                         }
                         //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
                     objAdapter.url = obj.url + '?rand=' + Math.random();
                     objAdapter.method = obj.method || objAdapter.method;
                     objAdapter.data = Ajax.params(obj.data) || Ajax.params(objAdapter.data);
                     objAdapter.async = obj.async || objAdapter.async;
                     objAdapter.complete = obj.complete || objAdapter.complete;
                     objAdapter.success = obj.success || objAdapter.success;
                     objAdapter.error = obj.error || objAdapter.error;
                     return objAdapter;
                 },
                 //创建XMLHttpRequest对象
                 createXHR: function() {
                     if(window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari
                         return new XMLHttpRequest();
                     } else if(window.ActiveXObject) { //IE6 及以下
                         var versions = ['MSXML2.XMLHttp', 'Microsoft.XMLHTTP'];
                         for(var i = 0, len = versions.length; i < len; i++) {
                             try {
                                 return new ActiveXObject(version[i]);
                                 break;
                             } catch(e) {
                                 //跳过
                             }
                         }
                     } else {
                         throw new Error('浏览器不支持XHR对象！');
                     }
                 },
                 params: function(data) {
                     var arr = [];
                     for(var i in data) {
                         //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
                         arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
                     }
                     return arr.join('&');
                 },
                 callback: function(obj, xhr) {
                     if(xhr.status == 200) { //判断http的交互是否成功，200表示成功
                         obj.success(xhr.responseText); //回调传递参数
                     } else {
                         alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
                     }
                 },
                 ajax: function(obj) {
                     if(obj.method === 'post') {
                         Ajax.post(obj);
                     } else {
                         Ajax.get(obj);
                     }
                 },
                 //post方法
                 post: function(obj) {
                     var xhr = Ajax.createXHR(); //创建XHR对象
                     var opt = Ajax.init(obj);
                     opt.method = 'post';
                     if(opt.async === true) { //true表示异步，false表示同步
                         //使用异步调用的时候，需要触发readystatechange 事件
                         xhr.onreadystatechange = function() {
                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
                                 Ajax.callback(opt, xhr); //回调
                             }
                         };
                     }
                     //在使用XHR对象时，必须先调用open()方法，
                     //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
                     xhr.open(opt.method, opt.url, opt.async);
                     //post方式需要自己设置http的请求头，来模仿表单提交。
                     //放在open方法之后，send方法之前。
                     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                     xhr.send(opt.data); //post方式将数据放在send()方法里
                     if(opt.async === false) { //同步
                         Ajax.callback(obj, xhr); //回调
                     }
                 },
                 //get方法
                 get: function(obj) {
                     var xhr = Ajax.createXHR(); //创建XHR对象
                     var opt = Ajax.init(obj);
                     if(opt.async === true) { //true表示异步，false表示同步
                         //使用异步调用的时候，需要触发readystatechange 事件
                         xhr.onreadystatechange = function() {
                             if(xhr.readyState == 4) { //判断对象的状态是否交互完成
                                 Ajax.callback(obj, xhr); //回调
                             }
                         };
                     }
                     //若是GET请求，则将数据加到url后面
                     opt.url += opt.url.indexOf('?') == -1 ? '?' + opt.data : '&' + opt.data;
                     //在使用XHR对象时，必须先调用open()方法，
                     //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。
                     xhr.open(opt.method, opt.url, opt.async);
                     xhr.send(null); //get方式则填null
                     if(opt.async === false) { //同步
                         Ajax.callback(obj, xhr); //回调
                     }
                 }
             };

测试代码

             Ajax.post({
                 url: 'ajax.php',
                 data: {
                     'name': 'JR',
                     'age': 22
                 },
                 success: function(message) {
                     console.log(message);
                 },
                 async: true
             });

ajax.php页面代码

 <?php
 echo $_POST['name'];
 ?>

控制台显示