AJAX can be used for interactive communication with a database.
AJAX可以用來和數(shù)據(jù)端進行數(shù)據(jù)的交互聯(lián)通。
AJAX Database Example
AJAX 數(shù)據(jù)庫實例
In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.
在以下的AJAX范例中，我們可以了解到一個網(wǎng)頁是如何用AJAX技術(shù)從數(shù)據(jù)端獲得信息的。
Select a Name in the Box Below
請在下面的菜單中選擇一名字
AJAX Example Explained
AJAX 實例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的例子包含了一個簡單的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".
正如你所見這只是一個簡單的HTML表單，里面有一簡單的下拉菜單，其名稱為"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.
表單下面包含一個名為"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.
當用戶選擇數(shù)據(jù)，一個稱為 "showCustomer()"的函數(shù)被執(zhí)行了。這個函數(shù)由"onchange"事件所觸發(fā)。可以這么講：每當用戶改變下拉菜但中的名字，函數(shù)就會執(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"的簡單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.
該頁使用的是針對IIS的VBS語言，當然也可以改寫成像PHP或是其他一些服務(wù)語言
The code runs an SQL against a database and returns the result as an HTML table:
代碼運行了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>")
|