Ajax及其应用

Ajax工作原理及分析：

Ajax技术是一种使用JavaScript的Web开发技术（并不是新的编程语言），能够让网页在不刷新的情况下实现异步通信。它可以快速地访问服务器，并获取数据，而且可以在后台进行操作，不会影响用户的体验。当网页需要更新某些数据时，传统的方式是通过刷新整个页面或跳转到另一个页面来实现。而采用Ajax技术，则可以使用JavaScript发送异步请求，只更新需要改动的部分内容。这使得页面更加流畅、响应更快，并提高了用户体验。Ajax技术最初被用于处理XML数据格式，但随着JSON数据格式的流行以及浏览器API的增强，如今也可以处理多种数据类型。

工作原理：

Ajax利用XMLHttpRequest对象向服务器发送请求，并接受服务器返回的数据，使页面局部更新，它通过JavaScript和DOM操作网页（浏览器），将服务器发送的数据插入到指定位置。当网页需要更新某些数据时，JavaScript首先创建一个XHR对象，并使用该对象的open()方法指定请求的URL和HTTP方法。然后，JavaScript使用XHR对象的send()方法发送请求，并在请求完成后通过回调函数处理响应。

在发送请求期间，JavaScript可以在后台继续执行其他任务，不会阻塞用户界面。一旦服务器响应了请求，JavaScript就会执行回调函数来处理响应，并将数据更新到网页中的相应部分。

XMLHttpRequest对象的属性、方法和事件：

XMLHttpRequest对象属性：

onreadystatechange：定义当readyState属性发生变化时所要调用的事件处理程序函数。

readyState：存有XMLHttpRequest的状态。从0到4发生变化，表示不同的状态。

responseText：以字符串形式返回请求的响应体。

responseXML：以Document对象形式返回请求的响应体。如果响应体不是XML，则返回null。

status：返回请求的HTTP状态码，如200表示成功、404表示文件未找到等。

statusText：返回HTTP状态码对应的文本信息。

详细作用如下：

XMLHttpRequest对象方法：

abort()：取消当前请求。

getAllResponseHeaders()：获取所有HTTP响应头字段。

getResponseHeader()：获取指定HTTP响应头字段的值。

open(method,url,async)：初始化一个请求，这里method是GET或POST，url是请求的URL，async表示是否使用异步，默认为true。

send(string)：发送请求，string是作为主体发送的数据（仅适用于POST方法）。

详细作用如下：

Ajax事件：

onreadystatechange：存储处理XMLHttpRequest的onreadystatechange事件的函数（每当readyState改变时都会调用该函数）。

onabort：Abort事件在通信被中止时发生。

onerror：Error事件在通信失败时发生（比如指定了无效网址）。

onloadstart：Loadstart事件在请求开始时发生。

onloadend：Loadend事件在请求结束时发生（无论成功还是失败）。

onprogress:Progress事件可用于跟踪下载进度。

下面以JSONPlaceHolder为数据服务，编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法：

首先，JSONPlaceholder 附带一组 6 种通用资源：

创建资源：这里使用的是POST方法，括号内为请求的url

更新资源：这里使用的是PUT方法。

修改和删除方法：

获取资源：

列出所有资源：