Ajax及其应用

莫道桑榆晚❅

已于 2024-03-12 23:20:12 修改

阅读量711

点赞数 20

文章标签： ajax json 前端 express

于 2024-03-12 23:16:30 首次发布

本文链接：https://blog.csdn.net/m0_68428066/article/details/136641192

版权

一、Ajax工作原理进行分析

1、什么是Ajax

Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式、快速动态网页应用的网页开发技术。Ajax并不是一种新的编程语言，而是一种使用现有标准组合在一起使用的新方法。Ajax通过允许Web页面在用户与服务器交互时，向服务器发送异步请求，无需重新加载整个页面，从而提高了Web应用的响应速度和用户体验。最大的优势：无刷新获取数据。

2、什么是XML

XML是可扩展标记语言，被设计用来传输和存储数据。XML与HTML类似，不同的是HTML中的都是预定义标签，而XML中没有预定义标签（预定义标签是一种在编程、业务管理或其他场景中预先定义好的标记或符号，用于简化操作、提高可读性或实现特定的功能），全都是自定义标签，用来表示一些数据。

3、什么是JSON

由于JSON在简洁性（JSON的语法更为简洁和紧凑，减少了标记和语法元素的数量，使数据结构更清晰、更易读。相比之下，XML的语法较为繁琐，包含更多的标签和属性，可能导致数据表示不够紧凑）、数据量（JSON生成的数据量通常比XML小，因此在网络传输和存储方面具有优势。XML的冗余标签和属性可能增加数据的体积，而JSON的数据表示更为高效）、处理效率（JSON在解析和生成方面通常比XML更高效。由于JSON的语法更简单，解析速度更快，这对于需要快速处理大量数据的应用场景非常有利）、与JavaScript的互操作性（JSON与JavaScript天生具有良好的互操作性，可以直接被JavaScript解析为对象。这使得JSON在前端开发和数据交换方面非常便利，因为前端经常使用JavaScript进行数据处理和展示）以及数据结构映射等方面的优势，使得它在许多应用场景中逐渐替代了XML。用JSON表示：

4、Ajax的优缺点

（1）优点

可以无需刷新页面而与服务器端进行通信；允许根据用户事件来更新部分页面内容。

（2）缺点

没有浏览历史，不能回退；存在跨域问题（在一个域名下去请求另外一个域名的资源时，浏览器由于同源策略的限制，不能执行其他网站的脚本。具体来说，如果请求的域与该请求指向的资源所在的域不一致，就构成了跨域请求。这里的“域”是指协议、域名和端口号的组合，只要这三者中有任何一个不同，就是跨域请求）；SEO（即搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式）不友好。

5、HTTP协议请求报文与响应文本结构

HTTP协议（超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则）的请求和响应是构成HTTP通信的两个基本部分。

（1）HTTP请求报文

HTTP请求是由客户端（如浏览器）发送给服务器的，用于请求获取或操作服务器上的资源。一个HTTP请求通常包含以下几个部分：

请求行：包含请求方法（如GET、POST等）、请求的URI（统一资源标识符）和HTTP协议版本（如HTTP/1.1）。请求方法定义了请求的具体操作类型，如获取资源、提交数据等。
请求头：包含了一系列描述请求属性和客户端环境的键值对。这些头字段提供了关于请求的额外信息，如请求的来源、用户代理、接受的语言等。
请求体：对于某些请求方法（如POST、PUT），请求体包含了发送给服务器的数据。这些数据可以是表单数据、JSON对象等。

（2）HTTP响应报文

HTTP响应是服务器对客户端请求的回应。一个HTTP响应也包含几个部分：

状态行：包含HTTP协议版本、状态码和状态消息。状态码是一个三位数的数字，用于表示请求的处理结果，如200表示成功，404表示未找到资源等。状态消息是对状态码的文本描述。
响应头：与请求头类似，响应头包含了一系列描述响应属性和服务器环境的键值对。这些头字段提供了关于响应的额外信息，如内容的类型、长度、缓存策略等。
响应体：响应体包含了服务器返回给客户端的数据。这些数据可以是HTML页面、图片、JSON对象等，具体取决于请求的资源类型和服务器的配置。

6、Express框架的使用

7、Ajax的工作原理

（1）创建XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象，它提供了与服务器进行异步通信的能力。在创建XMLHttpRequest对象后，前端代码可以发送HTTP请求到服务器，并监听服务器的响应。

（2）创建HTTP请求

使用XMLHttpRequest对象，前端代码可以指定请求的类型（GET、POST等）、请求的URL以及任何需要发送到服务器的数据。

（3）发送请求到服务器

当请求创建好后，前端代码会调用XMLHttpRequest对象的相应方法将请求发送到服务器。这个过程是异步的，意味着浏览器不会等待服务器的响应而阻塞用户界面。

（4）服务器处理请求并返回响应

服务器接收到AJAX请求后，会执行相应的操作（如查询数据库、执行计算等），然后将结果作为HTTP响应返回给前端。

（5）处理服务器响应

前端代码通过XMLHttpRequest对象的回调函数来监听服务器的响应。当响应到达时，回调函数会被触发，前端代码可以读取响应内容，并根据需要对页面进行更新。

（6）更新页面内容

使用JavaScript，前端代码可以动态地修改页面的HTML、CSS或DOM结构，从而实现页面的局部更新。这样，用户就可以看到更新的内容，而无需重新加载整个页面。

8、AJAX基础案例

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

1、什么是XMLHttpRequest 对象

XMLHttpRequest 对象是一个用于发送 HTTP 请求到服务器的 JavaScript 对象。这个对象有许多属性、方法和事件，使得开发者能够更精确地控制 HTTP 请求和响应。

2、XMLHttpRequest 对象的属性

（1）readyState: 返回一个 XMLHttpRequest 对象的状态。它可以是以下值之一：

0指对象已创建，但尚未调用 open() 方法。

1指方法已被调用。

2指所有的响应头部都已经接收。

3指响应体正在接收中。

4指数据传输完成或请求已失败。

（2）response: 返回一个包含服务器响应的文本。

（3）responseText: 返回一个包含服务器响应的 DOMString。如果请求未成功，则返回 ""。

（4）responseXML: 返回一个包含服务器响应的 Document 对象。如果请求未成功，或响应的内容不能被解析为 XML 或 HTML，则返回 null。

（5）status: 返回服务器响应的 HTTP 状态码，如 200 表示成功，404 表示未找到。

（6）statusText: 返回服务器响应的 HTTP 状态文本。

3、XMLHttpRequest 对象的方法

（1）open(method, url, [async, user, password]): 初始化一个请求。参数包括 HTTP 方法（如 "GET" 或 "POST"），请求的 URL，是否异步处理（默认为 true），以及可选的用户名和密码用于认证。

（2）send([body]): 发送请求。对于 POST 请求，body 参数可以是包含要发送的数据的 Document 或 BodyInit 对象。对于 GET 请求，通常不需要 body 参数。

（3）setRequestHeader(header, value): 设置请求的 HTTP 头部。在调用 send() 之前调用此方法。

（4）getAllResponseHeaders(): 返回一个包含所有响应头部的字符串。

（5）getResponseHeader(header): 返回指定响应头部的值。

4、XMLHttpRequest 对象的事件

（1）onreadystatechange: 当 readyState 属性改变时触发。这是最常用的事件处理器，通常用于检查请求是否完成（readyState == 4）以及是否成功（status == 200）。

（2）onload: 当请求成功完成时触发。

（3）onerror: 当请求发生错误时触发。

（4）onabort: 当请求被用户或程序取消时触发。

（5）ontimeout: 当请求超时时触发（如果设置了超时时间）。

三、以JSONPlaceHolder为数据服务，进一步阐述Ajax及XMLHttpRequest对象的用法

1、JSONPlaceholder作为数据服务

使用JSONPlaceholder作为数据服务是一个很好的方式来演示XMLHttpRequest对象的使用，因为JSONPlaceholder提供了RESTful API，可以模拟从服务器获取和发送数据的过程。以下是一个简单的案例，演示了如何使用XMLHttpRequest对象来执行不同的HTTP请求，并处理响应。