AJAX是什么？
- AJAX代表异步JavaScript和XML。AJAX是一种利用XML，HTML，CSS和Java Script创建更好，更快，更具交互性的Web应用程序的新技术。
- 传统的Web应用程序使用同步请求向服务器传输信息并从服务器传输信息。还需要填写表单，点击提交，然后使用服务器的新信息定向到新页面。
- 使用AJAX进行提交时，JavaScript将向服务器发出请求，解释结果并更新当前屏幕。 在最纯粹的意义上，用户永远不会知道任何事情甚至传输到服务器。
有关完整的AJAX学习，请参阅AJAX教程。
PHP和AJAX示例
为了更演示地说明使用Ajax和PHP来访问数据库信息，我们将动态构建MySQL查询，并在ajax.html上显示结果。 但是在开始之前，使用以下命令创建一个表。
注 - 假设有足够的权限执行以下MySQL操作。
use testdb;
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 ('Maxsu', 120, 'm', 20);
INSERT INTO `ajax_example` VALUES ('Curry', 75, 'm', 44);
INSERT INTO `ajax_example` VALUES ('Kobe', 45, 'm', 87);
INSERT INTO `ajax_example` VALUES ('Allen', 22, 'f', 72);
INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0);
INSERT INTO `ajax_example` VALUES ('Lily', 35, 'f', 90);
客户端HTML文件
现在创建一个HTML文件：ajax.html，使用以下代码 -
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Ajax示例</title>
</head>
<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 queryString = "?age=" + age ;
queryString += "&wpm=" + wpm;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = 'myForm'>
最大年龄: <input type = 'text' id = 'age' /> <br />
最高分数: <input type = 'text' id = 'wpm' />
<br />
<input type = 'button' onclick = 'ajaxFunction()' value = '查询MySQL表数据'/>
</form>
<hr/>
<div id = 'ajaxDiv'>Ajax查询结果会显示在这里...</div>
</body>
</html>
注 - 在查询中传递变量的方法是根据HTTP标准并且具有以下格式 -
URL?variable1=value1;&variable2=value2;
上面的代码会生成一个如下所示的界面 -
现在尝试在“最大年龄”或其他框中输入有效值，然后单击“查询MySQL表数据”按钮。
使用JQuery改写Ajax
JQuery中封装了Ajax的代码，使用起来更方便和简单，创建一个文件：ajax2.html ，代码如下 -
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Ajax示例</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var queryString = "?age=" + age ;
queryString += "&wpm=" + wpm;
$.get("ajax-example.php" + queryString, function( data ) {
$("#ajaxDiv").html( data );
});
}
//-->
</script>
<form name = 'myForm'>
最大年龄: <input type = 'text' id = 'age' /> <br />
最高分数: <input type = 'text' id = 'wpm' />
<br />
<input type = 'button' onclick = 'ajaxFunction()' value = '查询MySQL表数据'/>
</form>
<hr/>
<div id = 'ajaxDiv'>Ajax查询结果会显示在这里...</div>
</body>
</html>
输出结果与ajax.html 相同。
通过本小节的学习，你已经知道如何使用MySQL，PHP，HTML和Javascript来编写Ajax应用程序。
