Ajax(Asynchronous JS and XML)是一种用于创建动态网页的技术,它可以通过在后台与服务器进行异步通信,能够在不刷新整个页面的情况下更新部分页面内容。

一、Ajax的主要工作原理大致分为以下几点:

1、用户与网页交互: 用户在浏览器中与页面进行交互,例如点击按钮、填写表单等。

2、触发事件: 当用户执行某些操作时(比如点击按钮),网页上的 JS 代码会捕获到这些事件。

3、发起请求: JS 代码通过XMLHttpRequest

(XHR——小黄人)对象创建一个HTTP请求,并指定需要请求的URL、请求方法(通常是GET或POST)、以及需要发送的数据(如果有的话)。这个请求被发送到服务器端。

4、服务器处理请求: 服务器接收到请求后,根据请求的内容执行相应的处理(比如查询数据库、处理数据等)。

5、服务器响应: 服务器处理完请求后,会将结果返回给客户端。这个响应通常是以XML、JSON或者HTML等格式返回,取决于请求中的需求。

6、更新页面: 客户端浏览器接收到服务器返回的响应后,JS代码会解析响应内容,然后利用DOM(文档对象模型)操作,更新页面上的相关元素内容,而无需刷新整个页面。

7、用户交互继续: 用户继续与页面进行交互,这个过程可以一直循环重复。

XMLHttpRequest 提供了一种在不刷新整个页面的情况下与服务器进行数据交换的方式,使得网页变得更加动态和交互性。

二、对于XMLHttpRequest对象的属性、方法和事件的一些见解:

1、属性

(1)Onreadystatechange:在XMLHttpRequest对象的状态发生变化时触发的事件处理函数,常用于监控请求的状态变化。

(2)readyState:表示XMLHttpRequest对象的状态,通常来说有以下数值含义:

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

(3)responseText: 返回从服务器接收的文本数据。

(4)responseXML: 返回从服务器接收的 XML 数据。

(5)status: 返回响应的HTTP状态码有2XX(成功状态码,表示服务器已成功接收到请求并进行处理),3XX(重定向状态码,表示服务器要求客户端重定向),4XX(客户端错误状态码,表示客户端的请求有非法内容),5XX(服务器错误状态码,表示服务器未能正常处理客户端的请求而出现意外错误)开头的状态码。

如 200 表示请求成功,304表示服务器内容没有更新,可以直接读取浏览器缓存,404 表示请求的资源不存在等。

(6)statusText: 返回HTTP状态码的文字描述。

2、方法

(1)open(method, url, async): 初始化请求,指定请求的方法、URL以及是否异步处理。常用的方法包括 GET、POST 等。

(2)send(data): 发送请求到服务器,可选参数 data 用于传递数据给服务器。如果是GET请求,通常将数据附加到URL中;如果是POST请求,数据会作为请求的正文发送。

(3)setRequestHeader(header, value): 设置 HTTP 请求头部。通常用于指定发送给服务器的一些额外信息,如 Content-Type、Authorization 等。

(4)abort(): 取消当前请求。

3、事件

(1)onreadystatechange: 当 readyState 属性发生变化时触发。可以利用该事件来监控请求的状态变化,并在合适的状态下处理响应数据。

(2)onload: 当请求成功完成时触发。

(3)onerror: 当请求发生错误时触发。比如网络错误、跨域等问题。

(4)ontimeout: 当请求超时时触发。

三、Json和XHR的实例

精彩内容

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。