AJAX数据库网页网站设计是一种利用AJAX技术来实现数据库网页的设计方式。AJAX（Asynchronous JavaScript and XML）是一种在客户端和服务器之间进行异步通信的技术，可以在不重新加载整个页面的情况下更新部分内容。
AJAX数据库网页设计的优势在于可以使用户体验得到显著改善，因为它可以使用户无需重新加载整个页面就能够看到所请求的内容。此外，AJAX还可以减少服务器上的流量，因为它只会请求必要的数据而不是整个页面。
要使用AJAX来实现数据库网站设计，必须先将Web服务器上的数据存储在XML格式中。然后，使用JavaScript代码将XML格式的数据发送到Web服务器并将其返回到浏览器中。浏览器将XML格式的数据处理并显示出来。
// 向服务器请求XML格式的数据
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析XML格式的数据
var xmlDoc = xhr.responseXML;
// 处理XML格式的数据并显示出来
}
};
xhr.open("GET", "data.xml", true);
xhr.send();
}
数据库：数据库可视为电子化的文件柜-存储电子文件的处所，用户可以对文件中的数据进行新增，截取，更新，删除等操作。
常见的型关系数据库有MySQL，SQLSERVER，Oracle，Sybase，DB2等。
您可以在首页查找使用数据库的相关教程。
AJAX 可用来与数据库进行动态通信。
通过本节内容，你将了解 AJAX 动态加载数据库的相关知识。
下面的例子将演示网页如何通过 AJAX 从数据库读取信息：请在下面的下拉列表中选择一个客户：
当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.html?q="+str,true);
xmlhttp.send();
}showCustomer() 函数执行以下任务：
检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）
由上面的 JavaScript 调用的服务器页面是 PHP 文件，名为 "getcustomer.php"。
用 PHP 编写服务器文件也很容易，或者用其他服务器语言。请看用 PHP 编写的相应的例子。
"getcustomer.php" 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果：
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & """ & request.querystring("q") & """
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
为了清楚地说明使用AJAX从数据库访问信息很容易，我们将动态构建MySQL查询并在“ajax.html”上显示结果。在开始前，让我们先做好基础工作，使用以下命令创建表。
注：我们假设您有足够的权限执行以下MySQL操作。
CREATE TABLE "ajax_example" (
"name" varchar(50) NOT NULL,
"age" int(11) NOT NULL,
"sex" varchar(1) NOT NULL,
"wpm" int(11) NOT NULL,
PRIMARY KEY ("name")
) 现在使用以下SQL语句将以下数据转储到此表中：
INSERT INTO "ajax_example" VALUES ("Jerry", 120, "m", 20);
INSERT INTO "ajax_example" VALUES ("Regis", 75, "m", 44);
INSERT INTO "ajax_example" VALUES ("Frank", 45, "m", 87);
INSERT INTO "ajax_example" VALUES ("Jill", 22, "f", 72);
INSERT INTO "ajax_example" VALUES ("Tracy", 27, "f", 0);
INSERT INTO "ajax_example" VALUES ("Julie", 35, "f", 90);现在让我们拥有客户端HTML文件，即ajax.html，它将具有以下代码：
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById("ajaxDiv");
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var age = document.getElementById("age").value;
var wpm = document.getElementById("wpm").value;
var sex = document.getElementById("sex").value;
var queryString = "?age = " + age ;
queryString += "&wpm = " + wpm + "&sex = " + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = "myForm">
Max Age: <input type = "text" id = "age" /> <br />
Max WPM: <input type = "text" id = "wpm" /> <br />
Sex:
<select id = "sex">
<option value = "m">m</option>
<option value = "f">f</option>
</select>
<input type = "button" onclick = "ajaxFunction()" value = "Query MySQL"/>
</form>
<div id = "ajaxDiv">Your result will display here</div>
</body>
</html> 注：在Query中传递变量的方式是根据HTTP标准并具有formA。
URL?variable1 = value1;&variable2 = value2; 上面的代码将为您提供如下界面：
您的客户端脚本已准备就绪。现在，我们必须编写我们的服务器端脚本，它将从数据库中获取age，wpm和sex，并将其发送回客户端。
将以下代码放入文件“ajax-example.php”。
<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET["age"];
$sex = $_GET["sex"];
$wpm = $_GET["wpm"];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = "$sex"";
if(is_numeric($age))
$query .= " AND age <= $age";
if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
$display_string .= "<tr>";
$display_string .= "<td>$row[name]</td>";
$display_string .= "<td>$row[age]</td>";
$display_string .= "<td>$row[sex]</td>";
$display_string .= "<td>$row[wpm]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?> 现在尝试在Max Age或任何其他框中输入有效值（例如120），然后单击Query MySQL按钮。
SQL教程
Redis教程
MongoDB教程
React 组件 API在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:设置状态：setState替换状态：replaceState...
SQL SELECT TOP 子句SQL SELECT TOP 子句 SELECT TOP 子句用于规定要返回的记录的数目。 SELECT TOP 子句对于拥有数千条记录...
SQL DEFAULT 约束SQL DEFAULT 约束 DEFAULT 约束用于向列中插入默认值。 如果没有规定其他的值，那么会将默认值添加到所有的新记...
SQL CREATE INDEX 语句CREATE INDEX 语句用于在表中创建索引。 在不读取整个表的情况下，索引使数据库应用程序可以更快地查找数...
SQL 约束（Constraints） SQL 约束（Constraints） SQL 约束用于规定表中的数据规则。 如果存在违反约束的数据行为，行为会被约...
SQL RIGHT JOIN 关键字SQL RIGHT JOIN 关键字 RIGHT JOIN 关键字从右表（table2）返回所有的行，即使左表（table1）中没有匹配。...
SQL Server CONVERT() 函数 SQL Server Date 函数定义和用法 CONVERT() 函数是把日期转换为新数据类型的通用函数。 CONVERT() 函...
SQL INSERT INTO 语句INSERT INTO 语句用于向表中插入新记录。SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新记录。 SQ...
SQL ALTER TABLE 语句ALTER TABLE 语句 ALTER TABLE 语句用于在已有的表中添加、删除或修改列。 SQL ALTER TABLE 语法 如需在表...
