PHP Ajax 教程与示例

⚡ 智能摘要

PHP 中的 Ajax 允许网页与服务器交换少量数据，并在不完全重新加载页面的情况下更新部分内容。本教程将构建一个实时框架搜索，并解释经典的 XMLHttpRequest 方法和现代的 Fetch API 替代方案。

🔄 什么是 Ajax： Ajax，异步 Java脚本和 XML，通过与服务器交换数据来更新页面的一部分，而无需完全刷新。
⚡ 为什么要使用它： Ajax 为网页提供了丰富的桌面级功能，例如自动完成、实时验证和关联下拉菜单。
🖥️ 客户端和服务器： Java脚本在浏览器中运行，并调用一个 PHP 脚本，该脚本仅返回更新页面所需的数据。
🔍 即时搜寻： onkeyup 处理程序会将每次按键发送到 PHP 脚本，该脚本会立即返回匹配的框架名称。
📜 XMLHttpRequest： 传统方法会创建一个 XMLHttpRequest 对象，并在请求完成后读取 responseText。
🆕 获取 API： 现代代码用基于 Promise 的 fetch 函数取代了 XMLHttpRequest，从而生成更简洁、更易读的请求。
🤖 人工智能辅助： AI 工具可以将旧的 XMLHttpRequest 代码转换为 fetch 或 axios，并帮助调试失败的 Ajax 请求。

什么是阿贾克斯？

AJAX的 代表异步 JavaScript XML 是一种减少服务器和客户端之间交互的技术。它通过仅更新网页的一部分而非整个网页来实现这一点。异步交互由以下方式发起： Java脚本。AJAX 的目的是在不刷新页面的情况下与服务器交换少量数据。

JavaScript 是一种客户端脚本语言。它由支持该语言的 Web 浏览器在客户端执行。 Java脚本。 Java脚本代码仅适用于具有 Java已启用脚本。

XML XML是Extensible Markup Language（可扩展标记语言）的缩写。它用于以人类和机器可读格式对消息进行编码。它类似于HTML，但允许您创建自定义标签。有关XML的更多详细信息，请参阅相关文章。 XML.

为什么使用 AJAX？

它允许开发ping 功能丰富、交互性强的Web应用程序，就像桌面应用程序一样。
用户填写表单但未提交时，即可进行验证。这可以通过自动完成功能实现。用户输入的文字会被提交到服务器进行处理，服务器会返回与用户输入内容匹配的关键词。
它可以根据另一个下拉框的值来填充下拉框。
可以从服务器检索数据，并且只需更新页面的特定部分而无需加载整个页面。这对于加载以下内容的网页部件非常有用：
- 鸣叫
- 备注
- 网站访问用户及类似实时数据。

如何创建 PHP Ajax 应用程序

我们将创建一个简单的应用程序，允许用户搜索流行的 PHP MVC 框架。

我们的应用程序将有一个文本框，用户可以在其中输入框架的名称。

然后我们将使用 AJAX 进行搜索，找到匹配项，并在搜索表单下方显示框架的完整名称。

步骤 1）创建索引页

的index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

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

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

这里，

“onkeyup=”showName(this.value)””执行 Java每次在文本框中输入字符时，脚本函数 showName 都会执行。此功能称为自动完成。

步骤 2）创建框架页面

框架.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>

步骤 3）创建 JS 脚本

自动完成.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

这里，

“if (str.length == 0)”检查字符串的长度。如果长度为0，则脚本的其余部分不会执行。
“if (window.XMLHttpRequest)…” Internet Explorer 5 和 6 使用 ActiveXObject 实现 AJAX。其他版本和浏览器，例如 Chrome 和 Firefox 使用 XMLHttpRequest。这段代码确保我们的应用程序能够在 IE 5 和 IE 6 以及现代浏览器中正常运行。
“xmlhttp.onreadystatechange=function…”检查 AJAX 交互是否完成且状态是否为 200，然后用返回的结果更新 txtName span。

步骤 4）测试我们的 PHP Ajax 应用程序

假设您已将 index.php 文件保存在 phptuts/ajax 目录下，请浏览至该目录。 URL http://localhost/phptuts/ajax/index.php

在文本框中输入字母 C。您将得到以下结果。

以上示例展示了 AJAX 的概念，以及它如何帮助我们创建丰富的交互式应用程序。

使用 Fetch API 实现现代 AJAX

上面的 XMLHttpRequest 对象仍然有效，但其针对旧版 Internet Explorer 的 ActiveXObject 分支已不再需要。现代浏览器提供了基于 Promise 的 Fetch API，它可以用更少的代码发出相同的请求。

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

这个版本的功能相同：它将输入的文本发送到 frameworks.php，并将响应放入 txtName span 元素中。它还使用 encodeURIComponent 安全地转义输入，并且其 Promise 链很容易扩展，可以使用 catch 代码块进行错误处理。

常见问题

同步请求会阻塞浏览器，直到服务器响应，导致页面冻结。异步请求则在后台运行，因此页面保持响应，并在数据到达时更新。Ajax 使用的是异步模型。

使用 fetch 时，传递第二个参数来设置 POST 请求的方法和请求体，然后在 PHP 中读取 $_POST 值。使用 XMLHttpRequest 时，调用 open('POST', url)，设置 Content-Type 标头，然后发送编码后的数据。

CORS（跨域资源共享）会阻止浏览器向其他域发出请求，除非该服务器发送正确的 Access-Control-Allow-Origin 标头。可以在 PHP 端添加此标头，或者调用同源身份验证。 URL 要解决这个问题。

是的。粘贴 XMLHttpRequest 代码，AI 可以使用基于 Promise 的 fetch API 或 axios 重写它，添加错误处理，并保持相同的行为。由于响应处理略有不同，请测试结果。

是的。分享请求代码和浏览器控制台或网络错误信息，人工智能就能发现错误。 URL如果出现 CORS 阻塞、缺少参数或服务器错误，请建议尝试的修复方法。