这两天在实验楼学习ajax，后台是用php写的，下面我将三个实战项目分享出来，也方便我以后随时查看。
第一个项目我写的注释比较详细，第二个和第三个注释就写的比较少了，因为用的方法都差不多；这三个项目都是我们经常看到的，针对我们做测试的朋友来说，大部分是不知道这个到底是怎么实现的（当然包括我自己）；我们经过不断的学习代码，知道功能是怎么实现的，我们测试起来也就轻松得多，也就不会提出一些很小白的问题，被developer笑了。
好了下面就是三个项目，中间有什么问题希望大家不吝赐教：
一、环境准备：
1、搭建php开发环境, WampServer：
安装详情：http://jingyan.baidu.com/article/2d5afd69efe9cf85a3e28e54.html
2、准备数据
连接mysql数据库之后、创建数据库，表：
创建数据库 ajaxtest
create database ajaxtest default charset utf8;
use ajaxtest;
创建ajaxtable表：
create table ajaxtable(
userid int(11) not null auto_increment
username varchar(50) not null,
userpass varchar(50) not null,
userage int(11) not null,
usersex varchar(1) not null,
primary key(userid)
);
插入数据：
insert into ajaxtable values(1,‘张三‘,‘lisi‘,‘28‘,‘女‘);
insert into ajaxtable values(2,‘张一‘,‘lisi‘,‘18‘,‘男‘);
insert into ajaxtable values(3,‘张二‘,‘lisi‘,‘18‘,‘女‘);
insert into ajaxtable values(4,‘王一‘,‘lisi‘,‘18‘,‘男‘);
insert into ajaxtable values(5,‘王二‘,‘lisi‘,‘18‘,‘女‘);
insert into ajaxtable values(6,‘王三‘,‘lisi‘,‘18‘,‘女‘);
insert into ajaxtable values(7,‘王四‘,‘lisi‘,‘18‘,‘女‘);
insert into ajaxtable values(8,‘王五‘,‘lisi‘,‘18‘,‘女‘);
insert into ajaxtable values(9,‘李四‘,‘lisi‘,‘18‘,‘男‘);
insert into ajaxtable values(10,‘六三‘,‘lisi‘,‘18‘,‘女‘);
insert into ajaxtable values(11,‘杨思‘,‘lisi‘,‘18‘,‘男‘);
二、Ajax—PHP实战1：
目的：在页面输入年龄、性别值，利用ajax发送请求，查询出满足条件的数据：
结果演示：
我的项目路径是：
所以访问的url：http://localhost/ajaxtest/ajaxpro1/index.html
创建index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>ajaxtest</title> 6 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 ????<script language="JavaScript" type="text/javascript"> 8 ????????function ajaxFunction(){ 9 ????????????//该函数将页面的输入年龄和性别的值发送到ajaxtest.php中，然后返回查询的结果10 ????????????var xmlhttp;//定义一个xmlhttp变量11 ????????????try{12 ????????????????xmlhttp = new XMLHttpRequest();//一个XMLHttpRequest对象13 ????????????}catch (e){14 ????????????????try{15 ????????????????????xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//这个主要是针对ie浏览器低版本的16 ????????????????}catch (e){17 ????????????????????alert("你的游览器不支持");18 ????????????????????return false;19 ????????????????}20 ????????????}21 //22 // ???????????如果readyState状态改变，那就会触发onreadystatechange事件23 // ???????????readyState的状态：24 // ???????????0: 请求未初始化25 // ???????????1: 服务器连接已建立26 // ???????????2: 请求已接收27 // ???????????3: 请求处理中28 // ???????????4: 请求已完成，且响应已就绪29 ????????????xmlhttp.onreadystatechange = function () {30 ????????????????if(xmlhttp.readyState == 4){31 ????????????????????//如果readyState的状态为4，获取id为ajaxDiv的元素32 ????????????????????var ajaxDisplay = document.getElementById(‘ajaxDiv‘);33 ????????????????????//将查询的结果返回，显示34 ????????????????????ajaxDisplay.innerHTML = xmlhttp.responseText;35 ????????????????}36 ????????????}37 ????????????//获取id为userage的元素，也就是年龄的值38 ????????????var userage = document.getElementById(‘userage‘).value;39 ????????????//获取id为usersex的元素，也就是性别的值40 ????????????var usersex = document.getElementById(‘usersex‘).value;41 ????????????//拼接请求的url42 ????????????var url = "?userage=" + userage;43 ????????????url += "&usersex=" + usersex;44 ????????????//准备请求45 ????????????xmlhttp.open("GET", "ajaxtest.php" + url, true);46 ????????????//将请求发送到服务器47 ????????????xmlhttp.send();48 ????????}49 ????</script>50 51 </head>52 <body>53 <form name="myform">54 ????Age: <input type="text" name="userage" id="userage"><br><br>55 ????Sex: <select id="usersex" name="usersex">56 ????<option value="男">男</option>57 ????<option value="女">女</option>58 </select>59 ????<br><br>60 ????<input type="button" onclick="ajaxFunction()" value="执行">61 </form>62 <div id="ajaxDiv">显示执行ajax结果</div>63 </body>64 </html>创建：ajaxtest.php
1 <?php 2 /** 3 ?* Created by PhpStorm. 4 ?* User: xxx 5 ?* Date: 2016/10/10 6 ?* Time: 10:52 7 ?*/ 8 ?9 error_reporting(0);//禁用错误报告10 # database message11 // 数据库连接信息12 $dbhost = "localhost";13 $dbuser = "root";14 $dbpswd = "123456";15 $dbname = "ajaxtest";16 17 // 获取ajax请求传入的参数18 $userage = $_GET[‘userage‘];19 $usersex = $_GET[‘usersex‘];20 21 $mysqli = new mysqli();22 // 连接数据库23 $mysqli->connect($dbhost, $dbuser, $dbpswd, $dbname);24 if($mysqli->error){25 ????echo "连接数据库失败<br>".$mysqli->error;26 }27 // 设置utf8编码28 $mysqli->set_charset("utf8");29 // sql语句30 $query = "select * from ajaxtable where usersex = ‘$usersex‘";31 32 # 判断userage是否是个数字33 if(is_numeric($userage)){34 ????$query .= " AND userage <= ‘$userage‘";35 }36 # 查询数据37 $result = $mysqli->query($query);38 # 显示列表头39 $display_string = "<table>";40 $display_string .= "<tr>";41 $display_string .= "<th>用户名</th>";42 $display_string .= "<th>年龄</th>";43 $display_string .= "<th>性别</th>";44 $display_string .= "</tr>";45 46 # 显示内容47 while ($row = $result->fetch_array()){48 ????$display_string .= "<tr>";49 ????$display_string .= "<td>".$row[‘username‘]."</td>";50 ????$display_string .= "<td>".$row[‘usersex‘]."</td>";51 ????$display_string .= "<td>".$row[‘userage‘]."</td>";52 ????$display_string .= "</tr>";53 }54 $display_string .= "</table>";55 echo "SQL语句为：".$query."<br>";56 echo $display_string;57 58 // 释放查询结果59 $result->close();60 // 关闭mysql连接61 $mysqli->close();三、Ajax—PHP实战2：
目的：输入用户名，验证数据库是否存在，有相应的提示
url: http://localhost/ajaxtest/ajaxpro2/index.html
执行结果：
项目路径：
创建index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Ajax表单验证</title> 6 ????<!--引入css文件：mycss.css--> 7 ????<link href="mycss.css" rel="stylesheet" type="text/css"> 8 ????<script> 9 ????????function showHint() {10 ????????????// 获取用户名输入框的值11 ????????????var str = document.getElementById("username").value;12 ????????????if (str.length == 0){13 ????????????????// 如果输入框值为空的时候，提示14 ????????????????document.getElementById("showmsg").innerHTML = "用户名不能为空";15 ????????????????return;16 ????????????}else {17 ????????????????// ajax发送请求18 ????????????????var xmlhttp = new XMLHttpRequest();19 ????????????????xmlhttp.onreadystatechange = function () {20 ????????????????????if (xmlhttp.readyState == 4 && xmlhttp.status == 200){21 ????????????????????????document.getElementById(‘showmsg‘).style.display = "block";22 ????????????????????????document.getElementById(‘showmsg‘).innerHTML = xmlhttp.responseText;23 ????????????????????}24 ????????????????}25 ????????????????xmlhttp.open("GET", "ajaxtest.php?username=" + str, true);26 ????????????????xmlhttp.send();27 ????????????}28 29 ????????}30 ????</script>31 </head>32 <body>33 ????<div class="container">34 ????????<form id="contact" method="post">35 ????????????<input type="text" placeholder="用户名" id="username" name="username" onblur="showHint()">36 ????????????<div id="showmsg" style="display: none"></div>37 ????????</form>38 ????</div>39 </body>40 </html>创建mycss.css文件：
1 * { 2 ????margin: 0; 3 ????padding: 0; 4 ????box-sizing: border-box; 5 ????-webkit-box-sizing: border-box; 6 ????-moz-box-sizing: border-box; 7 ????-webkit-font-smoothing: antialiased; 8 } 9 10 body {11 ????font-family: Arial,sans-serif;12 ????font-weight: 300;13 ????font-size: 12px;14 ????line-height: 30px;15 }16 17 .container {18 ????max-width: 400px;19 ????position: relative;20 }21 22 #contact {23 ????background: #F9F9F9;24 ????padding: 25px;25 ????margin: 5px 0;26 }27 28 #contact input[type="text"] {29 ????border: 1px solid #AAA;30 ????width: 200px;31 ????height: 25px;32 }33 34 #contact input:focus, #contact textarea:focus {35 ????outline:0;36 ????border:1px solid #999;37 }38 ::-webkit-input-placeholder {39 ????color:#888;40 }41 :-moz-placeholder {42 ????color:#888;43 }44 ::-moz-placeholder {45 ????color:#888;46 }47 :-ms-input-placeholder {48 ????color:#888;49 }创建ajaxtest.php文件：
1 <?php 2 /** 3 ?* Created by PhpStorm. 4 ?* User: xxx 5 ?* Date: 2016/10/11 6 ?* Time: 9:00 7 ?*/ 8 error_reporting(0); 9 $dbhost = "localhost";10 $dbuser = "root";11 $dbpswd = "123456";12 $dbname = "ajaxtest";13 14 $checkmsg = $_GET[‘username‘];15 16 $myselect = new mysqli();17 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);18 $myselect->set_charset("utf8");19 $sql = "select * from ajaxtable where username=‘$checkmsg‘";20 $result = $myselect->query($sql);21 22 $rownum = $result->num_rows;23 //echo $rownum;24 if($rownum >= 1){25 ????echo ‘<font color="red">用户名已存在</font>‘;26 }else{27 ????echo ‘<font color="green">用户名可用</font>‘;28 }29 30 $result->close();31 $myselect->close();四、Ajax—PHP实战3：
目的：根据输入的值进行搜索，显示出搜索结果，并且可以点击下拉框中的值可以跳转到新的页面；也可以根据输入的值，点击搜索按钮，进入结果页面。
结果演示：
项目路径：
访问Url：http://localhost/ajaxtest/ajaxpro3/index.html
创建index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Ajax搜索</title> 6 ????<link href="mycss.css" rel="stylesheet" type="text/css"> 7 ????<script> 8 ????????function showHint(str) { 9 ????????????if(str.length==0){10 ????????????????document.getElementById("showmsg").innerHTML = "";11 ????????????????return;12 ????????????}else {13 ????????????????var xmlhttp = new XMLHttpRequest();14 ????????????????xmlhttp.onreadystatechange = function () {15 ????????????????????if(xmlhttp.readyState == 4 && xmlhttp.status == 200){16 ????????????????????????document.getElementById("showmsg").style.display = "block";17 ????????????????????????document.getElementById("showmsg").innerHTML = xmlhttp.responseText;18 ????????????????????}19 ????????????????}20 ????????????????xmlhttp.open("GET","ajaxtest.php?keywords=" + str,true);21 ????????????????xmlhttp.send();22 ????????????}23 ????????}24 ????</script>25 </head>26 <body>27 ????<form action="result.php" method="get">28 ????????<input type="text" name="keywords" id="keywords" onkeyup="showHint(this.value)">29 ????????<input type="submit" name="submit" id="submit" value="搜索">30 ????????<div id="showmsg" style="display: none"></div>31 ????</form>32 33 </body>34 </html>创建mycss.css
1 body { 2 ????color: #555; 3 } 4 ?5 #keywords { 6 ????width: 485px; 7 ????height: 28px; 8 ????margin: 0px; 9 ????font-size: 14px;10 }11 12 #showmsg {13 ????display: block;14 ????border: solid 1px #B0B0B0;15 ????width: 487px;16 ????line-height: 28px;17 ????font-size: 14px;18 }19 20 #submit{21 ????width: 90px;22 ????height: 30px;23 }24 25 a:link{ text-decoration: none; color: blue}26 a:active{ text-decoration: blink;}27 a:visited {text-decoration: none; color: green}28 a:hover{ text-decoration: underline; color: red}创建ajaxtest.php
1 <?php 2 /** 3 ?* Created by PhpStorm. 4 ?* User: LSH 5 ?* Date: 2016/10/11 6 ?* Time: 11:00 7 ?*/ 8 error_reporting(0); 9 $dbhost = "localhost";10 $dbuser = "root";11 $dbpswd = "123456";12 $dbname = "ajaxtest";13 14 $checkmsg = $_GET[‘keywords‘];15 16 $myselect = new mysqli();17 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);18 $myselect->set_charset("utf8");19 $sql = "select * from ajaxtable where username LIKE ‘%$checkmsg%‘";20 $result = $myselect->query($sql);21 22 $rownum = $result->num_rows;23 //echo $rownum;24 if($rownum < 1){25 ????echo "数据库无数据";26 }else if($rownum == 1){27 ????$row = $result->fetch_array();28 ????echo "<a href=‘result.php?keywords=".$row[‘username‘]."‘>".$row[‘username‘]."</a>";29 }else{30 ????while ($row = $result->fetch_array()){31 ????????echo "<a href=‘result.php?keywords=".$row[‘username‘]."‘>".$row[‘username‘]."</a>"."<br>";32 ????}33 }34 35 $result->close();36 $myselect->close();创建result.php:
1 <?php 2 /** 3 ?* Created by PhpStorm. 4 ?* User: LSH 5 ?* Date: 2016/10/11 6 ?* Time: 11:00 7 ?*/ 8 error_reporting(0); 9 $dbhost = "localhost";10 $dbuser = "root";11 $dbpswd = "123456";12 $dbname = "ajaxtest";13 14 $checkmsg = $_GET[‘keywords‘];15 16 $myselect = new mysqli();17 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);18 $myselect->set_charset("utf8");19 $sql = "select * from ajaxtable where username LIKE ‘%$checkmsg%‘";20 $result = $myselect->query($sql);21 22 //echo $sql;23 ?>24 <!DOCTYPE html>25 <html lang="en">26 <head>27 ????<meta charset="UTF-8">28 ????<title>查询结果</title>29 ????<link href="mycss.css" rel="stylesheet" type="text/css">30 </head>31 <body>32 <?php33 //echo $result->num_rows;34 ????while ($row = $result->fetch_array()){35 ????????echo "<div><h1>姓名:$row[username]</h1><p>年龄:$row[userage],性别:$row[usersex]</p></div><br>";36 ????}37 $result->close();38 $myselect->close();39 ?>40 </body>41 </html>Ajax PHP项目实战
原文地址：http://www.cnblogs.com/shitaotao/p/7653346.html