AJAX综合分析

AJAX：Asynchronous JavaScript and Xml

（异步的JavaScript和Xml）

AJAX是一种用来改善用户体验的技术，本质是使用XMLHttpRequest对象异步地向服务器发请求，并且发送请求的同时浏览器并不销毁页面，可以继续进行页面的操作，在服务器收到请求之后会返回部分数据，而不是一个完整的页面。浏览器接收到这些部分数据之后会以页面无刷新的效果更改页面中的局部内容。
整个过程有种多线程的感觉，页面当前可以继续操作，而背后已经在偷偷的像服务器发送了请求，但客户端不会有任何的觉察，不会打断客户端的操作。对于服务器来讲，接收的数据量是少的，返回的数据量也是少的，挺高了效率，减少了无谓的数据传送和判断。

AJAX工作原理

获得AJAX对象

function  getXhr(){
        var xhr = null;
        if(window . XMLHttpRequest){
            xhr  = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft . XMLHTTP');
        }
        return xhr;
}

AJAX对象本身是浏览器中的一个对象，但在IE中表现为一个ActiveX。所以在使用JavaScript语言进行创建该对象时，需要区分不同的浏览器。

AJAX对象属性和方法

onreadystatechange事件
当AJAX对象的readyState的值发生了改变时，系统会发出该事件。比如从0变成1就会产生readystatechange事件。大部分时候我们只需要知道readyState为4时这个状态，

function  getXhr(){
        var xhr = null;
        if(window . XMLHttpRequest){
            xhr  = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft . XMLHTTP');
        }
        return xhr;
}

readyState请求状态
代码编写中主要判断4状态，也就是最终状态，可以进行数据解析及展示在页面中了。对于状态的判断书写代码的格式如下

xhr.onreadystatechange=function(){
if(xhr.readyState == 4){
    var txt = xhr.responseText;
     //展示数据到页面
        }
    }

status响应状态
请求状态并不能保证回来的数据就是我们想要的数据，也可能是发回的错误提示。
200代表成功，404代表没有找到资源，500代表服务器发生了运行异常。

xhr.onreadystatechange=function(){
if(xhr.readyState == 4&& xhr.status == 200){
    var txt = xhr.responseText;
     //正确数据        
     }
 }

发送请求：
请求发送可分为2个步骤，即：
1、xhr.open('type',URI,boolean);
请求的准备工作
2、send();

open方法可以理解为准备工作，填写发送请求前的信息准备。
语法：xhr.open('type',boolean);

参数1：使用"get"或"post"即发送GET/POST请求;
参数2：填写发送请求的地址，如果在发送GET请求时需要在地址中携带参数值，可以通过“？”的方式来追加“name=value”对象；
参数3：为boolean类型的值。当该boolean值为true时，服务器请求是异步进行的也就是脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；

POST提交方式与GET方式有一个非常显著的不同，就是缺少一个消息头信息，“content-type”。所以在POST请求时，要使用编码的形式来为消息头添加这个说明。
xhr.setRequestHeader(
'content-type',‘application/x-www-form-urlencoded');

open准备工作做好以后，就是通过 send()方法实际的发送请求。
GET方式时，send方法不需要参数，传入null。但POST提交方式时，就需要在send方法中传入表单要提交的数据，以“name=value”对的字符串形式传入即可。
xhr.send('uname = shuaige'); 原文链接：https://www.f2er.com/ajax/162370.html

猜你在找的Ajax相关文章