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：（服务器内部错误）服务器遇到错误，无法完成请求

来源：https://www.cnblogs.com/Leophen/p/11208931.html

标签

ajax

服务器类型