AJAX can be used for interactive communication with a database.
AJAX可以用來和數(shù)據(jù)端進(jìn)行數(shù)據(jù)的交互聯(lián)通。
AJAX Database Example
AJAX 數(shù)據(jù)庫實(shí)例
In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.
在以下的AJAX范例中，我們可以了解到一個(gè)網(wǎng)頁是如何用AJAX技術(shù)從數(shù)據(jù)端獲得信息的。
Select a Name in the Box Below
請(qǐng)?jiān)谙旅娴牟藛沃羞x擇一名字
AJAX Example Explained
AJAX 實(shí)例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的例子包含了一個(gè)簡(jiǎn)單的HTML表單和一關(guān)聯(lián)到JS的link:
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<body>
<form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste
<option value="NORTS ">North/South
<option value="WOLZA">Wolski Zajazd
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</body>
</html>
|
As you can see it is just a simple HTML form with a drop down box called "customers".
正如你所見這只是一個(gè)簡(jiǎn)單的HTML表單，里面有一簡(jiǎn)單的下拉菜單，其名稱為"customers"
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
表單下面包含一個(gè)名為"txtHint"的DIV，該DIV被用來做為反饋從WEB服務(wù)器檢索信息的占位符
When the user selects data, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.
當(dāng)用戶選擇數(shù)據(jù)，一個(gè)稱為 "showCustomer()"的函數(shù)被執(zhí)行了。這個(gè)函數(shù)由"onchange"事件所觸發(fā)。可以這么講：每當(dāng)用戶改變下拉菜但中的名字，函數(shù)就會(huì)執(zhí)行
The JavaScript code is listed below.
JS的代碼在下面
The AJAX JavaScript
AJAX的JS
This is the JavaScript code stored in the file "selectcustomer.js":
這是JS代碼，被保存在一叫做"selectcustomers.js"的文件內(nèi)：
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getcustomer.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
|
The AJAX Server Page
AJAX服務(wù)頁
The server paged called by the JavaScript, is a simple ASP file called "getcustomer.asp".
服務(wù)頁由JS所調(diào)遣，是一稱為"gecustomer.asp"的簡(jiǎn)單ASP文件
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
該頁使用的是針對(duì)IIS的VBS語言，當(dāng)然也可以改寫成像PHP或是其他一些服務(wù)語言
The code runs an SQL against a database and returns the result as an HTML table:
代碼運(yùn)行了SQL來從數(shù)據(jù)庫中將結(jié)果返回到HTML表格中：
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>")
|