AJAX 之 PHP和数据库实现
ASP我不会,跳过(⊙o⊙)…
简单形式(原理极其重要)
<script type="text/javascript">
var xmlHttp;
//创建一个XmlHttpRequeset对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//开始一个请求
function startRequest(){
//调用上方函数
createXMLHttpRequest();
//事件句柄指向下一个函数
xmlHttp.onreadystatechange = handlestatechange;
xmlHttp.open("GET", "SimpleRespose.xml", true);
xmlHttp.Send(null);
}
function handlestatechange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
alert("The Server Replied with:" + xmlHttp.responseText)
}
}
}
script>
实现原理:
- 点击按钮,触发startRequest函数,执行createXMLHttpRequest();语句,创建一个xmlHttpRequest对象
- 此时xmlHttpRequest.readyState的值是0
- 再执行Open()语句,跳过xmlHttp.onreadystatechange=handlestatechange;(当作断点跳过,或函数指针理解)
- 此时xmlHttpRequest.readyState的值是0
- 然后运行xmlHttp.onreadystatechange = handlestatechange;
- 此时xmlHttpRequest.readyState的值是1
- 再执行Send()语句,跳过xmlHttp.onreadystatechange=handlestatechange;(当作断点跳过,或函数指针理解)
- 此时xmlHttpRequest.readyState的值是1
- 然后运行xmlHttp.onreadystatechange = handlestatechange;
- 此时xmlHttpRequest.readyState的值是2
- 再执行Open()语句,跳过xmlHttp.onreadystatechange=handlestatechange;(当作断点跳过,或函数指针理解)
- 此时xmlHttpRequest.readyState的值是2
- 然后运行xmlHttp.onreadystatechange = handlestatechange;
- 此时xmlHttpRequest.readyState的值是3
- 再执行Send()语句,跳过xmlHttp.onreadystatechange=handlestatechange;(当作断点跳过,或函数指针理解)
- 此时xmlHttpRequest.readyState的值是3
- 然后运行xmlHttp.onreadystatechange = handlestatechange;
- 此时xmlHttpRequest.readyState的值是4
我画分割线的部分,其实它一直在循环运行,不会停止,直到遇到handlestatechange()为止,才结束。
实例1:自定义showHint()函数
当用户在输入框中键入字符时,网页如何与 web 服务器进行通信
index_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str){
var xmlhttp;
//输入框为空 str.length==0,则该函数清空 txtHint 占位符的内容,并退出函数
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
//输入框不为空,先创建 XMLHttpRequest 对象
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
//再当服务器响应就绪时,点击标签为txtHint的文本框就执行showHint()函数(即本函数)
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//在"...php?q="+str中q会在php代码中调用
xmlhttp.open("GET","/Ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>
</body>
</html>
gethint.php
<?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";
//从URL获取q参数,获取到前面的str值
$q=$_GET["q"];
//如果q的长度大于0,则从数组中查找所有提示
if (strlen($q) > 0){
$hint="";
for($i=0; $i<count($a); $i++){
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))){
if ($hint==""){
$hint=$a[$i];
}else{
$hint=$hint." , ".$a[$i];
}
}
}
}
if ($hint == ""){
$response="未输入";
}else{
$response=$hint;
}
echo $response; //输出找到的类似匹配值
?>
实例1:自定义showCustomer()函数
演示网页如何通过AJAX从数据库读取信息
index_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str){
var xmlhttp;
//检查是否已选择某个客户。输入框为空 没有选择,则该函数清空 txtHint 占位符的内容,并退出函数
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","./getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" >
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>
</body>
</html>
getcustomer.php
这里不是mysql的表,用到了ADODB是一种 PHP 存取数据库的中间函式组件。我个人偏向PDO,因为我只会PDO和mysqli,emmm
下次更改的时候我换成mysqli的形式,这次就照抄了(已更改)
<?php
$q = isset($_GET["q"]) ? $_GET["q"] : '';
$mysqli=new mysqli('localhost','root',123456,'test',3307); //这里建议大家端口默认3306
$result=$mysqli->query("select * from client where company='".$q."'");
if (!$mysqli)
{
die('Could not connect: ' . mysqli_error($mysqli));
}
echo "<table border='1'>
<tr>
<th>id</th>
<th>姓名</th>
<th>公司</th>
</tr>";
while($row = $result->fetch_assoc())
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['company'] . "</td>";
echo "</tr>";
}
echo "</table>";
?>
test数据库、client数据表(用到PHPadmin管理)
效果图:
实例3:演示网页如何使用 AJAX 来读取来自 XML 文件的信息
演示网页如何通过AJAX从数据库读取信息
用到一个callback函数创建一个XMLHttpRequest,并从一个TXT文件中检索数据(callback函数即回调函数,上篇博客没有展开,这里说下)
- 如果网站上存在多个 AJAX 任务,就应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc){
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
//注意这个函数就是回调函数,以参数形式传递给另一个函数的函数
function myFunction(){
oadXMLDoc("/try/ajax/ajax_info.txt",function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html>
注意:cfunc出现两次的位置,类似于前文中简单形式的理解,但有所不同