用 jQuery 和 Ajax 构建富 Internet 应用程序

jQuery 是一种 JavaScript 库，它是开发人员简化动态富 Internet 应用程序的创建过程的最佳选择。随着基于浏览器的应用程序不断代替桌面应用程序，这些库的使用将越来越广泛。您将通过本系列文章中了解 jQuery，并学习如何在 Web 应用程序项目中实现 jQuery。

简介

JQuery 受欢迎的指数迅速攀升，现已成为 Web 开发人员首选的 JavaScript 库。与此同时，人们对富 Internet 应用程序（Rich Internet Application，RIA）的应用和需求也在迅速增长，并期待用基于浏览器的应用程序代替桌面应用程序。无论是电子表格，还是薪水册和电子邮件应用程序，现在都在浏览器中再现了类似于桌面的体验。随着这些应用程序数量的增多和功能的日益复杂，JavaScript 库将会变得越来越重要，因为它是构建这些应用程序的坚实基础。JQuery 无疑成为了开发人员最佳选择。本系列文章深入探索了 jQuery，并提供了坚实的基础。开发人员借助这个基础就可以快速轻松地构建自己的 RIA。

用来构建 RIA 以及为页面添加交互性的三个基本组件。第一个模块是 Event 模块，借助此模块，能捕获用户对页面的任意交互并以编程的方式进行响应。比如，您可以向按钮点击、鼠标移动等事件附加代码。下一个模块是 Attributes 模块，它解释了如何在页面元素上获得/设置值，以及如何将其作为带有变量的数据对象。这些值包含了决定为用户提供何种响应的大部分信息。最后，您还看到了 如何进行 CSS 处理，以及如何在不重新加载页面的情况下更改页面上任意元素的布局、颜色、字体等。了解这三个模块之后，就等于掌握了交互 Web 页面的三个基本元素 — 获取用户交互（Event）、收集信息（Attribute）以及在事件和信息基础上提供反馈（CSS）。

 

在本文中，将对交互 Web 页面的这三个基本元素进行更进一步的探究，提供当今高级 Web 应用程序必备的 “酷” 效果和特征。这些附加的模块对提供 RIA 而言并不是至关重要的，但这些效果和特征会给用户留下深刻印象，并且还会极大地扩展 RIA 的可用范围和特性。您将看到的第一个模块是 Effects 模块，它包含很多特性，比如隐藏元素、随处移动元素、淡入淡出元素等。换言之，这些都是让 Web 页酷起来的 “亮点”。最后一个要讨论的模块是 Asynchronous JavaScript + XML (Ajax) 模块。大多数人都将该模块等同为 RIA。Ajax 让 Web 应用程序无需重载页面就能与服务器进行交互、向服务器传递信息并从中获取信息（与 Web 上的一些意见相反，Ajax 不 单纯是一个很酷的 JavaScript 动画工具）。您将发现 jQuery 提供了极其简单易用的 Ajax 工具。实际上，jQuery 使 Ajax 的使用与调用其他 JavaScript 方法一样简单。

 

本文中的示例应用程序是个总结，展示了 Effects 和 Ajax 模块如何融入到这个示例 Web 邮件应用程序中。我将向这个示例程序添加一些效果使其更加漂亮，而且更重要的一点是，我将添加一些 Ajax 代码，以便无需重载页面邮件应用程序就能显示信息。

Effects 模块

从其名字往往容易得出这样的结论，Effects 模块只包含一些动画和效果，而这些动画和效果往往是一些 “正规” 的 Web 页面所竭力避免的。但实际情况并非如此。几乎所有的应用程序都会遇到这样的情况，即某个页面元素需要隐藏或其视图应该根据另一个页面元素的状态进行切换。这类更改对于一个 RIA 而言非常重要，因为它们让您能够加载某个页面的所有页面元素，然后通过隐藏/显示特定的元素只显示所需的信息。重载页面的方式并不可取。比如一个具有两个选项的组合框，一个选项是隐藏 div，一个选项是显示此 div。很显然，与更改组合框并重载页面隐藏/显示 div 相比，用客户端代码隐藏/显示此 div 更简单和高效。而仅隐藏/显示还是要让它淡入/淡出，则完全取决于您。

如上所述，最基本的效果函数是 show() 和 hide() 函数。这非常直观；它们可分别用来显示和隐藏页面上的某个元素。

清单 1. 隐藏和显示函数

 1 //hide all p element

 $("p").hide();
 
 //show all p element slowly
 $("p").show("slow");

除了这些基本操作，利用 show() 和 hide() 这两个函数，还能更多地控制页面元素如何显示和隐藏。相关文档将 hide() 描述为 “优美” 的显示/隐藏，对于 show()，就是综合淡入和滑出的效果。

在开始深入探讨一些例子之前，不妨回过头来看看传递给这些效果函数的参数。每个函数（除了通用的 show() 和 hide() 函数之外）都允许在效果完成时传入要调用的速度和函数。速度用来控制效果出现的快慢。这个参数可以是一个 "slow"、"fast" 或 "normal" 字符串。此外，如果需要精确控制动画时间，那就需要用参数指定毫秒数。Effects 函数的第二个参数本身就是一个函数，此函数在效果完成后调用。如果想要将几个效果组合成一个较大规模的效果，这一点将非常重要，因为利用它，能够可靠地控制一个效果何时完成，下一个效果何时开始。

清单2 渐入渐出效果

有一个很有趣的函数，它可部分隐藏和显示页面元素，此函数是 fadeTo()，它能让页面元素部分透明。我认为此函数对 RIA 很重要，因为透明性是突出页面上某个元素的一种很好的方式，并可用来显示页面的禁用区域。例如，页面上有几个选项卡，可以让所有未被选中的选项卡呈现一些透明性来突出其未被选中。或者，在一个页面表单上，可以让所有没有焦点的元素呈现一些透明性以向用户突出哪个 Form 元素当前具有焦点。此外，透明性本身就很酷。在进行设计时，不妨遵循这样一条通用的箴言 “如果苹果公司这么设计，效果一定很酷”。

 1 // make all the Form elements on the page show transparency at 60%, except
 2 // the one that currently has focus, which will not have any transparancy.  
 3 // This is Apple cool!
 4 
 5 $(":input").fadeTo("fast", .60);
 6 $(":input").focus(function(){
 7     $(this).fadeTo("fast", 1);
 8 });
 9 $(":input").blur(function(){
     $(this).fadeTo("fast, .60);
     });
 
 

清单 3. 定制动画的方法

 1 // when the button is clicked, make the div with an ID of "movingDiv"
 2 // have the custom animation provided.
 3 $("#myButton").click(function(){
 4    $("#movingDiv").animate({
 5        700;
 6       opacity: 0.5;
 7       fontSize: "18px";
 8    }, 5000);
 9    });
 
 

Ajax

当前，与 Web 页面有关的最流行的一句话就是 “它用到 Ajax 了吗”，但是，是不是每个人都能真正理解 Ajax 的含义呢？在 Google 上搜索 “Ajax” 将会出现数百万个搜索结果（与大多数搜索一样），但是，这么多结果似乎表明对术语 Ajax 真正含义的理解还存在一些含糊不清之处。Ajax 并不是 某些页面上出现的一些很酷的动画，也不是弹出窗口下一个很酷的阴影效果。Ajax 很酷，但并不意味着 Web 页上的任何一个令人耳目一新的东西都是 Ajax 的成果。Ajax 的核心是在不重载页面的情况下客户端 Web 页面能与服务器来回传递信息。所以，虽然 Ajax 并不能提供页面上的绚丽效果，但利用 Ajax 却能使 Web 应用程序真实模仿桌面应用程序。所以，围绕 Ajax 沸沸扬扬的现象是有其根源的 —— Ajax 的广泛应用直接导致了目前 RIA 的迅速发展。

jQuery 则让使用 Ajax 变得异常简单！我并不是夸大其词。在没有 JavaScript 库的情况下使用过 Ajax 的人都知道，他们必须处理 XMLHttpRequests、处理 XMLHttpRequest 的 Microsoft® 和 Firefox 版本间的差异、必须解析全部返回代码等，而 jQuery 则让使用 Ajax 简单到进行一次函数调用即可。这是真的！原先需要 100 行代码才能完成的功能现在只需 3 或 4 行代码就可以了。这节省了多少时间啊！就我个人而言，获悉 jQuery 之前，若想添加 Ajax 函数往往需要大量工作。现在，有了 jQuery，这变得极其简单，并能让我的应用程序充分利用 Ajax 提供的全部益处。如果 Ajax 的使用能简单到一个常规的函数调用，那为什么不使用它呢？

 

现在来看看您最有可能在自己的 Ajax 需求中用到的两个函数：post() 和 get() 方法。这些函数的运作与其他的 jQuery 函数没有太大差别，它们均允许指定要调用的 URL 以及要传递的参数，并指定 Ajax 方法返回时的函数。在这种意义上，这两个方法设置的方式使得在 jQuery 调用 Ajax 方法与在 jQuery 调用其他方法基本相同。

清单4 Post与get方法

 1 'data.asp
 2 <%
 3 response.write(now())
 4 %>
 5 //demo.html

 6 //Get methord
 7 $.get("data.asp",{},function(data){$("#result").html(data);})
 8 
 9 
 //post methord
 $.post("data.asp",{},function(data){$("#result").html(data);})
 
 

    正如这两个示例所示，这些函数与其他 jQuery 函数相同，因此比不带 JavaScript 库的情况更容易使用。有几个参数可用来扩展 Ajax 调用的函数。第一个参数很显然是要调用的 URL。这可以是 PHP 文件、一个 JSP 文件、一个asp文件或 Servlet — 通常可以是处理此请求的任何东西。它甚至可以不响应此请求（正如您在以后的示例应用程序中看到的一样）。第二个参数是可选的，用来传递 post/get 的数据。一般采用数组格式。通常，需要传递在 Form 元素中包含的信息以及来自页面的 userID 信息等。基于服务器文件的所有东西都要处理此请求。第三个参数也是可选的，是 Ajax 函数成功返回时所要执行的函数。该函数一般包含用来处理由服务器传递回的信息结果的代码。

清单 5 传递参数

 1 <input type="text" id="txtName" name="txtName"/>
 2 <input type="password" id="txtPwd" name="txtPwd"/>
 3 
 4 //post the txtName and txtPwd field to the server
 5 
 6 $.post("data.asp",{txtName:$("#txtName").val(),txtPwd:$("#txtPwd").val()},function(data){
 7     $("#result").html(data);
 8 })
 9 
 //using get methord
 
 $.post("data.asp",{txtName:$("#txtName").val(),txtPwd:$("#txtPwd").val()},function(data){
     $("#result").html(data);
 })
 

以下将通过一个获取删除数据的例子:

清单 操作页面

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 tr{ background-color:#FFF;}
 8 </style>
 9 <script type="text/javascript" src="../lib/jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
     $("#result").hide();
     $("#btnseach").click(function(){
         $("#btnseach").attr("disabled","disabled");
         ajax_Search();
     });
     
     $("#btndel").click(function(){
         deleteInfo();
     });
     
     $("#selall").click(function(){
         if(    $("input:checked").length>0)
         {
             $("input:checked").removeAttr("checked");
         }
         else
         {
             $(":checkbox").attr("checked","checked");
         }
     });
 });
 
 function ajax_Search()
 {
     $.post("data.asp",{act:"gt"},function(data){
         if(data.length>0){
             $("#result").html(data);
             $("#btndel").removeAttr("disabled");
         }
         else
             $("#btndel").attr("disabled","disabled");
             
         $("#btnseach").removeAttr("disabled");
         $("#result").show("slow");
     });
 }
 
 function deleteInfo(){
     $("input:checked").each(function(){
         alert("#"+$(this).val());
         $("#"+$(this).val()).remove();
         $.post("data.asp",{act:"del",id:$(this).val()});
     });
 }
 </script>
 </head>
 <body>
 <form action="#" method="post">
 <input type="text" id="txtSch" name="txtSch" />
 <input type="button" value="获取数据" id="btnseach"/>
 <input type="button" value="删除选中数据" id="btndel" disabled="disabled"/>
 </form>
 <div id="result">
 </div>
 <input type="button" value="全选" id="selall"/>
 <div id="delr"></div>
 </body>
 </html>
 
 

    

清单 数据提供页面

 1 <!--#include file="conn.asp" -->
 2 <%
 3 '**********************************************
 4 Function QueryRS(strSql)
 5     set conn=OpenConn()'打开时数据库连接
 6     set tmprs=Server.CreateObject("ADODB.Recordset")
 7     tmprs.open strSql,conn,1,1
 8     set QueryRS=tmprs
 9 End Function
 
 Function Exec(sql)
     set conn=OpenConn()'打开时数据库连接
     conn.execute(sql)
     conn.close
     set conn=nothing
 End Function
 
 '获取数据
 Function GetAlldata()
     strgtsql="select * from ImgMap"
     set rs=QueryRS(strgtsql)
     Response.Write("<table  background-color:#000;"" cellspacing=""1""><tr><th>ID</th><th>PicID</th><th>Filepath</th><th>OP</th></tr>")
     While(not rs.eof)
         Response.Write("<tr id="""&rs("PicID")&"""><td>"&rs("ID")&"</td><td>"&rs("PicID")&"</td><td>"&rs("Filepath")&"</td><td><input type=checkbox name=""delId"" value="""&rs("PicID")&""" /></td></tr>")
         rs.movenext
     Wend
     Response.Write("</table>")
     rs.close
     set rs=nothing
 End Function
 
 Function deldata(id)
     strsql="delete from ImgMap where PicID="&id
     Exec(strsql)
 End Function
 
 select case request.Form("act")
     case "gt":
         Call GetAlldata()
     case "del":
         Call deldata(request.Form("id"))
 End select
 %>

相关截图：

相关源码：Demo