免費(fèi)AI編程助手
ajax和數(shù)據(jù)庫操作
要清楚地說明了訪問使用Ajax從一個(gè)數(shù)據(jù)庫中的信息是多么容易，我們要建立動(dòng)態(tài)的MySQL查詢結(jié)果顯示對(duì)“ajax.html”。但在我們繼續(xù)之前，讓做基礎(chǔ)工作。使用以下命令創(chuàng)建一個(gè)表.
注: 我們建議你有足夠的權(quán)限來執(zhí)行下面的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`)
)
現(xiàn)在轉(zhuǎn)儲(chǔ)到這個(gè)表中使用下面的SQL語句的下列數(shù)據(jù)
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文件
現(xiàn)在，讓我們有我們的客戶端的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.value = 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>
注: 在查詢傳遞變量的方法是根據(jù)HTTP標(biāo)準(zhǔn)和表單
URL?variable1=value1;&variable2=value2;
服務(wù)器端PHP文件
所以，現(xiàn)在您的客戶端腳本已準(zhǔn)備就緒?，F(xiàn)在我們來寫我們的服務(wù)器端腳本，這會(huì)從數(shù)據(jù)庫中提取年齡，WPM和性別將其發(fā)送回客戶端。 “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;
?>
ajax實(shí)現(xiàn)與數(shù)據(jù)庫的異步交互
AJAX重點(diǎn)在于用戶體驗(yàn)，可以實(shí)現(xiàn)信息的異步傳輸，頁面不會(huì)刷新。
下面介紹一下用Ajax實(shí)現(xiàn)與數(shù)據(jù)庫的異步交互。Ajax中最核心的東西就是XMLHttpRequest對(duì)象。可以說沒有XMLHttpRequest就沒有Ajax。2000年以前的瀏覽器對(duì)XMLHttp的支持不夠，只有IE中才支持，所以大多的Web程序員都沒有關(guān)注它，但是2000年后XMLHttpRequest被各瀏覽器廠商用于自己的瀏覽器中，Mozilla和Safari把它采用為事實(shí)上的標(biāo)準(zhǔn)，主流瀏覽器都開始支持XMLHttpRequest對(duì)象。
（1）有關(guān)XMLHttpRequest對(duì)象的屬性。
1、onreadystatechange屬性。該屬性存有處理服務(wù)器響應(yīng)的函數(shù)。例如：
xmlHttp.onreadystatechange=function()
{
//我們可以在這里寫一些代碼
}
2、readystate屬性。該屬性存有服務(wù)器響應(yīng)的狀態(tài)信息，每當(dāng)狀態(tài)改變時(shí)，onreadystatechange就會(huì)被執(zhí)行。readystate有5個(gè)可能的值，分別為0、1、2、3、4。具體可參考：
3、responseText屬性?？梢酝ㄟ^這個(gè)來獲取服務(wù)器返回的數(shù)據(jù)。
（2）在javascript腳本中聲明和使用XMLHttpRequest對(duì)象。
不同的瀏覽器聲明XMLHttpRequest的聲明是不一樣的。
Firefox, Opera 8.0+, Safari是：new XMLHttpRequest();
IE是：new ActiveXObject("Microsoft.XMLHTTP");
（3）XMLHttpRequest的方法。
1、abort()方法。用來暫停與一個(gè)XMLHttpRequest對(duì)象相聯(lián)系的HTTP請(qǐng)求。從而把該對(duì)象復(fù)位到未初始狀態(tài)。
2、open()。可以初始化一個(gè)XMLHTTpRequest對(duì)象。
格式：open（string method，string url，Boolean asynch，string username，string password）；
參數(shù)：
method——必選參數(shù)，用于指明請(qǐng)求的HTTP方法（GET，POST，PUT，DELETE或HEAD）。
url——必選參數(shù)，表示請(qǐng)求目標(biāo)的url地址。
asynch——可選參數(shù)，表示采用同步還是異步方式，默認(rèn)為true。
username和password——可選參數(shù)，當(dāng)連接的服務(wù)器需要驗(yàn)證時(shí)用。
3、send()。該方法用來向服務(wù)器發(fā)送具體的請(qǐng)求。
格式：send(content) content：可選參數(shù)，發(fā)送的內(nèi)容。
PS：一般發(fā)送數(shù)據(jù)不要在send方法里傳數(shù)據(jù)，可以直接在open方法里的url中附上要傳遞的參數(shù)，這樣方便些。
（4）服務(wù)器端執(zhí)行腳本語言。（這里我用的是.aspx文件，所用語言為C#，也可以是其他的腳本文件，如：asp,jsp,php等）
XMLHttpRequest對(duì)象通過open方法可以打開一個(gè)url。
例如：Default.aspx?id=3 此url向Default.aspx傳遞了一個(gè)參數(shù)id，值為3。
服務(wù)器端程序：
通過：string ID= Request.QueryString["id"];獲取前臺(tái)頁面?zhèn)鬟f過來的id值3。
那么在后臺(tái)獲取了id的值，那我就能從數(shù)據(jù)庫某個(gè)表中找到這條數(shù)據(jù)（這里我用的數(shù)據(jù)庫是SQL2008）。假如通過ADO.NET方法連接數(shù)據(jù)庫huangyangzi，在數(shù)據(jù)表PL中找到了id號(hào)為3的這條記錄并提取出來賦值給一個(gè)變量str，再通過response.write(str);則可以將str的值返回給前臺(tái)壓面。
（5）前臺(tái)頁面獲取服務(wù)器處理后返回的數(shù)據(jù)。
假設(shè)前臺(tái)html頁面有:<div id="text"> </div>
js腳本中：
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementByIdx_x("text").innerHTML = xml.responseText; //xml是前面定義的 xmlHttpRequest
}
}
通過這樣的方法就能在id為text的div中輸出從服務(wù)器從數(shù)據(jù)庫中獲取的str的值了。
這個(gè)例子的核心是，在html頁面中通過javascript向服務(wù)器發(fā)送請(qǐng)求，異步傳輸數(shù)據(jù)。
更多建議：