AJAX教程(10):AJAX 数据库实例

2016-02-20 00:49 13 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐AJAX教程(10):AJAX 数据库实例,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

AJAX 可用来与数据库进行动态地通信。

AJAX 数据库实例

在下面的 AJAX 例子中,我们将演示如何使用 AJAX 技术令网页从数据库读取信息。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)在下面的框中选择一个名字AJAX 实例解释

上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接:

htmlheadscript src="selectcustomer.js"/script/headbodyform请选择一位客户:select name="customers" onchange="showCustomer(this.value)"option value="ALFKI"Alfreds Futterkisteoption value="NORTS "North/Southoption value="WOLZA"Wolski Zajazd /select/formpdiv id="txtHint"b客户信息将在此处列出。/b/div/p/body/html

正如您看到的,这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。

表单以下的段落包含了一个名为 "txtHint" 的 div,这个 div 充当了由 web 服务器所取回的信息的位置占位符。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

当用户选择数据时,名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是:每当用户改变下拉列表中的值,函数 showCustomer 就会被调用。

下面列出了 JavaScript 代码。

AJAX JavaScript

这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码:

var xmlHttpfunction showCustomer(str){ xmlHttp=GetXmlHttpObject();if (xmlHttp==null)  {  alert ("您的浏览器不支持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(){var xmlHttp=null;try  {  // Firefox, Opera 8.0+, Safari  xmlHttp=new XMLHttpRequest();  }catch (e)  {  // Internet Explorer  try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}  catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}  }return xmlHttp;}
AJAX 服务器页面

这个被 JavaScript 调用的服务器页面,是一个名为 "getcustomer.asp" 的简单的 ASP 文件。

此页面使用 VBScript 针对 IIS 编写。可以使用 PHP 或其他服务器语言对它进行改写。

此代码可运行针对某个数据库的 SQL,并以 HTML 表格返回结果:

%response.expires=-1sql="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, connresponse.write("table")do until rs.EOF  for each x in rs.Fieldsresponse.write("trtdem" & x.name & "/em/td")response.write("td" & x.value & "/td/tr")  next  rs.MoveNextloopresponse.write("/table")%

来源:http://www.tulaoshi.com/n/20160220/1632590.html

延伸阅读
标签: Web开发
您的第一个AJAX应用程序 为了让您理解AJAX的工作原理,我们将创建一个小型的AJAX应用程序。 首先,我们需要一个带有两个文本框的HTML表单:用户名和时间。用户名文本框由用户填写,而时间文本框使用AJAX进行填写。 此HTML文件名为"testAjax.htm"(请注意这个HTML表单没有提交按钮!): html body...
AJAX介绍 AJAX 关键词: javascript脚本和可扩展标记语言(XML)  WEB浏览器技术  开放式WEB标准  浏览器以及独立平台  更好更快的网络应用程序  XML以及HTTP请求  AJAX = 异步JavaScript和可扩展标记语言 AJAX是一种运用JavaScript和可扩展标记...
标签: Web开发
请求页面request.jsp 代码如下: %@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"% !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" titleInse...
标签: Web开发
一、引言 如今,有相当多的Web应用程序,如Backpack,Blinksale和Gmail,都把数据库技术与AJAX集成到一起。通过提供与数据库通讯而不用刷新浏览器这种强有力的技术,这种集成对web应用程序和用户体验产生巨大的影响。 这意味着,在用户继续其它交互的同时可以实现实时的数据传输。 本文将集中讨论上述技术集成机理。同时提供了完整的参考源...
标签: Web开发
简单的登录功能(未连接数据库) 代码如下: script src="Jquery1.7.js" type="text/javascript"/script script type="text/javascript" $(function () { $('#tijiao').click(function () { var username = $('#username').val(); var pwd = $('#pwd').val(); $.ajax({ type: "post", contentType: "application/json", url: "WebSe...

经验教程

896

收藏

78
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部