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 >
<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管理）

AJAX原理之 PHP和数据库实现AJAX 之 PHP和数据库实现

效果图：

AJAX原理之 PHP和数据库实现AJAX 之 PHP和数据库实现

实例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出现两次的位置，类似于前文中简单形式的理解，但有所不同

AJAX原理之 PHP和数据库实现AJAX 之 PHP和数据库实现

AJAX 之 PHP和数据库实现

简单形式（原理极其重要）

实例1：自定义showHint（）函数

当用户在输入框中键入字符时，网页如何与 web 服务器进行通信

index_1.html

gethint.php

实例1：自定义showCustomer（）函数

演示网页如何通过AJAX从数据库读取信息

index_2.html

getcustomer.php

test数据库、client数据表（用到PHPadmin管理）

效果图：

实例3：演示网页如何使用 AJAX 来读取来自 XML 文件的信息

演示网页如何通过AJAX从数据库读取信息

继续阅读

艰难安装LDAP,SSL认证

Apache配置SSLApache配置SSL

《Linux命令行与Shell脚本编程大全第2版.布卢姆》pdf

MySQL的4种隔离级别？出现问题

配置apache支持PHP（win7）

XX系统实施过程问题总结

无组件上传图片到数据库中，最完整解决方案

【MySQL数据库】数据库索引事务1.索引2.事务

neo4j之cypher使用文档

Cloud Studio初体验

NOSQL安全攻击

mybatis_入门程序Mybatis入门

php 去掉字符串的最后一个字符及截取原字符串1,2,3,4,5,6,

登录plsql 报错 the account is locked --用户被锁

php——水印

SequoiaDB巨杉数据库C++驱动概述

AJAX原理 之 PHP和数据库实现AJAX 之 PHP和数据库实现

AJAX 之 PHP和数据库实现

简单形式（原理极其重要）

实例1：自定义showHint（）函数

当用户在输入框中键入字符时，网页如何与 web 服务器进行通信

index_1.html

gethint.php

实例1：自定义showCustomer（）函数

演示网页如何通过AJAX从数据库读取信息

index_2.html

getcustomer.php

test数据库、client数据表（用到PHPadmin管理）

效果图：

实例3：演示网页如何使用 AJAX 来读取来自 XML 文件的信息

演示网页如何通过AJAX从数据库读取信息

继续阅读

AJAX原理之 PHP和数据库实现AJAX 之 PHP和数据库实现