html文件中的代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="student.js"></script>
<link rel=stylesheet type="text/css" href="student.css">
</head><body>
<div id="title">
<!--标题栏-->
学生信息管理系统
</div><div id="data">
<!--学生数据显示模块-->
</div><div id="search">
<!--查询所有学生资料-->
<button type="button" onclick="showData()">查询所有学生记录</button>
</div><div id="add">
<!--增加记录栏-->
增加记录<br/>
姓名<input id="Name" type="text" >
学号<input id="Id" type="text" >
年龄<input id="Age" type="text" >
<button type="button">增加</button>
</div><div id="delete">
<!--删除记录栏-->
删除记录<br/>
序号<input id="order" type="text" >
<button type="button">删除</button>
</div></body></html>js文件中的代码function showData()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("data").innerHTML=xmlhttp.responseText;
}
else document.write("error");
}
xmlhttp.open("GET","student.php",true);
xmlhttp.send();
}php文件中的代码<?php
/**************************************************/
//链接mysql数据库并测试能否成功
$host = "localhost";
$user = "root";
$password = "19911013";
$link = mysql_connect($host,$user,$password);
if(!$link) echo "error";
/**************************************************/
/**************************************************/
//创建数据库students,创建数据库中的表Information
mysql_query("CREATE DATABASE students",$link);
mysql_select_db("students",$link);
$sql = "CREATE TABLE Information
(
Name varchar(10),
Id char(10),
Age int
)";
mysql_query($sql,$link);
//向表Information中插入数据
mysql_select_db("students",$link);
/**************************************************/
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Peter','u201018001','18')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Tom','u201018002','19')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Mary','u201018003','19')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('John','u201018004','20')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Danny','u201018005','18')");
/**************************************************/
/**************************************************/
//以表格的形式输出students数据库Information表中的数据
mysql_select_db("students",$link);
$out = mysql_query("SELECT * FROM Information");
echo "<table border='1'>
<tr>
<th>Name</th>
<th>StudentId</th>
<th>Age</th>
</tr>";
while($row = mysql_fetch_array($out))
{
echo "<tr>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Id'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "</tr>";
}
echo "</table>";
/**************************************************/
mysql_close($link);
?>这个实现的功能很简单 ,就是点击 查询所有学生信息按钮 显示学生信息。 但是xmlhttp.readyState==4 && xmlhttp.status==200 总是无法实现!
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="student.js"></script>
<link rel=stylesheet type="text/css" href="student.css">
</head><body>
<div id="title">
<!--标题栏-->
学生信息管理系统
</div><div id="data">
<!--学生数据显示模块-->
</div><div id="search">
<!--查询所有学生资料-->
<button type="button" onclick="showData()">查询所有学生记录</button>
</div><div id="add">
<!--增加记录栏-->
增加记录<br/>
姓名<input id="Name" type="text" >
学号<input id="Id" type="text" >
年龄<input id="Age" type="text" >
<button type="button">增加</button>
</div><div id="delete">
<!--删除记录栏-->
删除记录<br/>
序号<input id="order" type="text" >
<button type="button">删除</button>
</div></body></html>js文件中的代码function showData()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("data").innerHTML=xmlhttp.responseText;
}
else document.write("error");
}
xmlhttp.open("GET","student.php",true);
xmlhttp.send();
}php文件中的代码<?php
/**************************************************/
//链接mysql数据库并测试能否成功
$host = "localhost";
$user = "root";
$password = "19911013";
$link = mysql_connect($host,$user,$password);
if(!$link) echo "error";
/**************************************************/
/**************************************************/
//创建数据库students,创建数据库中的表Information
mysql_query("CREATE DATABASE students",$link);
mysql_select_db("students",$link);
$sql = "CREATE TABLE Information
(
Name varchar(10),
Id char(10),
Age int
)";
mysql_query($sql,$link);
//向表Information中插入数据
mysql_select_db("students",$link);
/**************************************************/
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Peter','u201018001','18')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Tom','u201018002','19')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Mary','u201018003','19')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('John','u201018004','20')");
mysql_query("INSERT INTO Information (Name,Id,Age)
VALUES ('Danny','u201018005','18')");
/**************************************************/
/**************************************************/
//以表格的形式输出students数据库Information表中的数据
mysql_select_db("students",$link);
$out = mysql_query("SELECT * FROM Information");
echo "<table border='1'>
<tr>
<th>Name</th>
<th>StudentId</th>
<th>Age</th>
</tr>";
while($row = mysql_fetch_array($out))
{
echo "<tr>";
echo "<td>" . $row['Name'] . "</td>";
echo "<td>" . $row['Id'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "</tr>";
}
echo "</table>";
/**************************************************/
mysql_close($link);
?>这个实现的功能很简单 ,就是点击 查询所有学生信息按钮 显示学生信息。 但是xmlhttp.readyState==4 && xmlhttp.status==200 总是无法实现!
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("data").innerHTML=xmlhttp.responseText;
}
else retrun; //document.write("error");
}你只需能检测到成功返回即可,前面的过度过程不是你需要的,并不是错误!
html文档加载完毕后,document 对象将关闭写功能。其后的任何 document.write 都将产生新的 document(新页面)