小小信使-ajax

对前端工程师来说，ajax这么个大招一定得点满啊，对开发绝对是超有用的。

能够无刷新的部分更新页面的数据，这么逆天的技能属性可是能实现出很多很酷炫的交互效果的。

然而虽然是很厉害，但其实ajax实现的原理并不会很复杂的，基本上利用ajax实现出一个效果主要都是要经过这两个步骤：

1 通过HTTP请求，获取数据或者提交数据。

2 取得响应数据，对响应数据操作。

 

对数据的操作一般都是通过dom来完成，这里不再多赘述，我们来看一下ajax是如何请求到数据或着发送数据的吧。

 

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();//new一个xhr对象，这个对象像信使一样存在着
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');//为了兼容IE6
    }
    //如果是get请求，而且data存在，则是要通过get请求发送数据，通过get请求发送数据，数据会被链接到请求地址之后
    if (method == 'get' && data) {
        url += '?' + data;
    }
    //初始化请求，method表示请求方式，url是请求地址，true表示异步
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();//发送请求
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//post方式，需要设置请求头
        xhr.send(data);//发送提交数据
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {//4是请求最后的阶段， 
            //http状态码，2开头便是还请求成功
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);//在这里判断一下，如果success存在，则执行它，将响应数据作为参数传入回调函数
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
        
    }
}

 

 

 

这就是一个还算比较完整的ajax函数的封装了，自己动手模仿着写一个这样的函数有助于加深自己对于ajax请求过程的理解哦！但具体到实际开发当中时，还是用jquery帮我们封装好了的ajax函数比较保险一些，反正我就是这样，那接下来就介绍一下jquery的ajax函数吧！

 

$.ajax({

     type: 'POST',     /*请求方式：可以是‘get’，也可以是‘post’*/

     url: url ,     /*请求地址’*/

     data: data ,      /*‘get’请求用于提交给后台的查询参数，也可以是’post‘请求发送给后台的数据*/

     success: success ,      /*ajax请求成功时的会触发该回调函数，针对响应数据的处理程序*/

     dataType: dataType      /*预期后台返回响应数据的类型，可以是’‘json*，也可以是’xml’或’txt‘/

});

 

 

 大概也就是这些内容了，当然想了解更详细一点的话可以去w3school.com.cn看看！

 下面总结一些具体点的实际应用吧！

 1 表单数据的提交

　　这个的话，jquery提供了一个很方便的函数哦，就是 serialize() ，用于将表单直接序列化成为字符串!然后就可以像这样...

var formParam = $("#form").serialize();//序列化表单内容为字符串  
    $.ajax({  
         type:'post',      
         url:'url',  
         data:formParam,  
         cache:false,  
         dataType:'json',  
         success:function(data){}  
    });  

 　　直接把表单数据提交出去了！

　2 等待更新吧！嘻嘻...

 

　在这里再总结一下关于数据提交的两种方式吧！

　1 第一种是直接在提交地址之后链接数据，以‘？’为间隔，像这样的格式：url：‘url？key=’+value，

　2 第二种呢就是像上面的表单数据提交一样，在data参数后面传值，像这样的格式：data：value（value是存储有要传输的数据的变量），也可以是data：{     

      key1：value1，key2：value2 }这种直接以json格式传送。

 

   最后总结一下‘get’和‘post’：

　‘get’：

　　　　一般用来获取数据，也可以用来提交数据，但我觉得这两种说法其实不应该分开来讲的，因为在获取数据的时候通常情况下也是需要提交一些相应的查询参数的，比

　 如你想获取多少条数据啊，或者想要获取第几页的数据啊这些的。

           但虽说如此，一般用get方式提交数据也只是局限于提交一些相应的查询参数，而不会用它来提交表单数据等，为什么呢？因为第一，通过get方式提交的数据将明文

　 出现在url上的，基本没有安全性可言，二来呢，能提交的数据量是存在限制的.

 

　‘post’：

　　　知道了‘get’方式所存在的缺陷，你大概也能猜到‘post’方式的作用了吧，嗯是的，‘post’请求主要就是用于提交数据的，而且安全性相对更高，理论上数据量也是不存

　在限制的。

　　

　　更新中...