目录
一、异步交互的实现: (1)
1、同步Web应用模型与异步Web应用模型: (1)
2、Ajax异步通信技术: (2)
3、jQuery库: (4)
二、Ajax与jQuery技术实现二级连动下拉列表 (4)
1、任务描述: (4)
2、数据库设计: (5)
3、HTML页面设计: (5)
4、JavaScript脚本程序main.js: (6)
5、服务器端程序 (6)
6、分析总结: (8)
三、一个完整的交互页面分析 (9)
1、界面设计及设计思路: (9)
2、相关HTML页面代码: (9)
3、Js脚本设计: (13)
4、服务器端ASP程序设计: (16)
5、页面交互分析: (19)
6、小结: (20)
交互网页设计
——Ajax与jQuery技术实现网页异步交互
一个优秀的网站通常会有以下几个方面的优势:漂亮的设计、友好的界面、规范的结构、智能化的后台处理以及充实的内容,另外还有一个不可忽视的就是良好的交互性。网站的交互性通常是给用户网页浏览过程中良好体验的一个非常重要的环节,满足用户的浏览需求,对用户的选择作出“及时”的响应,是交互性网页设计的关键。网页设计者一定要明白,缺乏交互性的网站即使看上去很美也是没有生命力的。
“交互”的本质就是用户(客户端)发出请求,通过网络传送到服务器(服务器端),服务器端处理用户的请求后得到结果,再次通过网络传送到客户端,客户端将返回的结果展示给用户。现在的交互式网页设计技术中,使用的最为广泛的就是Ajax技术,那么什么是Ajax呢?如何实现Ajax的应用呢?以下就围绕着这两个问题并通过实例进行说明。
一、异步交互的实现:
1、同步Web应用模型与异步Web应用模型:
传统的网页设计技术中,“交互”就已经存在,但与Ajax异步通信之间存在有一定的区别,看下面图示:
从图示中,可以看到,传统的Web应用模型中,客户端与服务器端是直接通信的,客户端发出请求后,一直等待服务器端的返回数据,直到服务器端处理完成返回数据后,客户端才会显示出处理结果,中间的数据传递过程和处理过程就是客户的等待的过程,浏览器中往往是显示一片空白,这就是同步应用模型,其最大缺点就是:页面全刷新,用户等待时间长,体验差。
异步Web应用模型中,弱化了客户界面前台的表单功能,不再由表单来实现数据的传递,转而通过Ajax引擎向服务器端传递数据,Ajax功能的实现则通过JavaScript语言来完成,服务器端返回的数据也通过Ajax引擎,利用JavaScript 来操作Html DOM更新页面。由于与服务器端的数据交流是由Ajax引擎完成,客户在前台的操作是不会被打断的,即数据在传递的过程中,用户可以继续其他的操作,这实际上也就是我们常说的“局部刷新”技术,用户的体验是非常完美的,在良好的网络状态下,甚至与我们的本机应用程序操作体验近似。
2、Ajax异步通信技术:
Ajax(Asynchronous JavaScript And XML,异步JavaScript和XML)并不是什么新的语言或技术,而是使用JavaScript和XML完成的异步发送请求。
Ajax实际上就是JavaScript语言操作了一个新的对象,这个对象就是XMLHttpRequest对象,XMLHttpRequest就是异步发送请求的对象,这就是Ajax 技术的核心,而开发Ajax程序则需要完成五件事情,分别是:获取XMLHttpRequest对象、注册回调方法、打开请求、发送请求、编写回调方法。
获取XMLHttpRequest对象:由于不同的浏览器对W3C标准的支持程度是不同的,所以在网页编程中一定要考虑到浏览器的兼容问题
var xmlHttp; //定义全局的XMLHttpRequest
function createXMLHttpRequest(){
//适用IE6以下版本的IE
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft. XMLHttp");
}
//适用IE7、IE8、FireFox等主流浏览器
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
●注册回调方法:回调方法会监听服务器端的响应,在发送异步请求后,
回调方法会每隔一段时间被调用一次
xmlhttp.onreadystatechange = callback;
●打开请求:open()方法有三个参数,其中第一个参数是请求方式,可选
值为GET或POST,建议使用POST;第二个参数是请求资源的URL,实际是服务器端响应程序;第三个参数是一个布尔值,true表示为异步请求。
为解决浏览器缓存问题,通常在URL中使用时间戳来欺骗浏览器。
xmlhttp.open(“POST”, URL, true);
●发送请求:GET请求与POST请求的设置的参数是不同的。
xmlHttp.send(content)
●编写回调方法:回调函数通常是获取服务器的返回数据,并通过操作
DOM,将结果显示在网页中。在回调函数中通常要判断两个状态值,xmhttp.readyState==4代表对象读取服务器响应结束,xmlhttp.status == 200表示服务器正确完成了响应。
function callback() {
if(xmhttp.readyState == 4) {
if(xmlhttp.status == 200) {
var text = xmlhttp.responseText;//获取服务器的响应文本
...
}
}
}
3、jQuery库:
Ajax程序的开发是一个很繁琐的事情,五个步骤缺一不可,遇到实际问题要处理的事情会更多,那么有简化的方法来开发Ajax程序吗?答案就是jQuery。
jQuery是一个优秀的JavaScript库,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。jQuery将所有的Ajax操作封装到Ajax方法中,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题,极大地简化了我们的编程,其主要的Ajax方法有:
●load( url, [data], [callback] ):载入远程 HTML 文件代码并插入至
DOM 中
●jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请
求
●jQuery.post( url, [data], [callback], [type] ) :使用POST方式
来进行异步请求
●jQuery.Ajax( options ) : 通过 HTTP 请求加载远程数据
二、Ajax与jQuery技术实现二级连动下拉列表
1、任务描述:
下面是在网页中截取的图片:
由于乡镇较多,可能达到上百个,下拉列表太长,造成用户查找相应数据很困难,于是我们希望选择了首字母后,乡镇下拉列表中只显示对应字母开始的那些乡镇名,方便用户的操作,如下图效果:首字母为B,乡镇只显示出对应的两项数据。
2、数据库设计:
我们使用最简单的ACCESS数据库来保存相关的乡镇数据,在ACCESS中建立数据表XIANGZHENG:
为了得到乡镇的首字母,我们建立查询cx_xzFirstLetter:
SELECT DISTINCT left(xiangzhengEname,1) AS firstLetter
FROM xiangzheng
ORDER BY left(xiangzhengEname,1);
3、HTML页面设计:
我们只需要建立一个非常简单的页面,下拉列表中的
首字母
乡镇
4、JavaScript脚本程序main.js:
前台的HTML文件中,表单
3、Js脚本设计:
菜单项的点击,将会激活js脚本中相应的代码,脚本中使用了jQuery 代码应用Ajax技术导入右侧表单,并将表单中的下拉列表初始化,并为下拉列表及提交按钮等绑定事件,实现用户的提交请求等功能。
//左边菜单项的点击,右边导入表单,以方便添加记录
$("#lefter a").bind('click',function(){
$("#lefter a").removeClass("cur");
$(this).addClass("cur");
bn=$(this).attr("bname");
switch(bn)
{
case "qiyeinfo":
$("#righter1").load("../html/t_qiyeinfo.html",function(){
rightAlign();
var curtime=new Date();
curtime=curtime.getTime();
//乡镇名称与首字母两个下拉列表连动
var getXzOpt=function(){
tLetter=$("#xzletter").val();
$.get("../asp/getXiangzhengOption.asp",{letter:tLetter,time:c urtime},function(d){
$("#xiangzhengname").empty().append(d);
});
};
$.get("../asp/getXzFirstLetterOption.asp",{time:curtime},func tion(d){
$("#xzletter").append(d).change(getXzOpt);
getXzOpt();
});
$.get("../asp/getHangyeOption.asp",{time:curtime},function(d)
{
$("#hangyeselect").append(d);
});
$.get("../asp/getGuimoOption.asp",{time:curtime},function(d){
$("#guimoselect").append(d);
});
$("#autocreate").live("click",function(){
var tmp1=parseInt(Math.random()*10000);
var tmp2="";
for(i=0;i<3;i++)
{tmp2+=String.fromCharCode(97+parseInt(Math.random()*26)); }
var tmp=tmp2.toUpperCase()+tmp1
$("#pass").val(tmp);
});
/**** 企业名称录入时自动填写汉字的拼音*****/ $('#qyname').bind('change',{here:$('#qyEname')},writePinYin);
$('#qyname').bind('keyup',{here:$('#qyEname')},writePinYin);
});
showTable(bn);//页面下方表格的显示
break;
}
});
//添加记录按钮的点击,使得表单数据提交
$("#addsubmit").live("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/addrecord.asp",sendValue,function(data){ //添加记录后显示表内数据 showTable(tbname); //清除表单中的数据 clearForm(tbname); alert(data); }); }); 4、服务器端ASP程序设计: 从上段JS程序中可以看到,内部有多段Ajax程序与服务器端的多个ASP 程序进行了交互,这里不将ASP程序全部列举。 ShowTable.asp文件的作用有两个,一是表单被调入时即在表单下方显示出表内最近被更新的数据,二是当添加了新数据时,马上将新数据显示 在表格内,下面是它的源程序代码: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <% response.codepage=65001%> <% response.charset="utf-8" %> <% Server.ScriptTimeout=999 Set rs=Server.CreateObject("Adodb.RecordSet") response.Buffer=true tbname=request.QueryString("tablename") 'curpici=request.QueryString("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 response.write(""&fieldname(0)&"
")
rs.open sql,conn,3
response.Write("
操作 | ID | ")"&fieldname(i)&" | ")
") response.Write(" | ") | "&rs(i)& " | ")
response.Flush()
%>
5、页面交互分析:
现在我们看看具体执行时的效率,为了方便,我们使用FireFox浏览器的插件FireBug对页面的代码执行过程及时间上进行分析。
下图是我们点击左侧“企业基本信息”链接后,执行的一系列与服务器的交互操作:
可以看到,通过Ajax方式一共与服务器端有六次数据请求,我们通过下表对其功能分别进行说明: