Ajax 简明教程

AJAX - Database Operations

为了清楚地说明使用 AJAX 从数据库中访问信息有多么容易，我们将即时构建 MySQL 查询，并将结果显示在 “ajax.html” 上。但在此之前，让我们做一些基础工作。使用以下命令创建一个表。

NOTE − 我们假设您有足够的权限执行以下 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);

Client Side HTML File

现在，我们提供客户端 HTML 文件 ajax.html，其中将具有以下代码 −

Example

<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>

NOTE − 查询中传递变量的方法根据 HTTP 标准，并带有 formA。

URL?variable1 = value1;&variable2 = value2;

以上代码将向您提供以下屏幕 −

Output

在您进行输入后，您的结果将在此部分显示。

NOTE − 这是一个虚拟屏幕。

Server Side PHP File

您的客户端脚本已准备就绪。现在，我们必须编写我们的服务器端脚本，它将从数据库中提取 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 按钮。

在您进行输入后，您的结果将在此部分显示。

如果您已成功完成此课程，那么您就会知道如何同时使用 MySQL、PHP、HTML 和 Javascript 来编写 AJAX 应用程序。