PHP Ajax教程示例
什么是Ajax？
AJAX的完整格式是异步JavaScript和XML。它是一种减少服务器与客户端之间的交互的技术。它仅通过更新网页的一部分而不是整个页面来实现。异步交互是由JavaScript启动的。AJAX的目的是与服务器交换少量数据，而无需刷新页面。
JavaScript是一种客户端脚本语言。它由支持JavaScript的Web浏览器在客户端执行。JavaScript代码仅在启用JavaScript的浏览器中有效。
XML是可扩展标记语言的缩写。它用于以人类和机器可读格式对消息进行编码。就像HTML一样，但是允许您创建自定义标签。有关XML的更多详细信息，请参见有关XML的文章。
为什么要使用AJAX？
- 它允许像桌面应用程序一样开发丰富的交互式Web应用程序。
- 验证可以在用户不提交表单的情况下完成。这可以使用自动完成来实现。用户输入的单词将提交给服务器进行处理。服务器使用与用户输入内容匹配的关键字进行响应。
- 根据另一个下拉框的值，可用于填充下拉框
- 可以从服务器检索数据，并且仅更新页面的特定部分而不加载整个页面。这对于加载诸如以下内容的网页部件非常有用
- Tweets
- Commens
- 用户访问网站等
如何创建一个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范围。
步骤4）测试我们的PHP Ajax应用程序
假设您已保存文件index.php在phututs / ajax中，浏览至URL http：//localhost/phptuts/ajax/index.php
在文本框中键入字母C您将得到以下结果。
上面的示例演示了AJAX的概念以及它如何帮助我们创建丰富的交互应用程序。
概括
- AJAX是异步JavaScript和XML的首字母缩写
- AJAX是一种用于创建丰富的交互应用程序的技术，该应用程序通过仅更新部分网页来减少客户端与服务器之间的交互。
- Internet Explorer版本5和6使用ActiveXObject来实现AJAX操作。
- Internet Explorer 7及更高版本以及浏览器Chrome，Firefox，Opera和Safari使用XMLHttpRequest。
