AJAX Basic
AJAX基础
AJAX HOME
AJAX首页
AJAX Intro
AJAX简介
AJAX Request
AJAX请求
AJAX Example
AJAX实例
AJAX Browsers
AJAX浏览器
AJAX XMLHttpRequest
AJAX XMLHttpRequest对象
AJAX Server
AJAX服务器端
AJAX Server Script
AJAX服务器脚本
AJAX Advanced
AJAX高阶
AJAX Suggest
AJAX建议
AJAX Source
AJAX源码
AJAX Database
AJAX数据库
AJAX XML File
AJAX XML文件
AJAX ResponseXML
AJAX响应XML
AJAX Examples
AJAX范例
AJAX Database Example
AJAX数据库实例
AJAX can be used for interactive communication with a database.
AJAX同样可以用于与数据库进行交互。
AJAX database example
AJAX数据库实例
The following example will demonstrate how a web page can fetch information from a database with AJAX technology.
接下来的例子我们将演示网页如何利用AJAX技术从数据库中获取数据的。
Select a customer in the drop-down box below:
从如下的下拉框中选择客户：
AJAX example explained
AJAX实例解释
The example above contains a simple HTML form and a link to a JavaScript:
上面的实例包含一个简单的HTML表单和一个JavaScript外部文件：
| <html> <head> <script type="text/javascript" src="selectcustomer.js"></script> </head> <body> <form> Select a Customer: <select name="customers" onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <div id="txtHint"><b>Customer info will be listed here.</b></div> </body> </html> |
As you can see it is just a simple HTML form with a drop down box called "customers".
您能看到的仅仅是一个简单的HTML表单中带有一个叫“customers”的下拉框。
The <div> below the form will be used as a placeholder for info retrieved from the web server.
<div>标签元素作为一个占位符主要作用是用来接收服务器端的返回信息。
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 AJAX JavaScript
AJAX的JavaScript
This is the JavaScript code stored in the file "selectcustomer.js":
这些JavaScript代码存储于“selectcustomer.js”文件中：
| var xmlhttp function showCustomer(str) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); 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) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } |
The AJAX server page
AJAX服务器端网页
The server page called by the JavaScript above, is an ASP file called "getcustomer.asp".
服务器端ASP网页“getcustomer.asp”被以上的JavaScript代码调用。
The ASP page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language. Look at a corresponding example in PHP.
ASP网页是用VBScript脚本撰写，在IIS服务器上运行。它也很容易用PHP重新，或者是其它的服务器端语言。请看相应的PHP例子
The code runs a query against a database, and returns the result in an HTML table:
代码运行数据库查询语句，同时返回HTML表格结果：
| <% response.expires=-1 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>") %> |