Ajax的使用以及跨域(中)

好，我们接着上篇的内容接续来讲解Ajax相关的内容。今天要将的是我们自己模仿着jQuery封装Ajax请求。

原生的Ajax请求上篇文章已经都说清楚了，大家应该会感觉调用起来代码写的多，很多细节可能都记不住，一旦有了这个感觉之后，我们就可以来考虑一下将原生的Ajax请求封装在一个方法中。例如：

function myAjax() {

   //在这里写XMLHttpRequest的代码，最后将成功之后的数据回调
}

既然要封装到一个方法中，那我们就需要将一些会变化的东西拿出来，通过参数的方式进行传递，也就是myAjax方法的定义中需要有参数，那么参数有多少个呢，又分别是什么呢？

首先，url肯定是会变的，所以url是一个参数，请求方式是get还是post也是不确定的，如果是post请求的话，那么请求参数也是不确定的，还有同步异步也最好让调用者来确定。最后，请求的数据是json呢还是xml也是不确定的。

通过上诉分析，我们可以得出下面代码：

//callback是传递进来的回调函数

function myAjax(url,type,param,dataType,async,callback){

   //兼容处理
   var
xhr = null;

   if(window.XMLHttpRequest){

      xhr = new
XMLHttpRequest();

   }else{

      xhr = new
ActiveXObject('Microsoft.XMLHTTP');

   }

   //如果是get请求，则需要将参数跟在url后面
   if(type ==
'get'){

      url += "?" + param;

   }

   xhr.open(type,url,async);

   var data
= null;

   //如果是post请求，则需要在send方法中将参数放进去，并且需要设置请求头
   if(type ==
'post'){

      data = param;

      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

   }

   xhr.send(data);

   //如果是异步的话，则需要监听xhr的onreadystatechange的事件，否则就不需要监听
   if(async) {

      xhr.onreadystatechange
= function(){

         if(xhr.readyState
== 4){

            if(xhr.status
== 200){

               var data
= xhr.responseText;

               //如果是json数据的话，将数据转化成js中的json类型的对象，这样会方便后续解析
               if(dataType ==
'json'){

                  data = JSON.parse(data);

               }

               callback(data);

            }

         }

      }

   } else {

      if(xhr.readyState
== 4){

         if(xhr.status
== 200){

            var data
= xhr.responseText;

            if(dataType ==
'json'){

               data = JSON.parse(data);

            }

            callback(data);

         }

      }

   }

}

上面的代码就是我们自己对原生的Ajax进行的封装。调用的代码如下：

<script
type="text/javascript">

    window.onload
= function(){

        var btn
= document.getElementById('btn');

        btn.onclick = function(){

            var uname
= document.getElementById('username').value;

            var pw
= document.getElementById('password').value;

            myAjax('./01check.php',

                    'get',

                    'username='+uname+'&password='+pw,

                    'json',

                    true,

                    new function(data){console.log(data);})

        }

    }
</script>

 

这是最容易想到的封装方法。不过有瑕疵。为什么呢，因为调用起来不方便。在定义myAjax方法的时候，设置了6个参数，也就是每次我调用myAjax方法的时候，我都需要传递6个参数，一个都不能少，并且参数的顺序还不能错。这就是调用起来不方便的地方。因此我们需要优化。我们可以参考jQuery对Ajax的封装，然后将myAjax进行修改。

在jQuery中使用Ajax很方便，代码如下：

<script
type="text/javascript">

    window.onload
= function(){

        var btn
= document.getElementById('btn');

        btn.onclick = function(){

            var uname
= document.getElementById('username').value;

            var pw
= document.getElementById('password').value;

            $.ajax({

                type:'get',

                url:'./01check.php',

                data:{username:uname,password:pw},

                dataType:'json',

                success:function(data){

                }

            });

        }

    }
</script>

这就是jQuery中的Ajax调用。它有什么特点呢？type、url等之间的顺序可以任意，type可以不写，默认就是get，这就比我们刚才的方法调用要简单很多。那么它是怎么来实现的呢？仔细观察我们可以发现，在$.ajax()方法调用中，参数传递的其实是一个对象{ } ,对象中都是以键值对的方式存在。这就给我们一个启发，参数传递可以以对象的方式传递，这样就可以不用考虑参数顺序的问题。并且我们还可以很方便的加上默认值。那接下来我们就仿照jQuery的方法将myAjax给一步步的改善。

function myAjax(obj){

   //我们可以自己定义一些默认值，比如get请求就可以成为默认值
   var
defaults = {

      type :
'get',//默认的请求方式为get
      data
: {},//请求的参数也可以用对象的方式进行维护，这样会方便很多
      url
: '#',

      dataType :
'text',

      async :
true,

      success :
function(data){console.log(data)}

   }

}

defaults就是默认值，obj就是传递过来的值，如果obj没有传递某些值的话，那么就使用defaults中定义的值，如果obj传递了一些值过来，那么就需要使用obj中的值，所以下一步，就是要将obj的值覆盖defaults中的值，代码如下：

function myAjax(obj){

   //我们可以自己定义一些默认值，比如get请求就可以成为默认值
   var
defaults = {

      type :
'get',//默认的请求方式为get
      data
: {},//请求的参数也可以用对象的方式进行维护，这样会方便很多
      url
: '#',

      dataType :
'text',

      async :
true,

      success :
function(data){console.log(data)}

   }

for(var
key in
obj){

     defaults[key] = obj[key];//用obj中的值覆盖defaults中的值

   }

}

 

这步做完之后，接下来就很简单了，将之前myAjax方法中，使用参数的地方，都变成使用defaults中的值就可以了，完整代码如下：

function myAjax(obj){

   //我们可以自己定义一些默认值，比如get请求就可以成为默认值
   var
defaults = {

      type :
'get',//默认的请求方式为get
      data
: {},//请求的参数也可以用对象的方式进行维护，这样会方便很多
      url
: '#',

      dataType :
'text',

      async :
true,

      success : function(data){console.log(data)}

   }

   for(var
key in
obj){

      defaults[key] = obj[key];//用obj中的值覆盖defaults中的值
   }

   // 1、创建XMLHttpRequest对象
   var
xhr = null;

   if(window.XMLHttpRequest){

      xhr = new
XMLHttpRequest();

   }else{

      xhr = new
ActiveXObject('Microsoft.XMLHTTP');

   }

   // 把对象形式的参数转化为字符串形式的参数
   /*如：
    {username:'zhangsan','password':123}
    转换为
    username=zhangsan&password=123
    */
   var
param = '';

   for(var
attr in
obj.data){

      param +=
attr + '=' + obj.data[attr] +
'&';

   }

   if(param){

      param =
param.substring(0,param.length
- 1);

   }

   // 处理get请求参数并且处理中文乱码问题
   if(defaults.type
== 'get'){

      defaults.url
+= '?' +
encodeURI(param);

   }

   // 2、准备发送（设置发送的参数）
   xhr.open(defaults.type,defaults.url,defaults.async);

   // 处理post请求参数并且设置请求头信息（必须设置）
   var
data = null;

   if(defaults.type
== 'post'){

      data =
param;

      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

   }

   // 3、执行发送动作
   xhr.send(data);

   // 处理同步请求，不会调用回调函数
   if(!defaults.async){

      if(defaults.dataType
== 'json'){

         return JSON.parse(xhr.responseText);

      }else{

         return xhr.responseText;

      }

   }

   // 4、指定回调函数（处理服务器响应数据）
   xhr.onreadystatechange
= function(){

      if(xhr.readyState
== 4){

         if(xhr.status
== 200){

            var data
= xhr.responseText;

            if(defaults.dataType
== 'json'){

               // data = eval("("+ data +")");
               data
= JSON.parse(data);

            }

            defaults.success(data);

         }

      }

   }

}

 

 

 

好，现在我们就模仿了jQuery封装了自己的myAjax方法，顺着我们的封装思路有以下几个历程： 

1、 简单封装，需要参数的话定义在方法的括号中

2、 为了方法参数传递时候顺序可以随意，因此想到了以对象的方式传递参数。

3、 方法中并不是每一个参数都需要传递，我们可以设置默认值，然后将传递过来的值覆盖默认值

 

那jQuery中Ajax代码就是这样写的吗？其实还有点差别，这里就涉及到跨域的问题，我们下一篇文章再来说明一下。