解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据_业界新闻

发布时间:2024-08-03 07:57

阅读量:0

在当今互联网时代，网页早已不再是静态的信息展示平台，而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一，便是 AJAX（Asynchronous JavaScript and XML）。它允许网页在后台悄无声息地与服务器交换数据，无需刷新整个页面，便可实现内容的动态更新，为用户带来行云流水般的操作体验。

在 AJAX 出现之前，网页开发采用的是前后端不分离的模式。前端开发者编写好 HTML 和 CSS 结构后，将代码交给后端开发者。后端使用服务端技术，例如 Java、PHP 等，从数据库中查询数据，并将数据动态嵌入到 HTML 中，最终将渲染好的完整页面返回给浏览器。这种方式称为服务端渲染（SSR，Server-Side Rendering）。

然而，服务端渲染存在一个明显的缺陷：全局刷新。即使页面中只有一小部分内容需要动态更新，用户也不得不忍受整个页面重新加载的缓慢体验。想象一下，在一个电商网站上浏览商品列表，每次筛选或翻页都需要刷新整个页面，这将是多么令人沮丧的体验！

为了解决这个问题，AJAX 应运而生。AJAX 允许网页在后台与服务器进行异步通信，获取数据并更新页面内容，而无需刷新整个页面。这种方式称为局部刷新。于是前后端分离的开发模式诞生了。通过前端js把数据绑定到页面中（动态创建dom+appendChild或者字符串拼接+innerHTML）。

一、AJAX 工作原理：幕后的数据信使

AJAX 的核心在于 XMLHttpRequest 对象，它就像一位幕后的信使，在浏览器和服务器之间传递信息，实现数据的无缝交换。

创建信使： 网页通过 JavaScript 创建 XMLHttpRequest 对象，为数据传递做好准备。
配置信封： 使用 XMLHttpRequest 对象配置请求信息，包括：
- 请求方法 (Method)： 告知服务器要执行的操作，常用的有 GET (获取数据) 和 POST (提交数据)。
- 请求地址 (URL)： 指定要访问的服务器资源地址，例如 https://api.example.com/data。
- 请求头 (Headers)： 提供关于请求的额外信息，例如内容类型、授权信息等。
发送信件： 一切准备就绪，将配置好的请求发送到服务器。
服务器处理： 服务器接收请求，根据请求内容进行处理，并将处理结果封装成响应数据。
接收回信： 浏览器接收服务器返回的响应数据，并根据响应状态码判断请求是否成功。
处理回信：
- 若请求成功，则使用 JavaScript 处理响应数据，例如解析 JSON 数据，并将结果更新到网页上，实现内容的动态变化。
- 若请求失败，则进行错误处理，例如显示错误信息给用户。

二、代码示例：发送 AJAX 请求

让我们通过一个具体的代码示例，深入了解如何使用 JavaScript 发送 AJAX 请求：

function sendAjaxRequest() {   // 1. 创建 XMLHttpRequest 对象   const xhr = new XMLHttpRequest();    // 2. 配置请求   xhr.open('GET', 'https://api.example.com/data'); // 设置请求方法和地址   xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头    // 3. 处理响应   xhr.onload = function() {     if (xhr.status >= 200 && xhr.status < 300) {        // 判断响应状态码是否为成功 (2xx)       const data = JSON.parse(xhr.responseText); // 解析 JSON 数据       document.getElementById('target').textContent = data.message; // 更新网页内容     } else {       console.error('请求失败:', xhr.status);      }   };    // 4. 处理错误   xhr.onerror = function() {     console.error('请求出错');   };    // 5. 发送请求   xhr.send(); // GET 请求无需请求体，直接发送 }  sendAjaxRequest();

这段代码演示了一个简单的 AJAX 请求流程，包括创建请求对象、配置请求信息、发送请求、处理响应和错误等步骤。

三、XMLHttpRequest 对象：AJAX 的核心

XMLHttpRequest 对象提供了丰富的属性和方法，让我们能够灵活地控制 AJAX 请求的各个方面：

1. 属性：

readyState：表示请求的状态，例如 0 (未初始化) 、 1 (已打开)、 4 (请求完成) 等。
status：表示 HTTP 响应状态码，例如 200 (成功)、 404 (未找到) 等。
responseText：服务器返回的响应数据，以字符串形式表示。
responseXML：如果服务器返回的是 XML 数据，则可以使用该属性获取 XML DOM 对象。

2. 方法：

open(method, url, async, username, password)：初始化请求，设置请求方法、URL 等信息。 async 参数指定是否异步发送请求，默认为 true。
setRequestHeader(header, value)：设置请求头信息。
send(body)：发送请求。对于 POST 请求，可以在 body 参数中传递请求体数据。
abort(): 取消请求。