PHP Ajax 教程及示例

什么是 Ajax？

AJAX 的全称是 Asynchronous JavaScript & XML。它是一种减少服务器和客户端之间交互的技术。它通过仅更新网页的一部分而不是整个网页来实现。异步交互由 JavaScript 启动。AJAX 的目的是在不刷新页面的情况下与服务器交换少量数据。

JavaScript 是一种客户端脚本语言。它由支持 JavaScript 的 Web 浏览器在客户端执行。JavaScript 代码仅在启用了 JavaScript 的浏览器中运行。

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

为什么使用 AJAX？

它允许开发丰富的交互式 Web 应用程序，就像桌面应用程序一样。
可以在用户填写表单时进行验证，而无需提交表单。这可以通过自动完成来实现。用户键入的单词会被提交到服务器进行处理。服务器会响应与用户输入匹配的关键字。
可用于根据一个下拉框的值来填充另一个下拉框。
可以从服务器检索数据，并且只更新页面的某个部分，而无需加载整个页面。这对于加载以下内容的网页部分非常有用：
推文
评论
访问该网站的用户等。

如何创建 PHP Ajax 应用程序

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

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

然后，我们将使用 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)”” 每次在文本框中键入一个键时都会执行 JavaScript 函数 showName。此功能称为自动完成。

步骤 2）创建框架页面

frameworks.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 脚本

auto_complete.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 和 6 以及其他高版本的 IE 和浏览器中都能正常工作。
“xmlhttp.onreadystatechange=function…” 检查 AJAX 交互是否完成且状态为 200，然后使用返回的结果更新 txtName span。

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

假设您已将文件 index.php 保存到 phututs/ajax 中，请浏览到 URL https:///phptuts/ajax/index.php

在文本框中键入字母 C，您将看到以下结果。

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

摘要

AJAX 是 Asynchronous JavaScript and XML 的缩写。
AJAX 是一种用于创建丰富的交互式应用程序的技术，它通过仅更新网页的一部分来减少客户端和服务器之间的交互。
Internet Explorer 5 和 6 版本使用 ActiveXObject 来实现 AJAX 操作。
Internet Explorer 7 及以上版本以及 Chrome、Firefox、Opera 和 Safari 等浏览器使用 XMLHttpRequest。