Ajax及其应用

（1）Ajax工作原理

Ajax是异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。

Ajax相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。简单的说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

（2）XMLHttpRequest对象的属性、方法和事件。

XML可拓展标记语言，被设计用来传输和存储数据，与HTML相似，但是XML没有预定义标签，都是自定义的。

HTML:呈现数据

XML:表示数据

比如我有一个女朋友的数据：

<GF>
<name>女朋友</name>
<age>18</age>
<gender>女</gender>
</GF>

readyState：表示XMLHttpRequest对象的状态，有以下数值：

0: 未初始化 - 对象已创建，但尚未调用open()方法。
1: 启动 - 已调用open()方法，但尚未调用send()方法。
2: 发送 - 已调用send()方法，但尚未接收到响应。
3: 接收 - 已接收到部分响应数据。
4: 完成 - 已接收到所有响应数据。
responseText：返回作为请求响应体接收的文本。如果请求未完成或失败，则该属性返回null。

responseXML：返回作为请求响应体接收的XML文档对象（如果响应的内容类型是"text/xml"或"application/xml"）。如果请求未完成或失败，则该属性返回null。

status：返回HTTP状态代码（例如200表示成功，404表示未找到，等等）。

statusText：返回HTTP状态消息（例如"OK"、"Not Found"等）。

onreadystatechange：表示每当readyState属性改变时调用的事件处理程序的函数。这个属性通常用于指定一个回调函数，以便在XMLHttpRequest对象的状态发生变化时执行特定的操作。

方法：
open(method, url, async, user, password)：初始化请求。参数分别是HTTP方法、URL、是否异步、可选的用户名和密码。

send(data)：发送请求。可选地，可以传递数据作为请求体。

setRequestHeader(header, value)：设置HTTP请求头。

abort()：取消当前的HTTP请求。

事件：
onreadystatechange：每当readyState属性发生变化时触发。

onload：当请求成功完成时触发。

onerror：当请求失败时触发。

ontimeout：当请求超时时触发。

onprogress：在接收响应期间触发，用于跟踪下载进度。

onabort：当请求被取消时触发。

（3）JSONPlaceHolder

 

JSONPlaceholder 是一个提供免费的在线 REST API 的网站，我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。

• 网站地址：JSONPlaceholder - Free Fake REST API

其返回的数据为 JSON 格式，且同时支持 HTTP 和 HTTPS 这两种请求类型。