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状态码对应的文本信息。
详细作用如下:
![](https://i-blog.csdnimg.cn/blog_migrate/df1e831a5f8b415ce3a670a036ad4e63.png)
XMLHttpRequest对象方法:
abort():取消当前请求。
getAllResponseHeaders():获取所有HTTP响应头字段。
getResponseHeader():获取指定HTTP响应头字段的值。
open(method,url,async):初始化一个请求,这里method是GET或POST,url是请求的URL,async表示是否使用异步,默认为true。
send(string):发送请求,string是作为主体发送的数据(仅适用于POST方法)。
详细作用如下:
![](https://i-blog.csdnimg.cn/blog_migrate/0ee56ec3ee50c25bef8a5119b93bdf47.png)
Ajax事件:
onreadystatechange:存储处理XMLHttpRequest的onreadystatechange事件的函数(每当readyState改变时都会调用该函数)。
onabort:Abort事件在通信被中止时发生。
onerror:Error事件在通信失败时发生(比如指定了无效网址)。
onloadstart:Loadstart事件在请求开始时发生。
onloadend:Loadend事件在请求结束时发生(无论成功还是失败)。
onprogress:Progress事件可用于跟踪下载进度。
下面以JSONPlaceHolder为数据服务,编写案例,以进一步阐述Ajax及XMLHttpRequest对象的用法:
首先,JSONPlaceholder 附带一组 6 种通用资源:
![](https://i-blog.csdnimg.cn/blog_migrate/e40b1c591631875984598f958f8fbfdb.png)
创建资源:这里使用的是POST方法,括号内为请求的url
![](https://i-blog.csdnimg.cn/blog_migrate/f951d3ee44644da7f07c9dc5df01f5ab.png)
更新资源:这里使用的是PUT方法。
![](https://i-blog.csdnimg.cn/blog_migrate/eea1043c9f01894217ebbde8d454e08c.png)
修改和删除方法:
![](https://i-blog.csdnimg.cn/blog_migrate/782627976ef5be348933e9157022b9a6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/425c75c47433f33667f75ab4c53aa956.png)
获取资源:
![](https://i-blog.csdnimg.cn/blog_migrate/7cd37dfaa68742b77d0fbae7635cdcf2.png)
列出所有资源:
![](https://i-blog.csdnimg.cn/blog_migrate/fae91d71263e452bcc8d04259f5aac35.png)