HTML 表单

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>AJAX 数据库实例</title>

     <script src="selectuser.js"></script>

 </head>

 <body>

     <form>

 Select a User:

 <select name="users" onchange="showUser(this.value)">

 <option value="1">John</option>

 <option value="2">Linda</option>

 </select>

 </form>

 <p>

 <div id="txtHint"><b>User info will be listed here.</b></div>

 </p>

 </body>

 </html>

例子解释 - HTML 表单
正如您看到的，它仅仅是一个简单的 HTML 表单，其中带有名为 "users" 的下拉列表，这个列表包含了
姓名，以及与数据库的 "id" 对应的选项值。
表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。
当用户选择数据时，执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。
换句话说：每当用户改变下拉列表中的值，就会调用 showUser() 函数。

JavaScript(selectuser.js)

 var xmlHttp;

 function showUser(str)

 {

 xmlHttp=GetXmlHttpObject();

 if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request");

 return

 }

 var url="getuser.php";

 url=url+"?q="+str;

 url=url+"&sid="+Math.random();

 xmlHttp.onreadystatechange=stateChanged;

 xmlHttp.open("GET",url,true);

 xmlHttp.send(null);

 }

 function stateChanged()

 {

 if (xmlHttp.status==200 && xmlHttp.readyState==4)

 {

 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

 }

 }

 function GetXmlHttpObject()

 {

 var xmlHttp=null;

 try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

 catch (e)

 {

 //Internet Explorer

 try

 {

 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

 }

 catch (e)

 {

 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

 }

 }

 return xmlHttp;

 }

例子解释：

showUser() 函数
假如下拉列表中的项目被选择，函数执行：

  1. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
  2. 定义发送到服务器的 URL（文件名）
  3. 向 URL 添加带有下拉列表内容的参数 (q)
  4. 添加一个随机数，以防服务器使用缓存的文件
  5. 当触发事件时调用 stateChanged
  6. 通过给定的 URL 打开 XMLHTTP 对象
  7. 向服务器发送 HTTP 请求

stateChanged() 函数
每当 XMLHTTP 对象的状态发生改变，则执行该函数。
在xmlhttp.readyState==4 && xmlhttp.status==200时，用响应文本填充 txtHint 占位符 txtHint 的内容。

xmlhttp.readyState有5种状态：

  1. 请求未初始化（还没有调用 open()）。
  2. 请求已经建立，但是还没有发送（还没有调用 send()）。
  3. 请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
  4. 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
  5. 响应已完成；您可以获取并使用服务器的响应了。

参考：http://www.cnblogs.com/fsjohnhuang/articles/2345653.html

xmlhttp.status的状态码：

  1. 100-199 用于指定客户端应相应的某些动作。
  2. 200-299 用于表示请求成功。
  3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  4. 400-499 用于指出客户端的错误。
  5. 500-599 用于支持服务器错误。

参考：http://www.cnblogs.com/lxinxuan/archive/2009/10/22/1588053.html

GetXmlHttpObject() 函数
AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。
上面的代码调用了名为 GetXmlHttpObject() 的函数。
该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

PHP 页面（getuser.php）

该页面用 PHP 编写，并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：

 <?php

 $q=$_GET["q"];

 $con = mysql_connect('www.mytest.com', 'root', 'root');

 if (!$con)

 {

 die('Could not connect: ' . mysql_error());

 }

 mysql_select_db("test", $con);

 $sql="SELECT * FROM MyGuests WHERE id = '".$q."'";

 $result = mysql_query($sql);

 echo "<table border='1'>

 <tr>

 <th>id</th>

 <th>FirstName</th>

 <th>LastName</th>

 <th>email</th>

 <th>reg_date</th>

 </tr>";

 while($row = mysql_fetch_array($result))

 {

 echo "<tr>";

 echo "<td>" . $row['id'] . "</td>";

 echo "<td>" . $row['firstname'] . "</td>";

 echo "<td>" . $row['lastname'] . "</td>";

 echo "<td>" . $row['email'] . "</td>";

 echo "<td>" . $row['reg_date'] . "</td>";

 echo "</tr>";

 }

 echo "</table>";

 mysql_close($con);

 ?>

例子解释：
当查询从 JavaScript 被发送到这个 PHP 页面，会发生：

  1. PHP 打开到达 MySQL 服务器的连接
  2. 找到拥有指定姓名的 "user"
  3. 创建表格，插入数据，然后将其发送到 "txtHint" 占位符

PHP 和 AJAX MySQL 数据库实例的更多相关文章

  1. PHP、jQuery、AJAX和MySQL 数据库实例

    index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. Python MySQLdb模块连接操作mysql数据库实例_python

    mysql是一个优秀的开源数据库,它现在的应用非常的广泛,因此很有必要简单的介绍一下用python操作mysql数据库的方法.python操作数据库需要安装一个第三方的模块,在http://mysql ...

  3. 在一台机子上，安装，运行两mysql数据库实例

    为了方便测试,想要用到两个mysql数据库实例.以windows系统为例 当然安装第一个mysql数据库,很简单没什么说的.但是再要安装,运行mysql安装程序时,会提示,修复,卸载,重新安装. 这时 ...

  4. 批量获取mysql数据库实例指定参数的值

    需求:需要对比所有mysql数据库实例上面的指定参数配置情况,同时需要需要能看到如ip,端口,master or slave,毕竟主和从参数不一样还是有可能的. 说明:必须要有个数据库存储所有是数据库 ...

  5. shell脚本连接、读写、操作mysql数据库实例

    本文介绍了如何在shell中读写mysql数据库.主要介绍了如何在shell 中连接mysql数据库,如何在shell中创建数据库,创建表,插入csv文件,读取mysql数据库,导出mysql数据库为 ...

  6. python3连接MySQL数据库实例

    #python3连接MySQL实例 import pymysql """导入连接MySQL需要的包,没有安装pymysql需要先安装 使用命令行切换到python的安装路 ...

  7. 一分钟在云端快速创建MySQL数据库实例

    本教程将帮助您了解如何使用Azure管理门户迅速创建,连接,配置MySQL 数据库 on Azure.完成本教程后,您将在Azure上拥有一个示例MySQL数据库服务器,并了解如何使用管理门户执行基本 ...

  8. java连接mysql数据库实例

    做游戏客户端多一年多了,在大学学的java的SSH,基本上都忘完了,今天看了一下发现基本的连接数据库的都忘了...太可怕了这遗忘的速度. 所以写了个连接的例子吧..安装好mysql数据库之后新建了两张 ...

  9. python 之操作mysql 数据库实例

    对于python操作mysql 数据库,具体的步骤应为: 1. 连接上mysql host 端口号 数据库 账号 密码2. 建立游标3. 执行sql(注意,如果是update,insert,delet ...

随机推荐

  1. [置顶] kubernetes资源类型--deployment

    Deployment(中文意思为部署.调度)提供了一种更加简单的更新RC和Pod的机制,K8S版本1.2实现的.通过在Deployment中描述所期望的集群状态,Deployment Controll ...

  2. 设计模式之工厂模式之抽象工厂（php实现）

    github地址: git@github.com:ZQCard/design_pattern.git 抽象工厂模式: 先来认识下什么是产品族: 位于不同产品等级结构中,功能相关联的产品组成的家族.图中 ...

  3. 排序算法的实现（冒泡，选择，插入 O（N*N）--理解方法实现

    以前也看过很多排序算法的原理,每次都想自己实现一下,一直都再拖,现在着牛课网学习算法课程,希望自己能够坚持练习. //对于一个int数组,请编写一个选择冒泡算法,对数组元素排序. //给定一个int数 ...

  4. Android Scroll具体解释(二)：OverScroller实战

    作者: ztelur 联系方式:segmentfault,csdn.github 本文仅供个人学习,不用于不论什么形式商业目的,转载请注明原作者.文章来源.链接,版权归原文作者全部.  本文是andr ...

  5. Nginx:管理HTTP模块的配置项

    参考资料<深入理解Nginx> 一个nginx.conf的例子 http { mytest_num ; server { server_name A; listen ; mytest_nu ...

  6. 苹果版小黄车(ofo)app主页菜单效果

    代码地址如下:http://www.demodashi.com/demo/12823.html 前言: 最近又是公司项目上线一段时间了,又是到了程序汪整理代码的节奏了.刚好也用到了ofo主页菜单的效果 ...

  7. 使用FREDATED引擎实现跨实例訪问

    跨数据库server.跨实例訪问是比較常见的一种訪问方式,在Oracle中能够通过DB LINK的方式来实现. 对于MySQL而言,有一个FEDERATED存储引擎与之相相应.相同也是通过创建一个链接 ...

  8. 解决eclipse中overlaps the location of another project: 'xxxx'

    找遍网络发现各种解释,最常见的一种是: new -> android project -> create project from exist source出现如下错误信息:Invalid ...

  9. Android 关于SD的操作

    1 http://www.cnblogs.com/shaoyangjiang/archive/2012/03/09/2388178.html 2

  10. &lt;!DOCTYPE&gt;奇葩的问题

    作用:<!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本号进行编写的指令. 1.:<!DOCTYPE> 声明没有结束标签. ...