AJAX开发简略 (第一部分)

AJAX开发简略 (第一部分)

AJAX (Asynchronous JavaScript and XML) 是一种用于创建快速动态网页的技术，它通过在后台与服务器进行数据交换，使网页不需要重新加载就可以更新特定部分的内容。在本文中，我们将学习如何使用 AJAX 来创建动态页面。本篇文章将分为两个部分，第一部分重点讲解 AJAX 的基础知识，第二部分将介绍如何使用 AJAX 和后端语言（如 PHP、Python 等）进行数据交互。

AJAX的工作原理

AJAX 的工作原理非常简单。当用户与网页交互时，JavaScript 可以发起一个请求到服务器，获取数据并更新页面的特定部分，而不必刷新整个页面。这可以极大地提高页面的响应速度，并提高用户体验。

AJAX 主要依赖下面两个对象：

• XMLHttpRequest 对象：可以与服务器进行数据交换，并更新页面的特定部分。
• DOM 对象：可以通过 JavaScript 来更新 HTML 代码。

编写一个基本的 AJAX 程序

下面是一个基本的 AJAX 程序，它使用 XMLHttpRequest 对象来获取服务器数据，并使用 DOM 对象来更新 HTML 代码：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 设置事件处理程序
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 更新页面元素
    document.getElementById("demo").innerHTML = xhr.responseText;
  }
};
// 打开一个新的 HTTP 请求
xhr.open("GET", "ajax_info.txt", true);
// 发送请求
xhr.send();

上述代码中，XMLHttpRequest 对象的 onreadystatechange 事件处理程序会在服务器响应请求时被触发，判断请求状态是否成功（使用 readyState 和 status 属性），并更新指定的页面元素。其中 demo 是一个 ID 为 demo 的元素，用于将服务器响应数据显示在页面上。

AJAX的应用示例

下面是两个使用 AJAX 技术的常见示例：

获取服务器数据并更新页面

<!-- 假设有一个 ID 为 demo 的元素 -->
<button onclick="loadDoc()">点击我</button>
<div id="demo"></div>

<script>
function loadDoc() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      document.getElementById("demo").innerHTML = xhr.responseText;
    }
  }
  xhr.open("GET", "ajax_info.txt", true);
  xhr.send();
}
</script>

上述代码中，当点击按钮时，loadDoc() 函数将调用 XMLHttpRequest 对象来获取 ajax_info.txt 文件的内容，并将其更新到页面中 ID 为 demo 的元素上。

向服务器提交数据

<!-- 假设有一个名为 "myForm" 的表单 -->
<form id="myForm" onsubmit="sendData()">
  <input type="text" name="name" value="John"><br>
  <input type="text" name="age" value="25"><br>
  <input type="submit" value="提交">
</form>

<script>
function sendData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      alert(xhr.responseText);
    }
  }
  xhr.open("POST", "submitdata.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  var data = document.getElementById("myForm");
  xhr.send(data);
}
</script>

上述代码中，当用户点击提交按钮时，sendData() 函数将使用 XMLHttpRequest 对象来异步提交表单数据，并将结果输出到 alert 中。注意在 xhr.send() 方法中，需要传递表单数据作为参数。

小结

本篇文章介绍了 AJAX 的基本知识和应用示例。AJAX 技术可以显著提升网页性能，并提高用户体验。但是 AJAX 技术并不容易上手，需要对 JavaScript 和 DOM 等技术有一定的了解。在下一篇文章中，我们将探讨如何使用 AJAX 和后端语言进行数据交互。

声明： 以上示例仅供参考，请在实际应用中谨慎使用。