Ajax 的简介与使用

一、什么是Ajax

Ajax 的全称是 Asynchronous JavaScript and XML（即异步的 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

 

二、Ajax的优缺点

1、优点：

• 通过异步模式，提升了用户体验

• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
• Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载

 

2、缺点

• 不支持浏览器back按钮

• 安全问题，Ajax 暴露了与服务器交互的细节

• 对搜索引擎的支持比较弱

 

三、Ajax 的使用 -- 实现步骤

1、创建 XMLHttpRequest 对象，即创建一个异步调用对象

var XHR;
if(window.XMLHttpRequest){
  XHR=new XMLHttpRequest();                   //IE7+, Firefox, Chrome, Opera, Safari...
}else{
  XHR=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5

 

2、创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息

XHR.open(method,url,async);
// method：请求类型，GET 或 POST---------可选
// url：文件在服务器上的位置--------------必要参数
// async：true（异步）或 false（同步）----可选
// 以上参数使用时均要加上“”

 

3、设置响应 HTTP 请求状态变化的函数

XHR.onreadystatechange = function () {
    //异步调用成功
    if (XHR.readyState === 4) {
        if ((XHR.status >= 200 && XHR.status < 300) || XHR.status === 304) {
            //获得服务器返回的数据
            data = JSON.parse(XHR.responseText);
            // 渲染数据
            renderDataToDom();
        } else {
            console.log('unsuccess');
        }
    }
};

 

4、发送 HTTP 请求

request.send();

5、获取异步调用返回的数据 （JSON）

6、使用 JavaScript 和 DOM 实现局部刷新

 

四、Ajax中的一些处理总结

1、服务器响应处理

• responseText：获得字符串形式的响应数据
• responseXML：获得XML 形式的响应数据

 

2、同步处理

XHR.open("GET","demo_get.html",false);
XHR.send();    // 直接在 send() 后面处理返回来的数据
document.getElementById("target").innerHTML=XHR.responseText;

 

3、异步处理

异步处理相对比较麻烦，要在请求状态改变事件中处理

XHR.onreadystatechange=function(){     //接收到服务端响应时触发
    if(XHR.readyState==4&&XHR.status==200){
        document.getElementById("target").innerHTML=XHR.responseText;
    }
}

下面是 XMLHttpRequest 对象的三个重要的属性

• onreadystatechange：存储函数，每当 readyState 属性改变时，就会调用该函数
• readyState：存有 XMLHttpRequest 的状态

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

• XHR.status：表示响应状态码。比较常见的有：

200：“OK”（当 readyState 等于 4 且状态为 200 时，表示响应已就绪）

304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）

403：（禁止） 服务器拒绝请求

404：（未找到） 服务器找不到请求的网页

408：（请求超时） 服务器等候请求时发生超时

500：（服务器内部错误） 服务器遇到错误，无法完成请求