"&arr(0,i)&"") next
end if
end sub
文件源代码：
<%
Set rs=("")
sql="select firstletter from cs_xzFirstLetter"
=true
("")
makeOption sql
()
set rs=nothing
%>
文件源代码：
<%
Set rs=("")
tletter=("letter")
if tletter="" or tletter=empty or isnull(tletter) then
sql="select xiangzhengname from xiangzheng"
else
sql="select xiangzhengname from xiangzheng where left(xiangzhengename,1) ='"&tletter&"'"
end if
=true
makeOption sql
()
set rs=nothing
%>
6、分析总结：
上述几个文件中，中间的桥梁就是文件，实际上也就是它完成了Ajax引擎的作用，由于使用jQuery风格，可以看到代码只有几行，却完成了Ajax程序需要完成的五件事件，并且将结果写入了网页，我们再来简要分析一下其中的关键代码：
$.get("../asp/",{},function(d){
$("#xzletter").append(d).change(getXzOpt);
getXzOpt();
});
$.get()方法是jQuery封装的Ajax方法，jQuery将XMLHttpRequest对象的获取、回调方法的注册、打开请求、发送请求这四个步骤都已经封装在get()方法中，我们只需要简单的调用即可，其完整的格式是：(url,[data],[callback])，它有三个参数，第一个参数url为发送请求的地址，第二个参数是GET方式传递的数据，第三个参数是回调函数，也是Ajax的第五件事情在这里完成。
回调函数中，通过一个语句$("#xzletter").append(d).change(getXzOpt)就完成了两大功能，一个将服务器端数据写入了页面，这是append()方法完成的，二是给首字母下拉列表注册了change事件，这是change()方法完成的，在这里，我们不得不感叹jQuery代码的简练，完美地体现了其WRITE LESS,DO MORE的宗旨。
三、一个完整的交互页面分析
1、界面设计及设计思路：
整个页面设计左右两部分，左侧菜单项，当点击时将会导入右侧的表单，表单内的下拉列表项均由数据库中相关数据控制，当点击“提交”按钮后，当前表单中录入的数据会写入到数据库中，并且在下方显示出新添加的数据行。下方的“编辑”按钮可实现当前行数据的修改，“删除”按钮可实现当前行数据的删除。
2、相关HTML页面代码：
左侧菜单页的主要部分：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% =65001%>
<% ="utf-8" %>
醴陵市安全生产培训信息管理系统醴陵市安全生产培训信息管理系统
基本数据录入
企业基本信息
新训学员数据录入
…………
……
表单单独放在一个文件中（）：
企业基本信息录入
3、Js脚本设计：
菜单项的点击，将会激活js脚本中相应的代码，脚本中使用了jQuery代码应用Ajax技术导入右侧表单，并将表单中的下拉列表初始化，并为下拉列表及提交按钮等绑定事件，实现用户的提交请求等功能。
ind('click',function(){
$("#lefter a").removeClass("cur");
$(this).addClass("cur");
bn=$(this).attr("bname");
switch(bn)
{
case "qiyeinfo":
$("#righter1").load("../html/",function(){
rightAlign();
var curtime=new Date();
curtime=();
al(); $.get("../asp/",{letter:tLetter,time:curtime},function(d){
$("#xiangzhengname").empty().append(d);
});
}; $.get("../asp/",{time:curtime},function(d){
$("#xzletter").append(d).change(getXzOpt);
getXzOpt();
});
$.get("../asp/",{time:curtime},function(d){
$("#hangyeselect").append(d);
});
$.get("../asp/",{time:curtime},function(d){
$("#guimoselect").append(d);
});
$("#autocreate").live("click",function(){
var tmp1=parseInt()*10000);
var tmp2="";
for(i=0;i<3;i++) {tmp2+=(97+parseInt()*26)); }
var tmp=()+tmp1
$("#pass").val(tmp);
});
/**** 企业名称录入时自动填写汉字的拼音 *****/
$('#qyname').bind('change',{here:$('#qyEname')},writePinYin); $('#qyname').bind('keyup',{here:$('#qyEname')},writePinYin);
});
showTable(bn);ive("click",function(){
var tbname=$(this).attr("tablename");
var notHasNull=checkForm(tbname);
if(!notHasNull)
{
alert("数据不完整！");
return;
}
var ilen=$(".isdata").length;
var sendValue="tablename="+tbname+"&";
for(i=0;i { tempValue=escape($(".isdata").eq(i).val());
sendValue+="input"+i+"="+tempValue;
if(i!=ilen-1)
sendValue+="&";
}
$.post("../asp/",sendValue,function(data){
//添加记录后显示表内数据
showTable(tbname);
//清除表单中的数据
clearForm(tbname);
alert(data);
});
});
4、服务器端ASP程序设计：
从上段JS程序中可以看到，内部有多段Ajax程序与服务器端的多个ASP程序进行了交互，这里不将ASP程序全部列举。
文件的作用有两个，一是表单被调入时即在表单下方显示出表内最近被更新的数据，二是当添加了新数据时，马上将新数据显示在表格内，下面是它的源程序代码：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% =65001%>
<% ="utf-8" %>
<%
=999
Set rs=("")
=true
tbname=("tablename")
'curpici=("pici")
if tbname="" or tbname=empty then
tbname="xiangzheng"
end if
if tbname="stu" or tbname="qiyeinfo" then
topten="top 10"
else
topten=""
end if
sql="select "&topten&" * from "&tbname&" order by id desc"
dim fieldname
select case tbname
case "qiyeinfo"
fieldname=array("企业基本信息（最近录入）
case …………
end select
("
"&fieldname(0)&"
") sql,conn,3
("
")("
操作 | ID | ")for i=1 to ("
"&fieldname(i)&" | ")next
("
")'显示出所有的记录
while not
("
") ("
| ") ("
| ") for i=1 to ("
"&rs(i)& " | ") next
("
")wend
("
")()
%>
5、页面交互分析：
现在我们看看具体执行时的效率，为了方便，我们使用FireFox浏览器的插件FireBug对页面的代码执行过程及时间上进行分析。
下图是我们点击左侧“企业基本信息”链接后，执行的一系列与服务器的交互操作：
可以看到，通过Ajax方式一共与服务器端有六次数据请求，我们通过下表对其功能分别进行说明：
| 次序 | 服务器端程序 | 耗用时间 | 作用 |
| 第1次 | | 56ms | 远程导入表单 |
| 第2次 | | 77ms | 显示下方表格初始数据 |
| 第3次 | | 66ms | 初始化乡镇首字母下拉列表 |
| 第4次 | | 1ms | 初始化行业下拉列表 |
| 第5次 | | 110ms | 初始化规模下拉列表 |
| 第6次 | | 3ms | 初始化乡镇名下拉列表 |
我们再看看第4次Ajax交互的过程：1）提交的数据请求参数time，这只是一个时间戳：
2）响应Http头信息与请求Http头信息，从请求头信息最后一行可以看到请求对象使用XMLHttpRequest，说明这是一次Ajax数据请求：
3）响应数据即从服务器端返回给客户端的数据，可以看到返回的正是这个下拉列表中所需的列表项的HTML代码：
6、小结：
如果我们继续操作这个页面，例如点击“编辑”按钮，点击“删除”按钮等，都可以在FireBug中看到我们向服务器提交了请求，服务器完成相应的操作并返回了我们的需求，这就是所谓的“交互”网页了。
网页设计者要在前台设计出客户提交请求的功能，也要在后台设计出服务器端的处理过程，并返回处理结果给客户端，这一系列的工作是非常复杂的，我们不仅要考虑页面的美观、实用性，更需要考虑用户在使用时的舒适度及数据返回的及时性等等。
Ajax技术非常实用，给我们的网上冲浪带来了良好的体验，对于网页设计者来说，Ajax技术却不可滥用，实践证明，网页的展示速度与网页内容的多少并没有很大关系，其时间大部分被消耗在网络传输过程中，所以网页设计者应该考虑尽量地减少与服务器端的数据交换。Ajax的每一次使用都会至少与服务器产生一个来回的数据交流，如果一个页面中，有太多的局部刷新，将会使页面展示速度严重滞后，反而会给网站带来负面影响。
jQuery是我们使用Ajax最方便的工具，他的用途也绝不仅限于此，他有出色的DOM操作封装，他有可靠的事件处理机制，完美的浏览器兼容性，丰富的插件支持等等，这些都值得我们去学习应用。
参考文献
[1]《锋利的jQuery》 作者：单东林 张晓菲 魏然 人民邮电出版社
[2]《》 jQuery官网
