AJAX使用教程图文详解（附视频）

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以在不影响网页的情况下，与服务器交换数据并更新部分网页内容。

（图片来源网络，侵删）

下面是一个详细的AJAX使用教程图文详解：

创建XMLHttpRequest对象

1、打开浏览器的开发者工具，输入以下代码创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

2、XMLHttpRequest对象有以下方法：

open(method, url, async)：初始化一个请求，参数method表示请求类型，如"GET"或"POST"；url表示请求的URL；async表示是否异步发送请求，默认为true。

xhr.open("GET", "example.php", true);

send()：发送请求，可以传递参数作为请求体。

xhr.send();

3、设置回调函数处理响应：

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 请求成功，处理响应数据
    console.log(xhr.responseText);
  } else if (xhr.readyState == 4) {
    // 请求失败，处理错误信息
    console.log("Error: " + xhr.status);
  }
};

GET请求示例

1、创建一个HTML文件，添加一个按钮和一个用于显示结果的元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>AJAX GET请求示例</title>
</head>
<body>
  <button id="getBtn">获取数据</button>
  <div id="result"></div>
  <script src="script.js"></script>
</body>
</html>

2、创建一个JavaScript文件（如上例中的script.js），编写以下代码：

var btn = document.getElementById("getBtn");
var resultDiv = document.getElementById("result");
btn.addEventListener("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      resultDiv.innerHTML = xhr.responseText;
    } else if (xhr.readyState == 4) {
      console.log("Error: " + xhr.status);
    }
  };
  xhr.open("GET", "example.php", true);
  xhr.send();
});

POST请求示例

1、修改HTML文件，添加一个表单元素：

<form id="postForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

2、修改JavaScript文件，编写以下代码：

var form = document.getElementById("postForm");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log("提交成功！");
  } else if (xhr.readyState == 4) {
    console.log("Error: " + xhr.status);
  }
};
form.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为，使用AJAX提交数据
  var data = {username: document.getElementById("username").value, password: document.getElementById("password").value};
  xhr.open("POST", "example.php", true); // 修改请求类型为POST，并设置请求头ContentType为application/xwwwformurlencoded，以传输表单数据（可选）
  xhr.setRequestHeader("ContentType", "application/xwwwformurlencoded"); // 如果需要发送表单数据，需要设置请求头ContentType为application/xwwwformurlencoded，并使用encodeURIComponent对表单数据进行编码（可选）
  xhr.send(encodeURIComponent(JSON.stringify(data))); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选）}); // 如果需要发送表单数据，需要将表单数据转换为JSON字符串，并使用encodeURIComponent进行编码（可选”); //如果不需要等待服务器响应完成就继续执行其他操作（例如动画），可以使用XMLHttpRequest对象的abort方法取消请求：xhr.abort();} else {console.log("Error: " + xhr.status);}');

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/410400.html

AJAX使用教程图文详解（附视频）

创建XMLHttpRequest对象

GET请求示例

POST请求示例

相关推荐

发表回复