AJAX 与 ASP/PHP 实例

通过 AJAX 和服务器端语言（如 ASP 或 PHP）结合，可以实现无刷新动态更新页面内容。下面分别展示如何在 ASP 和 PHP 中处理 AJAX 请求。

1. AJAX 与 ASP 示例

步骤：通过 JavaScript 使用 AJAX 向 ASP 后台发送请求，并从 ASP 返回数据。

前端 (JavaScript + AJAX)

// 使用 XMLHttpRequest 向 ASP 页面发送请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "getData.asp", true);  // 假设 ASP 页面是 getData.asp

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;  // 获取响应文本
        console.log("从 ASP 返回的数据:", response);
        document.getElementById("output").innerHTML = response;  // 在网页上显示返回的数据
    }
};

xhr.send();

后端 (ASP – getData.asp)

<%
' 这是 ASP 页面，返回一些数据给前端
Response.ContentType = "text/plain"  ' 设置响应内容类型为纯文本
Response.Write("Hello from ASP!")
%>

说明：

  • 前端的 JavaScript 使用 XMLHttpRequest 对象发送 GET 请求到 getData.asp。
  • ASP 页面接收请求后，返回 “Hello from ASP!” 字符串。
  • 前端通过 xhr.responseText 获取响应数据并在页面中显示。

2. AJAX 与 PHP 示例

步骤：通过 JavaScript 使用 AJAX 向 PHP 后台发送请求，并从 PHP 返回数据。

前端 (JavaScript + AJAX)

// 使用 XMLHttpRequest 向 PHP 页面发送请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "getData.php", true);  // 假设 PHP 页面是 getData.php

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;  // 获取响应文本
        console.log("从 PHP 返回的数据:", response);
        document.getElementById("output").innerHTML = response;  // 在网页上显示返回的数据
    }
};

xhr.send();

后端 (PHP – getData.php)

<?php
// 这是 PHP 页面，返回一些数据给前端
echo "Hello from PHP!";
?>

说明：

  • JavaScript 通过 XMLHttpRequest 向 getData.php 发送 GET 请求。
  • PHP 页面返回一段文本 “Hello from PHP!”。
  • 前端 JavaScript 通过 xhr.responseText 获取响应并显示在网页上。

3. AJAX POST 请求（用于发送数据）

除了 GET 请求，还可以通过 POST 请求向 ASP 或 PHP 页面发送数据。

前端 (JavaScript + AJAX POST)

// 使用 XMLHttpRequest 向 PHP 页面发送 POST 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitData.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText;  // 获取响应文本
        console.log("从 PHP 返回的数据:", response);
        document.getElementById("output").innerHTML = response;  // 在网页上显示返回的数据
    }
};

// 发送数据
xhr.send("name=JohnDoe&age=30");

后端 (PHP – submitData.php)

<?php
// 获取 POST 数据
$name = $_POST['name'];
$age = $_POST['age'];

// 返回响应
echo "Name: " . $name . ", Age: " . $age;
?>

说明：

  • JavaScript 使用 XMLHttpRequest 发送一个 POST 请求，并通过 send() 方法发送数据 name=JohnDoe&age=30。
  • PHP 页面接收 POST 数据并返回响应 "Name: JohnDoe, Age: 30"。

4. AJAX 和 JSON 数据交互（更常见的方式）

在实际开发中，前后端数据通常使用 JSON 格式进行交互，这样更方便处理复杂数据。

前端 (JavaScript + AJAX + JSON)

// 使用 XMLHttpRequest 向 PHP 页面发送 POST 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitData.php", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);  // 解析 JSON 响应
        console.log("从 PHP 返回的 JSON 数据:", response);
        document.getElementById("output").innerHTML = "Name: " + response.name + ", Age: " + response.age;
    }
};

// 发送 JSON 数据
var data = JSON.stringify({ name: "JohnDoe", age: 30 });
xhr.send(data);

后端 (PHP – submitData.php)

<?php
// 获取 JSON 数据
$data = json_decode(file_get_contents("php://input"));

// 返回 JSON 响应
$response = array(
    "name" => $data->name,
    "age" => $data->age
);

echo json_encode($response);
?>

说明：

  • 前端 JavaScript 使用 JSON.stringify() 方法将数据对象转换为 JSON 格式，并发送 POST 请求。
  • PHP 页面通过 file_get_contents("php://input") 获取原始 JSON 数据，并通过 json_decode() 解析它。
  • PHP 返回一个包含 JSON 数据的响应，前端再通过 JSON.parse() 解析并展示。

总结

  1. ASP 示例：使用 XMLHttpRequest 发送请求并获取来自 ASP 的响应。
  2. PHP 示例：类似地，使用 XMLHttpRequest 发送请求并获取来自 PHP 的响应。
  3. POST 请求：通过 POST 发送数据到服务器，使用 application/x-www-form-urlencoded 或 application/json 格式。
  4. JSON 数据：现代 AJAX 应用常常使用 JSON 格式进行数据交换，简化了复杂数据的处理。

通过这些简单的 AJAX 和服务器端（ASP/PHP）交互，你可以在网站中实现动态数据加载、表单提交等功能，无需刷新页面，提升用户体验。