AJAX 数据库

最新推荐文章于 2022-09-11 07:15:14 发布

Thomas_Chen

最新推荐文章于 2022-09-11 07:15:14 发布

阅读量1.1k

点赞数

分类专栏： 9.JS+AJAX 文章标签： ajax javascript function xmlhttprequest html database

9.JS+AJAX 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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
请在下面的菜单中选择一名字

Customer info will be listed here.
客户信息将被罗列在这。

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" οnchange="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服务器检索信息的占位符

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 "selectcustomer.js":
这是JS代码，被保存在一叫做"selectcustomers.js"的文件内：

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服务页

The server paged called by the JavaScript, is a simple ASP file called "getcustomer.asp".
服务页由JS所调遣，是一称为"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或是其他一些服务语言

The code runs an SQL against a database and returns the result as an HTML table:
代码运行了SQL来从数据库中将结果返回到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>")

Thomas_Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 数据库

AJAX can be used for interactive communication with a database.AJAX可以用来和数据端进行数据的交互联通。AJAX Database ExampleAJAX 数据库实例In the AJAX example below we will demonstrate how a web page can fetch informa
复制链接

扫一扫