Ajax请求原理

【Ajax】

Ajax异步的javascript和XML，也就是说，Ajax就是通过javascript语言，去异步请求之后，得到响应，局部刷新代码。

    两个特点：异步请求，局部刷新。

【Ajax的原生开发流程】

    1、创建请求对象（异步）

         创建核心的XMLHttpRequest请求对象，Ajax编程都是通过这个对象来进行的。注意：浏览器对XMLHttpRequest对象的支持有所不同。不部分浏览器都支持XMLHttpRequest对象

    var xhr = new XMLHttpRequest（）；

    在IE6中：

    var xhr = new ActiveXObject("Msxml2.XMLHTTP")；

    IE6一下：

    var xhr = new ActiveXObject("Microsoft.XMLHTTP")；

    2、打开与服务器的链接

    创建完请求对象后，通过请求对象的Open（）方法，这个方法可以与服务器建立链接。

    open（method,url,flag);

    三个参数：第一个代表用什么请求方式，GET或者POST等。第二个参数是要请求服务器的路径，如果你用的是GET请求，如果有参数的话，要拼接在URL后面。第三个参数表示是否是异步请求，默认是异步的。

    var xhr = new XMLHttpRequest();

    xhr.open("GET"," http://10.xx.xxx:8080/?name=liushengxu&pwd=123",true);

    3、发送请求

    打开链接，与服务器建立链接后，在利用请求对象的send（）方法，去发送请求

    如果用的GET请求，send方法内的参数写null就行，如果是post请求，请求有 参数的话，那么请求参数要写在这send方法内。

    xhr.send(null);

    注意：如果是post请求，那么在调用send方法之前，要设置请求头。

    xhr.setRequestHeader("Content-type","Application/x-www-form-urlencoded");

    4、接受服务器响应

    当请求对象调用完send方法后，就可以等待服务器的响应，请求对象会根据响应的不同状态而触发一个onreadystatechange事件。

    【请求对象的几种状态码：】

    0：未初始化完成，只是创建了XMLHttpRequest对象，还未调用open方法

    1：初始化完成，请求开始，开始调用open方法，但没调用send方法

    2：请求发送，就是说已经调用了send方法

    3: 开始接收服务器的响应。

    4：读取接收服务器响应后返回的数据。（响应彻底结束）

    当状态码为2/3/4的时候，会触发onreadystatechange事件

    我们可以利用请求对象的readyState属性来查看当前的状态码。

    真正开发的时候，我们只关心状态码为4的时候。

    【服务器响应的状态码】

    200：响应正常（这就是我们最后想要的状态码）

    404：找不到要访问的url

    500：服务器方面的错误

    我们可以利用请求对象的status属性来查看服务器状态码。

    var xhr = new XMLHttpRequest();

    xhr.open("GET"," http://xxx.html",true);

    xhr.send(null);

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && xhr.status ==200) {

        //返回JSon字符串

            xhr.responseText;

    }

}

【Ajax】

Ajax异步的javascript和XML，也就是说，Ajax就是通过javascript语言，去异步请求之后，得到响应，局部刷新代码。

    两个特点：异步请求，局部刷新。

【Ajax的原生开发流程】

    1、创建请求对象（异步）

        创建核心的XMLHttpRequest请求对象，Ajax编程都是通过这个对象来进行的。注意：浏览器对XMLHttpRequest对象的支持有所不同。不部分浏览器都支持XMLHttpRequest对象

    var xhr = new XMLHttpRequest（）；

    在IE6中：

    var xhr = new ActiveXObject("Msxml2.XMLHTTP")；

    IE6一下：

    var xhr = new ActiveXObject("Microsoft.XMLHTTP")；

    2、打开与服务器的链接

    创建完请求对象后，通过请求对象的Open（）方法，这个方法可以与服务器建立链接。

    open（method,url,flag);

    三个参数：第一个代表用什么请求方式，GET或者POST等。第二个参数是要请求服务器的路径，如果你用的是GET请求，如果有参数的话，要拼接在URL后面。第三个参数表示是否是异步请求，默认是异步的。

    var xhr = new XMLHttpRequest();

    xhr.open("GET"," http://10.xx.xxx:8080/?name=liushengxu&pwd=123",true);

    3、发送请求

    打开链接，与服务器建立链接后，在利用请求对象的send（）方法，去发送请求

    如果用的GET请求，send方法内的参数写null就行，如果是post请求，请求有 参数的话，那么请求参数要写在这send方法内。

    xhr.send(null);

    注意：如果是post请求，那么在调用send方法之前，要设置请求头。

    xhr.setRequestHeader("Content-type","Application/x-www-form-urlencoded");

    4、接受服务器响应

    当请求对象调用完send方法后，就可以等待服务器的响应，请求对象会根据响应的不同状态而触发一个onreadystatechange事件。

    【请求对象的几种状态码：】

    0：未初始化完成，只是创建了XMLHttpRequest对象，还未调用open方法

    1：初始化完成，请求开始，开始调用open方法，但没调用send方法

    2：请求发送，就是说已经调用了send方法

    3: 开始接收服务器的响应。

    4：读取接收服务器响应后返回的数据。（响应彻底结束）

    当状态码为2/3/4的时候，会触发onreadystatechange事件

    我们可以利用请求对象的readyState属性来查看当前的状态码。

    真正开发的时候，我们只关心状态码为4的时候。

    【服务器响应的状态码】

    200：响应正常（这就是我们最后想要的状态码）

    404：找不到要访问的url

    500：服务器方面的错误

    我们可以利用请求对象的status属性来查看服务器状态码。

    var xhr = new XMLHttpRequest();

    xhr.open("GET"," http://xxx.html",true);

    xhr.send(null);

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && xhr.status ==200) {

        //返回JSon字符串

            xhr.responseText;

    }

}