Ajax初级入门指南：揭秘神奇的数据请求技术

前端

2023-03-26 14:38:24

Ajax 入门指南：在不刷新页面的情况下传输数据

什么是 Ajax？

想象一下一个不断更新的网站，无需重新加载页面。这就是 Ajax（异步 JavaScript 和 XML）的魅力所在。它允许你在不刷新整个页面的情况下更新网站的特定部分，从而提供更流畅、更具交互性的用户体验。

Ajax 的工作原理

Ajax 背后的技术栈包括 JavaScript、XML 和 XMLHttpRequest 对象。JavaScript 负责更新页面上的内容，XML 用于封装请求和响应数据，而 XMLHttpRequest 对象负责与服务器进行通信。

传递数据的不同方式

Ajax 有三种传递数据的方式：

JSON 字符串格式： 数据以 JSON 字符串的形式发送，这是在 Web 开发中广泛使用的一种数据格式。
JSON 格式： 与 JSON 字符串格式类似，但数据作为 JavaScript 对象发送。
标准参数模式： 数据以键值对的形式发送，通常用于表单数据。

使用 JSON 字符串格式

首先，创建一个 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

接下来，配置请求：

xhr.open("POST", "ajax_info.php", true);

然后，发送请求：

xhr.send("name=John");

最后，监听服务器响应：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
  }
};

示例：使用 Ajax 发送表单数据

考虑一个带有文本输入字段的表单。当用户在字段中输入信息并单击“提交”按钮时，你可以使用 Ajax 将信息发送到服务器并获取响应。

<form action="">
  <input type="text" id="name">
  <input type="submit" value="提交">
</form>

var xhr = new XMLHttpRequest();
xhr.open("POST", "ajax_info.php", true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    var data = JSON.parse(xhr.responseText);
    document.getElementById("result").innerHTML = data.message;
  }
};

var form = document.getElementById("form");
form.addEventListener("submit", function(e) {
  e.preventDefault();
  var name = document.getElementById("name").value;
  var data = "name=" + name;
  xhr.send(data);
});