AJAX can be used for interactive communication with a database.
AJAX可以用来和数据端进行数据的交互联通。
AJAX Database Example
AJAX 数据库实例
In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.
在以下的AJAX范例中，我们可以了解到一个网页是如何用AJAX技术从数据端获得信息的。
Select a Name in the Box Below
请在下面的菜单中选择一名字
Select a Customer: Alfreds Futterkiste North/South Wolski Zajazd
Customer info will be listed here.
客户信息将被罗列在这。*实际操作请前往W3Schools
AJAX Example Explained
AJAX 实例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的例子包含了一个简单的HTML表单和一关联到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 simple 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 hints retrieved from the web server.
表单下面包含一个名为"txtHint"的DIV，该DIV被用来做为反馈从WEB服务器检索信息的占位符
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.
当用户选择数据，一个称为 "showCustomer()"的函数被执行了。这个函数由"onchange"事件所触发。可以这么讲：每当用户改变下拉菜但中的名字，函数就会执行
The JavaScript code is listed below.
JS的代码在下面
The AJAX JavaScript
AJAX的JS
This is the JavaScript code stored in the file "selectcustomers.js":
这是JS代码，被保存在一叫做"selectcustomers.js"的文件内：
var xmlHttp
function showCustomer(str)
{
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(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(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion
