最近评论
正在载入评论列表...
本章导读
随着社会的进步和生产力的发展，计算机技术的更新速度越来越快，Web技术也随之更新、发展。为了满足站点系统的高级需求，微软公司推出了Ajax战略，对Web开发技术进行了完善。本章将向读者介绍Ajax技术的基本知识，并通过具体的实例介绍Ajax在Web开发中的应用流程。
13.1 Ajax概述
Ajax是新兴的Web 2.0的代表技术，采用异步传输的方法，在诸多领域有着广泛的应用。下面对Ajax的基本概念进行简要介绍。
13.1.1 Ajax简介
Ajax是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。虽然Ajax并没有创造出某种具体的新技术，但是它以一种崭新的方式来使用这些技术，使Web开发上升到了一个新阶段。
具体来说，Ajax基于如下核心技术。
— XHTML和CSS。
— 文档对象模型：Document Object Model。
— XML和XSLT。
— XMLHttpRequest。
— JavaScript。
与传统的Web开发不同，Ajax不是以一种基于静态页面的方式实现Web应用。从Ajax的角度来看，Web应用仅由少量的页面组成，每个页面其实是一个更小型的Ajax应用。而一些简单的Ajax应用，例如一个简单的RSS阅读器，甚至只有一个页面。每个页面上都包括一些使用JavaScript开发的Ajax组件。这些组件使用XMLHttpRequest对象，以异步传输的方式与服务器进行通信，从服务器获取需要的数据后，使用DOM API更新页面中的一部分内容。
当用户请求新的数据内容时，传统的Web机制只能等待服务器将全部数据返回，然后刷新并重新显示整个页面；而Ajax只请求那些需要改变的内容，同时只改变那些需要改变的区域。并不对这个页面进行刷新，这种能力不但使刷新成了Ajax带给用户的主要印象，而且由于数据传输量的有效降低使得Ajax成为缓解Web性能瓶颈的重要工具。本章主要讲述的是Ajax的概念和其在多个方面的应用。
13.1.2 Ajax工作原理
实际上，Ajax在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。具体地说，在传统的Web应用程序中，用户填写表单字段并提交后，将表单数据发送到服务器，服务器将它转发给处理表单的脚本，脚本执行完成后再发送回全新的页面，该页面可能是带有已经填充某些数据的新表单的HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。
而利用Ajax后，把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，将数据发送给JavaScript代码，而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。这样，JavaScript代码在幕后发送请求，用户甚至不知道请求的发出。并且上述请求是异步传输的，因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后，服务器将数据返回JavaScript代码（仍然在Web表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是瞬间完成的，表单没有提交或刷新，而用户却得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预。
13.1.3 创建简单的Ajax程序
下面将通过一个简单的Ajax程序说明Ajax的基本运行原理。本部分实例文件保存在“光盘:\13\1”文件夹中，实例文件的运行流程如图13-1所示。
|
|
图13-1 页面运行流程图
下面将对上述实例的实现进行详细介绍。
1．构造一个静态的HTML页面，并为它添加一个DIV标签
因为与传统的仅由服务端构成的Web应用不同，Ajax应用分为客户端和服务端两个部分，客户端可以异步地从服务端获取数据，并将其动态地插入到HTML中。上述静态HTML页面保存为“hello.html”，其主要代码如下：
<HTML>
<HEAD
<TITLE> Hello,Ajax! </TITLE
</HEAD>
<script type=" text/javascript" src="Ajax .js"></script>
<!--Ajax.js是实现即时提示的核心代码->
<BODY onload="HelloAjax()"> <!--HelloAjax()，当页面载入时运行->
<DIV ID="Ajax"> <!--构造一个名为Ajax的标签，用于显示结果->
</DIV>
</BODY>
</HTML>
2．获取HTTP请求对象
要实现从服务端获取消息的功能，必须获取一个HTTP请求对象。上述功能由文件Ajax.js实现，其主要代码如下所示：
var xmlHttp; //定义全局变量，用于存储请求对象
function createXMLHttpRequest() { //创建XMLHttpRequest对象，这个对象用于向客户端提供服务
if (window.ActiveXObject) { //判断是不是IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { //其他浏览器
xmlHttp = new XMLHttpRequest();
}
}
3．获取服务器响应
得到HTTP请求对象后，需要向服务端发送请求。假设服务端文件为hello.asp，如下代码可以获取服务端的响应：
function getHello()
{
if (xmlHttp.readyState == 4) //表示请求已完成
{ //获取服务端的响应文本
var helloStr = xmlHttp.responseText;
document.getElementById("Ajax ").innerHTML = helloStr; //插入响应到ID为Ajax-sample
//的DIV标签内
}
}
function HelloAjax()
{
var url = "hello.asp";
createXMLHttpRequest();
xmlHttp.open("GET", url, true); //指定服务端的地址
xmlHttp.onreadystatechange = getHello; //请求状态变化时的处理函数
xmlHttp.send(null); //发送请求
}
将上面的代码插入到<Head>标签，然后将<Body>标签的onload属性设为HelloAjax方法，整个客户端设计完毕。
4．服务端文件
服务端文件hello.asp相当简单，功能是向客户端发送一个“Hello, Ajax”消息，其主要代码如下所示：
<%
response.write "Hello, AJAX!"
%>
13.1.4 Ajax前景
目前Ajax已经成为Web应用的主流开发技术，大量的业界巨头已经采纳并推动此技术的发展。IBM、Oracle、Yahoo等公司启动了Open Ajax项目，致力于为其开发强大的开发工具；微软公司开发了自己的Ajax框架，用自己的ASP.NET框架配合工作。
另外，Google公司利用Ajax开发出Google Maps。完全基于Ajax技术的Google Maps界面提供了远远超越其竞争对手地图服务的交互体验，最终使Google Maps脱颖而出，获得了用户的青睐。
图13-2 Google Maps界面效果图
13.2 Ajax实现提示功能
经过前面的学习，读者已经了解到Ajax技术有着强大的功能和非常美好的前景。下面将通过一个Ajax实现提示功能的实例讲解Ajax技术的基本使用知识。
本实例包含三个文件，分别是文件index.html、文件clienthint.js和文件gethint.asp。上述文件保存在“光盘:\13\2”文件夹中，上述实例文件的功能是根据在表单中输入的字母，即时显示提示信息。例如，当输入“A”时，在下面提示“Afghanistan”和“America”的名称。
上述页面文件具体运行流程如图13-3所示。
|
|
图13-3 系统页面运行流程图
下面将详细介绍上述实例文件的实现。
13.2.1 异步传输文件
异步传输文件clienthint.js的功能是创建xmlHttpRequest对象，用于获取表单数据，将表单数据提交到服务器，并监测服务器的响应。当返回数据到达客户端时，指定页面位置，显示处理结果。文件clienthint.js的主要代码如下所示：
var xmlHttp
function showHint(str) //用于显示结果的函数
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) //当xmlHttp为空时，浏览器不支持Ajax
{
alert ("你的浏览器不支持 AJAX!"); //弹出对话框显示结果
return;
}
var url="gethint.asp"; //url变量存储参数
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() //创建XmlHttpRequest对象
{
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest(); //Firefox, Opera 8.0+, Safari浏览器
}
catch (e)
{
Try //IE浏览器
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); //IE低版本的浏览器
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE高版本的浏览器
}
}
return xmlHttp;
}
13.2.2 数据处理文件
数据处理文件gethint.asp的功能是对输入的数据返回处理结果提示信息。文件gethint.asp会根据输入的第一个字母，在后台搜索符合要求的国家或地区的名称。如果输入的字母系统中有对应的结果，则会输出对应的提示，效果如图13-4所示；反之，输出“Error!”提示信息，效果如图13-5所示。
图13-4 有对应的结果输出提示 图13-5 无对应的结果输出提示
文件gethint.asp的主要代码如下所示：
<%
response.expires=-1 '设置Response.Expires为负数或者0，禁止了缓存
dim a(16) '定义数组a(16)用来提示国家/地区名称
a(1)="Afghanistan"
a(2)="Britain"
a(3)="Canada"
……………….
a(16)="Thiland" '从URL中获取q的值
q=ucase(request.querystring("q"))
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if '如果找不到就输出"Error!"
if hint="" then '或者输出正确的值
response.write("Error!")
else
response.write(hint)
end if
%>
13.2.3 表单文件
表单文件index.html的功能是提供一个数据收集表单，获取用户的输入数据。具体效果如图13-6所示。
图13-6 表单效果图
文件index.html的主要代码如下所示：
<html>
<head>
<script src="clienthint.js"></script> <!--引入JavaScript代码-->
</head>
<body>
<form>
国家/地区:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
<!--当松开键盘时执行showHint函数-->
</form><p>提示: <span id="txtHint"></span></p>
</body> <!--定义txtHint区域显示结果-->
</html>
13.3 无刷新登录验证
下面将通过一个利用Ajax实现无刷新登录验证的实例，介绍Ajax技术在此领域的应用过程。本实例包含4个页面文件，分别是数据库连接文件conn.asp、用户名验证文件cu.asp、表单提交文件t1.asp和首页文件t1.htm。
上述文件的具体运行流程如图13-7所示。
|
|
图13-7 系统页面运行流程图
下面将详细介绍上述文件的实现过程。
13.3.1 数据库设计
本实例数据库名为“db1.mdb”，由表u_ser构成，表的具体结构如表13-1所示。
表13-1 表u_ser的设计结构
|
字段名称 |
数据类型 |
是否主键 |
默 认 值 |
功能描述 |
|
u_id |
自动编号 |
是 |
递增1 |
用户编号 |
|
u_name |
文本 |
否 |
null |
用户名 |
13.3.2 数据库连接文件
数据库连接文件conn.asp的功能是建立系统文件和数据库的连接。文件代码如下所示：
<%
on error resume next
db_path = "db1.mdb"
Set conn= Server.CreateObject("ADODB.Connection")
'数据库路径
connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath (db_path)
conn.Open connstr
Function CloseDatabase
Conn.close
Set conn = Nothing
End Function
%>
13.3.3 表单处理文件
表单处理文件t1.asp的功能是当用户输入数据并单击【注册】按钮后，对数据进行处理。文件t1.asp的主要代码如下：
<!--#include file="conn.asp"-->
<%
name=request.form("u_name") '获取用户名
Set rs = Server.CreateObject ("ADODB.Recordset")
sql = "Select * from u_ser where u_name='"&name&"'" '查询系统数据
rs.Open sql,conn,3,3
if not rs.eof then '如果有此数据存在
response.write("该用户名已被注册，<a href=t1.htm>返回</a>") '提示
else '如果没有此数据存在
rs.addnew '添加此数据到数据库中
rs("u_name")=name
rs.update
response.write("注册成功，<a href=t1.htm>返回</a>") '提示
end if
rs.close
set rs=nothing
call CloseDatabase
%>
13.3.4 请求处理文件
请求处理文件cu.asp的功能是对用户请求进行处理，并返回异步请求的结果。其主要代码如下所示：
<%
Response.Buffer = True '对浏览器缓存进行设置
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "No-Cache"
%>
<!--#include file="conn.asp"-->
<%
name=request.querystring("name")
Set rs = Server.CreateObject ("ADODB.Recordset")
sql = "Select * from u_ser where u_name='"&name&"'"
rs.Open sql,conn,1,1
if rs.eof and rs.bof then
response.write("OK") '用户名未被注册时显示OK
else
response.write("username existed") '用户名被注册时显示uername existed
end if
rs.close
set rs=nothing
call CloseDatabase '关闭数据库
%>
13.3.5 首页文件
首页文件t1.htm的主要功能是提供一个数据输入表单，根据浏览器的不同，创建用于异步传输的xmlHttpRequest对象。其效果如图13-8所示。
图13-8 系统页面运行流程图
文件t1.htm的主要代码如下所示：
……………………………………………………
<script language="javascript" type="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //低版本的IE浏览器
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //高版本的IE浏览器
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { //不是IE浏览器时
xmlHttp = new XMLHttpRequest(); //创建xmlHttpRequest对象
}
function callServer() { //处理请求的函数
var u_name = document.getElementById("u_name").value; //获取表单数据
if ((u_name == null) || (u_name == "")) return; //表单为空时中止请求
var url = "cu.asp?name=" + escape(u_name); //对请求的URL进行描述
xmlHttp.open("GET", url, true); //以GET方式发送异步请求
xmlHttp.onreadystatechange = updatePage; //对请求状态进行监听和处理
xmlHttp.send(null); //发送请求
}
function updatePage() { //处理请求状态的函数
if (xmlHttp.readyState < 4) { //当请求未到达客户端时显示Loading…
test1.innerHTML="loading...";
}
if (xmlHttp.readyState == 4) { //当请求到达时，在test1区域显示结果
var response = xmlHttp.responseText;
test1.innerHTML=response;
}
}
</script>
<form name="form1" action="t1.asp" method="post" autocomplete="off">
用户名: <input type="text"name="u_name"id="u_name"onChange="callServer();"/>
<span id="test1">是否能注册</span><br>
密 码：<input type="password" />
<input type="submit" value="注册" />
</form>
