基于 XMLHttpRequest 的 Ajax 与 PHP 交互原理解析及示例

Ajax 核心原理与对象创建

Ajax 应用程序依赖于 HTML、JavaScript、DOM 和 DHTML 的组合。其核心在于利用后台服务器与浏览器进行少量数据交换，从而更新网页内容，避免整页重载。

1. 创建 XMLHttpRequest 对象

由于不同浏览器对 XMLHttpRequest 的支持存在历史差异，通常需要编写兼容代码：

• IE 浏览器支持： 使用 ActiveXObject。

// 针对早期 IE 版本
var xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

• 其他现代浏览器： 直接使用构造函数。

// 标准浏览器支持
var xmlHttp = new XMLHttpRequest();

在实际开发中，建议先检测是否存在 XMLHttpRequest 属性，若不存在则尝试创建 ActiveXObject，以确保最大程度的兼容性。

XMLHttpRequest 关键方法与事件

完成对象实例化后，需按顺序执行以下操作来实现异步通信：

第1步：配置请求 (open)

使用 open() 方法初始化连接。此方法并不发送请求，仅设置参数。

xmlHttp.open(method, url, async);

• method：请求类型，如 GET 或 POST。
• url：服务器端的脚本地址。
• async：布尔值。设为 true 表示异步请求（推荐），false 为同步。

第2步：绑定状态变化监听 (onreadystatechange)

指定回调函数，用于在请求状态发生变化时执行后续逻辑。

xmlHttp.onreadystatechange = callbackFunction;

第3步：发送请求 (send)

触发网络传输。对于 GET 请求，参数通常放在 URL 中；对于 POST 请求，需在 send(data) 中传入数据体。

xmlHttp.send(null); // GET 请求通常传 null

获取结果

在回调函数中，通过 xmlHttp.responseText 获取服务器返回的纯文本数据，或通过 responseXML 获取 XML 数据。

Ajax 与 PHP 交互实战示例

以下是一个最简单的异步交互案例：前端点击链接，发起 GET 请求至 do.php，PHP 接收参数并输出，JS 将结果写入页面。

1. 前端 JavaScript 封装 (test.js)

统一封装对象的创建与请求发送：

var xmlHttp;

// 初始化 XMLHttpRequest 对象
function S_xmlhttprequest(){
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    } else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}

// 发起请求
function php100(url){
    S_xmlhttprequest();
    // 打开GET连接，传入参数id
    xmlHttp.open("GET","do.php?id="+url,true);
    // 绑定回调
    xmlHttp.onreadystatechange=byphp;
    // 发送请求
    xmlHttp.send(null);
}

// 回调处理函数
function byphp(){
    // 确保请求已完成且成功
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var result = xmlHttp.responseText;
        document.getElementById('php100').innerHTML = result;
    }
}

2. 后端 PHP 逻辑 (do.php)

接收前端传来的 id 并进行简单处理：

<?php
// 获取 GET 参数 id，注意实际项目中应做好防注入处理
$id = @$_GET['id'];

// 简单的循环输出示例
for($i=1; $i<10; $i++){
    echo $id . " - Loop " . $i . "; ";
}
?>

3. 前端 HTML 页面 (test.html)

引入 JS 库并放置触发元素：

<script src="test.js" type="text/javascript"></script>

<!-- 触发按钮 -->
<a href="#" onClick="php100(1)">获取 ID=1 的数据</a> &nbsp;||
<a href="#" onClick="php100(2)">获取 ID=2 的数据</a> &nbsp;||
<a href="#" onClick="php100(3)">获取 ID=3 的数据</a>

<!-- 数据显示区域 -->
<div id="php100"></div>

运行流程说明：

1. 用户点击链接，触发 php100(1)。
2. S_xmlhttprequest() 初始化对象。
3. 建立到 do.php?id=1 的异步连接。
4. PHP 执行脚本并返回字符串。
5. byphp() 接收响应，并通过 innerHTML 更新 #php100 区域的显示内容。

以上就是基于 XMLHttpRequest 的 Ajax 与 PHP 交互的详细内容，更多关于前端异步通信与后端数据处理资料的关注本站其它相关文章！