在本 PHP 教程中,您将学习 PHP 中的所有 AJAX。我们将详细讨论 AJAX 的类型、PHP AJAX 连接、使用 AJAX 渲染页面等。
AJAX 是异步 JavaScript 和 XML 的缩写。AJAX 是一种使用 XML、HTML、CSS 和 Javascript 开发更好、更快、更具交互性的在线应用程序的新技术。传统的 Web 应用程序使用同步请求从服务器发送和接收数据。这意味着您填写一个表单,按下提交,然后被发送到一个新页面,其中包含来自服务器的更新信息。当您在 AJAX 中触摸提交按钮时,JavaScript 将向服务器发送请求,分析结果,并更新当前屏幕。从最纯粹的形式来看,用户根本不知道有任何数据正在传输到服务器。
为了说明 PHP 与 AJAX 的结合,我们正在创建一个具有预定义名称的脚本,并且我们尝试在不重新加载当前页面的情况下,在字段中输入指定名称时显示建议。
<html>
<head>
<script>
function showSuggestion(str) {
if (str.length == 0) {
document.getElementById('txt')[removed] = '';
return;
} else { var xmlhttp = new XMLHttpRequest(); xmlhttp. () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('txt')[removed] = this.responseText;
}
};
xmlhttp.open('GET', 'getnames.php?q=' + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body> <p><b>Enter the name in the input field below:</b></p> <form acti >
<label for="fname">First name:</label>
<input
type="text"
id="fname"
name="fname"
/>
</form>
<p>Suggestions: <span id="txt"></span></p>
</body>
</html>
<?php
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
$q = $_REQUEST["q"];
$hint = "";
if ($q !== "") {
$q = strtolower($q);
$len = strlen($q);
foreach ($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
echo $hint === "" ? "no suggestion" : $hint;
?>
输出
在上面的示例中,我们可以看到建议是在不重新加载当前网页的情况下发生的,这是借助 AJAX 完成的。我们已经在数组中定义了一些名称,并在 AJAX 脚本中将输入的字符与数组中的字符进行比较。
AJAX 能够与 XML 文件保持完整。我们可以通过示例演示 AJAX 和 XML 的交互。
<html>
<head>
<script>
function showCD(str) {
if (str == '') {
document.getElementById('txtHint')[removed] = '';
return;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} xmlhttp. () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('txtHint')[removed] = xmlhttp.responseText;
}
};
xmlhttp.open('GET', 'getcourse.php?q=' + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Select a Course: <select name="cds" >
<option value="">Select a course:</option>
<option value="Python">Python</option>
<option value="PHP">PHP</option>
<option value="JavaScript">JavaScript</option>
<option value="GO">GO</option>
</select>
</form>
<div id="txtHint"><b>Course info will be listed here...</b></div>
</body>
</html>
<?php
$q = $_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("catalog.xml");
$x = $xmlDoc->getElementsByTagName('COURSE');
for ($i = 0; $i<=$x->length-1; $i++) {
if ($x->item($i)->nodeType == 1) {
if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {
$y = ($x->item($i)->parentNode);
}
}
}
$cd = ($y->childNodes);
for ($i = 0;$i<$cd->length;$i++) {
if ($cd->item($i)->nodeType == 1) {
echo("" . $cd->item($i)->nodeName . ": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("
");
}
}
<CATALOG>
<SUBJECT>
<COURSE>Python</COURSE>
<COUNTRY>India</COUNTRY>
<COMPANY>learnetutorials.com</COMPANY>
</SUBJECT>
<SUBJECT>
<COURSE>PHP</COURSE>
<COUNTRY>India</COUNTRY>
<COMPANY>learnetutorials.com</COMPANY>
</SUBJECT>
<SUBJECT>
<COURSE>JavaScript</COURSE>
<COUNTRY>India</COUNTRY>
<COMPANY>learnetutorials.com</COMPANY>
</SUBJECT>
<SUBJECT>
<COURSE>GO</COURSE>
<COUNTRY>India</COUNTRY>
<COMPANY>learnetutorials.com</COMPANY>
</SUBJECT>
</CATALOG>
输出