Ajax入门篇

---

一、Ajax是什么？

Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML
直白地说，就是使用Ajax技术，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。
AJAX只是一种技术，不是某种具体的东西。不同的浏览器有自己实现AJAX的组件。

Ajax实际上是下面这几种技术的融合：

1. XHTML和CSS的基于标准的表示技术
2. DOM进行动态显示和交互
3. XML和XSLT进行数据交换和处理
4. XMLHttpRequest进行异步数据检索
5. Javascript将以上技术融合在一起

---

二、Ajax的优缺点

1.Ajax的优点

1. 无刷新更新数据： AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
2. 异步与服务器通信： AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
3. 前端和后端负载平衡： AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
4. 基于标准被广泛支持： AJAX 基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
5. 界面与应用分离： Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

2.Ajax的缺点

1. AJAX干掉了Back和History功能，即对浏览器机制的破坏
2. AJAX的安全问题
3. 对搜索引擎支持较弱
4. 破坏程序的异常处理机制
5. 违背URL和资源定位的初衷
6. AJAX不能很好支持移动设备
7. 客户端过肥，太多客户端代码造成开发上的成本

---

三、Ajax适用场景和不适应场景

3.1Ajax适用场景

1. 表单驱动的交互
2. 深层次的树的导航
3. 快速的用户与用户间的交流响应
4. 类似投票、yes/no等无关痛痒的场景
5. 对数据进行过滤和操纵相关数据的场景
6. 普通的文本输入提示和自动完成的场景

3.2Ajax不适用场景

1. 部分简单的表单
2. 搜索
3. 基本的导航
4. 替换大量的文本
5. 对呈现的操纵

---

四、Ajax五大步骤

4.1使用ajax的基本步骤 :

1. 创建请求对象(XMLHttpRequest)
2. 调用open方法 设置请求方式和请求路径
3. 设置请求头 (get不需要设置请求头 post请求需要设置)
4. 监听响应完成事件(onreadystatechange)
5. 发送请求(send)

4.2Ajax五大步骤代码实现

<script>
    document.getElementById("btn").onclick=function(){
        // ajax的五个步骤
        
        // 1.创建请求对象
        var xhr=new XMLHttpRequest();
        
        // 2.调用open方法、设置请求方式和请求路径
        // 参数1：请求方式（post或get）
        // 参数2：请求路径
        xhr.open("get", "data.php");
        
        // 3.设置请求头 (get不需要设置请求头  post请求需要设置)
        // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

        // 4.发送请求
        xhr.send();

        // 5.监听响应完成事件(onload不能兼容IE8以下的版本)
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            }
        }
    }
</script>

五、XMLHttpRequest对象

5.1XMLHttpRequest的方法

方法	作用
open()	初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
send()	初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
setRequestHeader()	向一个打开但未发送的请求设置或添加一个 HTTP 请求。
abort（）	取消当前响应，关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders()	把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader()	返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

常用的方法就是表格的前三个

open()：该方法创建http请求

第1个参数是指定提交方式(post、get)
第2个参数是指定要提交的地址
第3个参数是指定是异步还是同步(true表示异步，false表示同步)
第4和第5参数在http认证的时候会用到。是可选的

setRequestHeader(String header,String value)： 设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）

xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

send(content)：发送请求给服务器

如果是get方式，并不需要填写参数，或填写null
如果是post方式，把要提交的参数写上去

5.2XMLHttpRequest的属性

属性
readyState	HTTP请求状态
responseText	目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
responseXML	对请求的响应，解析为 XML 并作为 Document 对象返回。
status	由服务器返回的 HTTP 状态代码
statusText	这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。

readyState：请求状态readyState一改变，回调函数被调用，它有5个状态

0：未初始化
1：open方法成功调用以后
2：服务器已经应答客户端的请求
3：交互中。Http头信息已经接收，响应数据尚未接收
4：完成。数据接收完成