AJAX异步原理与实现

面试时问到了这个问题，说实话我还是不理解的，只是单单会使用。所以今天我看一下，自己了解下。

看了网上前辈们写的资料，我自己总结归纳ajax的原理和流程如下：

1、AJAX创建异步对象XMLHttpRequest

这个是ajax核心的对象，当然不是所有浏览器创建这个对象的方法是一致的。我们开发过程中一般建议使用chrome浏览器，在chrome中，XMLHttpRequest对象的创建方法直接

var xmlHttp=new XMLHttpRequest();即可。但是IE是特例，我们需要这样var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");（这里忽略低版本IE了，我相信再低不可能使用IE6以下吧），要在一个方法内完成对象创建需要try、catch（JS也是可以的）

2、操作XMLHttpRequest 对象

对象创建完成后当然是使用了。

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针

（3）获取异步对象的readyState 属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据，

（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

感觉好难记，一时间还是很难消化的。我们还是直接来看ajax怎么写吧

现在ajax我会的就两种，一种就是原生的ajax，另一种就是jquery中提供的ajax，后者比前者更简单。

第一种：

原生ajax，请求方式因为分为post和get等，为了统一，可以当参数传入，不必分开处理，然后我们可以封装这样的一个方法，使用时直接调用

function ajax_method(url,data,method,success) {
    // 创建异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

}

第二种：

其实jquery中使用ajax也是有多种方式的，先看看不带参数的：

$(document).ready(function(){  
    $("button").click(function(){  
        $.ajax({url:"http://localhost:8080/lsd/getChildrenList.action",  
            success:function(result){  
        　　//处理返回数据12         }});  
    });  
});  

其中第一个参数是请求的url，第二个参数是回调用函数，json数据封装在result，需要对result的json数据进行解析

如果想加入参数，则在url和回调函数之间加入参数即可。

另外，jquery中提供post类型的ajax方法从服务器载入数据

$('#send').click(function(){
    $.post('jqRequest.jsp',{
        num: $('#num').val()
    },function(data){
        $('#result').html('您选择的数字' + $('#num').val() + '是' + data)
    })
})

写法上我觉得就是三种$.ajax()和$.post()和$.get()，至于参数不参数，按实际需要来就行

三者做个比较：

$.get $.post是简单易用的高层实现，我们使用$.get $.post方法，jQuery会自动封装调用底层的$.ajax。
$.get 只处理简单的 GET 请求功能以取代复杂 $.ajax，请求成功时可调用回调函数。不支持出错时执行函数，否则必须使用$.ajax。
$.post 只处理 post请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。不支持出错时执行函数，否则必须使用$.ajax。
$.get("test.php", { name: "John", time: "2pm" } ) $.get方法在请求时会自动生成queryString提交给服务器(name=John&time=2pm)，
$.post方法提交的数据直接类似表单提交，提交的数据量比$.get更大。

这里插一句：post和get提交的区别，面试也问了，回答的不是很全面。

1.post提交的数据量几乎没有限制，get提交有内容大小限制

2.get提交把参数加在url中，post提交不会

3.由于get提交把参数放入了url，所以大家都可以看到是比较不安全的，post比较安全