- 浏览: 449730 次
- 性别:
- 来自: 昆明
文章分类
最新评论
Ajax 改造,第 1 部分: 使用 Ajax 和 jQuery 改进现有站点
Ajax 技术改变了大型商业 Web 应用程序的外观,但是许多较小的 Web 站点都不具备足够的资源重新构建完整的用户界面(UI)。Ajax 的一些新特性能够解决实际中的界面问题并改善用户体验。本文将展示如何使用简单的模式窗口消除弹出窗口和导航死角。通过应用渐进增强(progressive enhancement)这一理念,能够保证这些增强的 UI 特性不会损害站点的可访问性,并且严格遵守 Web 标准。
本文假设您已经牢固掌握超文本标记语言(Hypertext Markup Language,HTML)和级联样式表(Cascading Style Sheet,CSS),基本了解 JavaScript 编程和 Ajax。示例应用程序仅使用客户端代码构建;本文演示的技术适用于任何服务器端应用程序框架。要运行示例站点,您至少需要在本地主机上运行一个基本的 Web 服务器。此外,您也可以仅跟随源代码并在我的 Web 服务器上查看运行中的示例站点(参见参考资料中的链接)。
引导用户跟随特定路径 — 即,从产品搜索到付款购买 — 这种需求与 Web 本身的历史一样久。它一直都充满着风险:让用户迷失方向。您的导航路径越长、越复杂,用户经历的内容就越多。您需要为用户提供足够的信息,以防止他们在导航过程中失去兴趣。
在 Web 1.0 世界,购物站点通过构造一条流畅的路径(从搜索和结果到选择和购买)流线化用户体验。当购买路径提供的信息无法满足用户需求时,他们需要通过导航找到提供更多信息的产品细节或比较页面。这种方法存在的问题是,它们使用户离开了购买路径,增加了用户放弃购买的机会。而且还难以维护,因为您的导航逻辑必须存储与用户如何到达此死角相关的信息。
弹出窗口似乎提供了一个解决方案。通过弹出窗口提供补充信息,主窗口中直接的分布路径不会受到干扰。然而,不幸的是,弹出窗口容易使人混淆和反感。它们可能比上面的导航弯路更容易维护,但是它们很可能使用户退出您希望其完成的购买流程。
幸运的是,开源 JavaScript 库提供了一种简单方式,可以彻底摆脱导航弯路和弹出窗口。本文将演示如何使用 Ajax 和 Dynamic HTML (DHTML) 技术在工具提示、lightbox 和其他模式窗口中呈现补充信息。由于这些元素可以动态地插入任何页面,它们能够保持从主页到购买的快速、分步路径。
本文中的示例应用程序主要针对电子商务。我已经构造了一个虚构的购物应用程序Customize Me Now,允许用户定制和购买一组不同的产品:批萨、旅行包或有价证券。当然,在实际中,这些产品类别绝不会出现在同一个站点上。但是,将它们放在一起可以演示许多站点面对的复杂、真实的导航难题。
本文首先提供一个 Web 1.0 版的 Customize Me Now,然后将其改进为 Web 2.0 版,当您了解到补充信息只是通过一个 Ajax 调用提供时,就能想象到导航路径有多么的流畅。此处涉及的技术适合于任何需要保持简单性并能引导用户的流程。配置产品、做一个调查、注册一些服务,或者只是完成一个注册表单 — 所有这些流程都可以使用 Ajax 实现流线化。
现在,也许不再需要介绍 Ajax 了:在 Web 开发领域到处都是它身影。这些年来,聪明的编程人员一直使用 JavaScript 代码逐步更新 Web 页面,而不再与服务器往返通信。但仅仅是因为xmlHttpRequest
对象的采用 — 最初是一个 Windows® Internet Explorer® 扩展,但现在支持许多不同的浏览器 — 才使 Ajax 流行起来的。无论何时,只要您看到一个与桌面应用程序非常相似的
Web 应用程序,那么它很可能采用了 Ajax。本文无意讨论 Ajax 编程的基础知识,但是您将使用到许多使用 Ajax 技术的开源库。
Ajax UI 通常使用工具提示、lightbox 和模式窗口。它们都是指一个浏览器视区(viewport)的弹出屏幕,而不是在一个独立的窗口中运行。工具提示(Tooltips)通常是一些提供上下文内容的小型窗口,将鼠标悬停在一个触发器元素上就会显示。模式窗口(Modal windows)通常比较大,而且通过一个单击事件触发。Lightbox是一种特殊的模式窗口,它通过半透明的重叠将窗口的原始内容和模式内容分隔开。任何一种这类容器都可以填充各种内容:使用 DHTML 技术隐藏的内联内容;通过 Ajax 调用从服务器拉取的新内容;或者拉入 iframe 中的完整的独立文档。流行的 DVD 租赁服务 Netflix 提供了一个关于这些界面元素的出色示例。
工具介绍:jQuery、GreyBox、ThickBox、JTip 和 jQuery 表单
自从 2005 年 Ajax 开始流行之后,开源 JavaScript 工具箱不断增多。每个工具箱都有自己的优点、缺陷和特性,但是出色的工具箱隐藏了浏览器的差异,并提供了一个针对 Ajax、DHTML 和视觉效果的出色的跨浏览器应用程序编程接口(API)。一些解决方案(比如 Google Web Toolkit)使用服务器端 Java™ 代码自动生成客户端 JavaScript 代码。但是,大多数都使用本机 JavaScript 库。
您将使用一个这样的库,jQuery。自从 2006 年首次登场,jQuery 因其优雅的 API 和谦逊的 JavaScript 而变得非常流行。使用 jQuery,几乎无需对服务器代码、HTML 标记或 CSS 进行任何更改,您就可以将一个未使用 Ajax 的 Web 1.0 站点转变为一个通过 Ajax 增强的 Web 2.0 站点。在运行时,您的 JavaScript 代码将会在浏览器内部转换现有的 HTML 元素和行为。如果 JavaScript 被禁用或者不受浏览器支持,标记将会按原来的方式运行。这种渐进增强原理可以确保您的 Web 应用程序仍然能够被广大用户访问。物理条件较差的移动设备、辅助性软件,或者甚至是 10 年前的 Web 浏览器:所有这些都能够运行您的应用程序。
除了支持渐进增强之外,jQuery 还允许您利用大型的、活跃的插件开发人员社区。许多 JavaScript 工具箱都试图预测所有可能的开发人员需求,但是 jQuery 只关注基本原理。其核心库仍然很简洁,而附加功能是通过开源社区的插件来提供的。具体来讲,您可以利用以下插件:
- ThickBox:由 Cody Lindley 开发
- jQuery Forms:这是由 jQuery 社区合作开发
- JTip:由 Cody Lindley 开发,并由 jQuery 社区进行扩展
- GreyBox:由 Amir Salihefendic 开发
以下小结帮助您了解 Customize Me Now 1.0 — 它的用户体验和源代码。
图 1 展示了 Customize Me Now Results 页面和一个信息弹出窗口。它演示了站点能够向用户提供的与他们定制的产品有关的信息。尽管最佳的用户路径是从搜索和结果到定制和购买的直线路径,但该界面却提供了一些迂回的路径。站点使用传统的弹出窗口显示每个产品和产品选项的一小段上下文信息。单击Pizza,您将会看到关于站点的批萨产品的信息。单击Cheese,您将会看到关于您的批萨可用的奶酪的信息。此外,用户可以导航到厂商的 Web 站点 — 同样通过弹出窗口呈现。
图 1. Results 页面 1.0
如果用户想要获得更多信息,站点就会提供一个 Product Details 页面,其中包括每个产品的更详细信息 —— 图片、文章、用户评论等等。最后,如果用户想要将一个产品与其他产品进行比较,他可以在 Comparison 页上逐个查看这些产品。在这些资源中进行导航非常复杂。由于用户需要定制每个产品,很难在每步操作中都提供一个Add to cart链接。站点鼓励用户定制、然后添加到购物车中。但是也允许用户跳过这些步骤,使用一组默认选项添加到购物车,在稍后进行定制。
图 2 展示了 Customize Me Now 1.0 的站点地图。它显示了用户的路径非常复杂。大多数屏幕都链接到至少 2 或 3 个其他屏幕。
图 2. Customize Me Now 1.0 站点地图
Customize Me Now 的功能演示代码只提供了客户端部分:HTML CSS、JavaScript 代码和图像文件。在实际中,您显然还需要一个大型的服务器端组件:Microsoft® ASP.NET、Java 技术、Ruby on Rails、Django 或 PHP。但是 jQuery 的美妙之处在于,它纯粹关于客户端。您可以使用 Ajax 简化您的用户体验,无需服务器端组件。我没有提供任何服务器端代码,因为这些细节对于这个项目无关紧要。您只需知道当您打开一个 HTML 文件时,就会有一个 PHP 模板、一个 JavaServer Pages™ (JSP) 文件或任何其他将 HTML 发送到服务器的文件。
下载了 1.0 版应用程序的源代码之后,请看一下其中一个页面的标记。它应该与清单 1 类似。
清单 1. results.html 1.0 的 HTML 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Customize Me Now: Search Results</title> <link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/> </head> <body id="CMN"> <!--[header goes here]--> <div id="main"> <form method="GET" action="comparison.html"> <h1>Search Results</h1> <div class="buttons"> <input class="button" type="submit" name="submitTop" id="submitTop" value="Compare Selected Products" /> or <a href="index.html">search again</a> </div> <table class="searchResults"> <thead> <tr> <th>Product</th> <th>Description</th> <th>Options</th> <th>Compare</th> <th>Actions</th> </tr> </thead> <tr> <td class="name"> <a target="productPopup" href="productPopup.html?product=A">Pizza</a> </td> <td class="desc"> A delicious Italian treat.<br /> [<a href="detail.html?product=A">full product details</a>] </td> <td class="options"> <ul> <li> <a target="optionsPopup" href="optionsPopup.html?product=A">crust</a> </li> <li> <a target="optionsPopup" href="optionsPopup.html?product=A">cheese</a> </li> <li> <a target="optionsPopup" href="optionsPopup.html?product=A">toppings</a> </li> </ul> </td> <td class="action"> <input type="checkbox" target="productPopup" name="compareA" id="compareA" value="true" checked="checked"/> </td> <td class="action"> <a class="button" href="customize.html?product=A">customize product</a> <a class="button" href="cart.html?product=A">add to cart with default options</a> </td> </tr> <!--[additional table rows go here]--> </table> <div> <div class="buttons"> <input class="button" type="submit" name="submitBottom" id="submitBottom" value="Compare Selected Products" /> or <a href="index.html">search again</a> </div> </form> </div> <!--[footer goes here]--> </body> </html> |
本文将介绍将 Customize Me Now 改进为 2.0 版的过程,本系列的第 2 部分还会进一步开发。
要将一个 Ajax 行为层添加到您的站点,第一步是下载所有的开源库。如果您从下载小节下载了示例 2.0 应用程序,那么所有的库都应包含在其中了。如果想要下载这些库的最新版本,您可以从下载小节重新下载一次。
接下来,为 jQuery 和表单插件创建一个 /js 目录。注意,GreyBox、ThickBox 和 JTip 都需要自己的目录;它们与图片、CSS 文件和多个 JavaScript 库绑定在一起,所有这些都要求特定的目录结构。当链接到您的 CSS 和 .js 文件时,您必须包含一小段脚本,用来为 GreyBox 设置正确的根目录指针。这个指针必须是一个绝对目录路径,因此您可能需要在自己的代码中调整该值。完成之后,HTML 文件的头部元素应该与清单 2 类似。
清单 2. Customize Me Now 2.0 头部元素
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Customize Me Now: Shopping Cart</title> <!--customizemenow assets--> <link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/> <!--jquery assets--> <script type="text/javascript" src="../js/jquery-1.2.1.min.js"></script> <script type="text/javascript" src="../js/jquery.form.js"></script> <!--thickbox assets--> <script type="text/javascript" src="../thickbox/thickbox.js"></script> <link rel="stylesheet" type="text/css" href="../thickbox/thickbox.css" /> <!--jtip assets--> <script type="text/javascript" src="../jtip/scripts/jtip.js"></script> <link rel="stylesheet" type="text/css" href="../jtip/css/jtip.css" /> <!--greybox assets--> <script type="text/javascript"> /*this needs to be a non-relative reference*/ var GB_ROOT_DIR = "/customizemenow/2/0/greybox/"; </script> <script type="text/javascript" src="../greybox/AJS.js"></script> <script type="text/javascript" src="../greybox/AJS_fx.js"></script> <script type="text/javascript" src="../greybox/gb_scripts.js"></script> <link rel="stylesheet" type="text/css" href="../greybox/gb_styles.css" /> </head> |
使用 ThickBox 和 jQuery 将辅助链接转换为 lightbox
由于 jQuery 及其插件遵循渐进增强的原则,您几乎不需要定制 JavaScript 代码来创建 Ajax 功能。您只需向现有的 HTML 标记添加特定的属性。您的 JavaScript 库将解析 Document Object Model (DOM) 以寻找这些特殊属性,然后向拥有这些属性的元素添加合适的行为。jQuery 支持这种编码风格,当所有标记被呈现时它将自动解析 DOM。如果研究一下 jQuery 插件的底层操作,您将会发现它们都将自己的事件模型委托给了核心jQuery
对象及其ready
方法。
现在您已经了解了背景,接下来使用 jQuery 简化您的导航。使用 ThickBox 将不属于主购买路径的任何页面由常规页面转换为 lightbox 页面。首先从 Product Details 页面开始,让您的用户可以从站点的任何地方查看产品,而无需离开主购买路径。
ThickBox 很容易调用。只需向每个相关的链接添加一些特殊属性:
-
thickbox
的class
属性。这个特殊的class
属性告诉 ThickBox 应该注意此元素。 -
一些 querystring 值:
-
KeepThis=true
和TB_iframe=true
:这些值告诉 ThickBox 在一个经过 iframe 处理的 lightbox 中呈现此链接。 -
height=400
:ThickBox 窗口的高度,以像素为单位。可以是任何值,本例中设置为 400。 -
width=600
:ThickBox 的宽度,以像素为单位。可以是任何值,本例中设置为 600。
-
由于您已经使用 querystring 将产品代码传递到 Product Details 页面,所以只需使用 ampersands (&) 将您的 ThickBox 值附加到现有 URL 上。将这些属性添加到 Product Details 链接之后,每个弹出链接应该与清单 3 类似。
清单 3. ThickBox 链接的 HTML 代码
<a href="detail.html?product=A&KeepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">product details</a> |
现在已经解决了 Product Details 页的问题,接下来改进 Comparison 页。到达此页的惟一途径是通过表单提交;用户必须使用复选框选择需要比较的产品。只能使用 jQuery Forms 呈现该表单提交的结果,jQuery Forms 是一个库,它将一些方便的方法和事件挂钩(hook)封装到ajaxForm
对象中。使用ajaxForm
和少量的定制
JavaScript 代码,您就可以直接调用 ThickBox 的tb_show
方法。为此,将清单 4 中的脚本片段添加到 results.html 的头部。
清单 4. 从一个表单调用 ThickBox 的 JavaScript 代码
<script type="text/javascript"> /*create a thickbox for our form submittal*/ //when the document is ready $(document).ready(function() { //wrap form#comparison in an ajaxForm object $('#comparison').ajaxForm({ //intercept the submit event with a callback beforeSubmit: function(formData, jqForm, options) { //serialize form data; append to the form action; tack on ThickBox params var URL = jqForm[0].action + "?" + $.param(formData); URL += "&KeepThis=true&TB_iframe=true&height=400&width=600"; //call ThickBox directly var caption = null; var imageGroup = false tb_show(caption,URL,imageGroup); //cancel the form submission by returning false return false; } }); }); </script> |
这段代码展示了 jQuery API 的简单性。通过少量代码,您就截取了一个 HTML 表单的正常提交,并执行了一些定制 JavaScript 代码。使用这种技术,您可以在允许提交表单之前执行定制验证逻辑,或者在表单提交之后触发一个定制事件。在本例中,您需要避免提交表单。相反,我们将手动 “伪造” 表单提交生成的 HTTP 请求,以便将表单的目标定向到 ThickBox 窗口。
用户并不知道所有这些后台操作。他们只知道在提交表单之后,将在模式窗口中看到结果。查看 Comparison 页面之后,用户可以关闭 ThickBox 窗口,然后返回来定制和购买产品。
使用 ThickBox 呈现 Product Details 和 Comparison 页面的惟一问题是,对于 ThickBox 窗口来说页面太大了。您可以更改传递给 ThickBox 的页面宽度和高度值,但是如果用户使用较小的视区又该怎么办?您不想让 ThickBox 覆盖整个窗口,更不想让它延伸到视区以外。您只需将inline
的class
添加到它们的主体标记,重新设置
details.html 和 comparison.html 的样式。然后,将清单 5 中的 CSS 声明添加到customizemenow.css
。
清单 5. ThickBox 的 CSS
#CMN #main.inline { width: 600px; } |
模式窗口实现过程的最后一步是,限制 Product Details 和 Comparison 页面中不希望与用户交互的元素。由于这些页面现在只是为了提供信息,所以无需包含操作链接和按钮。也无需显示您的导航栏或其他 chrome。
可以通过几种方式实现此目的。可以从页面删除这些元素,但是这不符合您的渐进增强策略。不支持 JavaScript 的用户转到这些页面之后无法退出或继续购买流程。您也可以将 querystring 参数附加到您的链接,让服务器端框架使用不同的模板呈现这些页面。在实际中,您很可能会这么做。但是此处还有另一种有效方式,这种方式只依赖客户端代码:老式的<noscript>
标记。如果将每个元素都包装到一个<noscript>
标记中,那么只有非
JavaScript 的用户代理能看见它:这些用户正是您所希望的。
页眉和页脚的结果 HTML 代码与清单 6 中的代码类似。
清单 6. 用于 Customize Me Now 2.0 导航的 HTML 代码
<noscript> <div id="footer" class="nav"> <<ul> <li><a href="index.html">search&/a></li> <li><a href="results.html">results</a></li> <li><a href="detail.html">details</a></li> <li><a href="comparison.html">compare</a></li> <li><a href="customize.html">customize</a></li> <li><a href="cart.html">cart</a></li> <li><a href="checkout.html">checkout</a></li> <li class="last"><a href="confirm.html">confirmation</a></li> </ul> </div> </noscript> |
Product Details 页面的主要内容<div>
的 HTML 代码与清单 7 中的代码类似。
清单 7. details.html 2.0 的 HTML 代码
<div id="main" class="inline"> <form method="GET" action="customize.html"> <input type="hidden" name="product" id="product" value="A" /> <h1>Pizza: Product Details</h1> <noscript> <div class="buttons"> <input class="button" type="submit" name="submitTop" id="submitTop" value="Customize Now" /> or <a href="cart.html?product=A">add to cart with default options</a> </div> </noscript> <!--[content goes here]--> <noscript> <div class="buttons"> <input class="button" type="submit" name="submitBottom" id="submitBottom" value="Customize Now" /> or <a href="cart.html">add to cart with default options</a> </div> </noscript> </form> </div> |
Comparison 页面的主要内容<div>
的 HTML 代码与清单 8 中的代码类似。
清单 8. comparison.html 2.0 的 HTML 代码
<div id="main" class="inline"> <h1>Product Comparison</h1> <table class="productComparison"> <thead> <tr> <th>Product</th> <th>Pros</th> <th>Cons</th> <noscript> <th>Actions</th> </noscript> </tr> </thead> <tr> <td class="name"> <a class="jTip" name="About Pizza" id="pizza" target="productPopup" href="productPopup.html?product=A">Pizza</a> </td> <td class="pros"> <ul> <li>Great flavor.</li> <li>Low cost.</li> <li>Fun with friends.</li> </ul> </td> <td class="cons"> <ul> <li>Can make you fat.</li> <li>Not very nutritious.</li> </ul> </td> <noscript> <td class="action"> <a class="button" href="customize.html?product=A">customize product</a> <a class="button" href="cart.html?product=A">add to cart with default options</a> </td> </noscript> </tr> <!--[additional table rows here]--> </table> </div> |
在浏览器中查看 Customize Me Now 2.0 Search Results 页面并启动 Product Details 或 Comparison 页面,您可以看到所有的改进结果。其结果应该与图 3 类似。
图 3. 运行中的 ThickBox
尽管本文涵盖了大量内容 — 向您展示了一些 Ajax 技术和最佳实践 —— 但是我们才刚刚开始。在本系列的第 2 部分中,您将使用 JTip 将弹出链接转换为工具提示,继续改善您的导航。然后,将使用 GreyBox 将 off-site 链接转换为 lightbox。最后,回顾一下示例应用程序背后的所有关键概念,并分析如何使用它们改善用户体验。如果您还想继续学习,您可以更深入地研究 Customize Me Now 2.0 的源代码,并在 Web 浏览器中查看实际效果。
原始演示应用程序的源代码 | customizeOnePointZero.zip | 24KB | HTTP |
经过改进的演示应用程序的源代码 | customizeTwoPointZero.zip | 88KB | HTTP |
更多下载
- 代码示例:jQuery1
- 代码示例:JTip2
- 代码示例:ThickBox3
- 代码示例:jQuery Forms4
- 代码示例:GreyBox5
注意:
- 此开源工具箱是实现 Ajax 功能的基础。编写本文时的最新版本为 1.2.1。
- 此 jQuery 插件允许您用简单的跨浏览器工具提示替代信息弹出框。
- 此插件允许您将产品详细信息和比较页面载入模式窗口。本文中的示例使用的是 3.1 版。
- 由于比较页面需要一些表单参数,因此您必须编写一些定制 JavaScript 代码,以使用 ThickBox 呈现页面。幸运的是,此实用库能够为您做大部分工作。
- 此 jQuery 插件使您能够在一个简单美观的 lightbox 中链接到厂商的 Web 站点。此示例中的版本为 5.53。
学习
-
您可以参阅本文在 developerWorks 全球站点上的英文原文。
-
在我的 Web 站点上查看运行中的Customize Me Now 1.0。
-
在我的 web 站点上查看运行中的Customize Me Now 2.0和所有更改。
-
访问jQueryWeb 站点,了解所有关于 jQuery 的信息并查找其他插件。
-
访问Learning jQueryWeb 站点,加入 jQuery 社区并访问教程和论坛。
-
developerWorksWeb 开发专区包含针对 Web 2.0 开发的大量工具和信息。
-
developerWorksAjax 资源中心包含一个越来越庞大的 Ajax 内容库和有用的资源,可以帮助您立即开始开发 Ajax 应用程序。
-
查阅 “使用 jQuery 简化 Ajax 开发”(Jesse Skinner,developerWorks,2007 年 4 月 10 日),了解 jQuery 原理,查找它的特性和功能,执行一些普通的 Ajax 任务,以及探索如何使用插件扩展 jQuery。
-
“Ajax 和 XML: 使用 Ajax 实现 lightbox”(Jack Herrington,developerWorks,2007 年 9 月 25 日)介绍了如何使用 Prototype JavaScript 库实现 lightbox。
-
查阅Learning jQuery,了解 jQuery。
-
查阅图书jQuery in Action,获取更多的 jQuery 帮助。
-
查阅jQuery Reference Guide,获取更全面的 jQuery 资源。
-
访问 Brian Dillard 的 blogAgile Ajax,获取更多关于 jQuery 和其他 UI 主题的信息。
-
随时关注developerWorks 技术活动和网络广播。
-
浏览技术书店,查找关于这些主题和其他技术主题的图书。
讨论
-
加入 developerWorks 社区。访问developerWorks blog。
Brian J. Dillard 是一名具有 12 年经验的 Web 开发人员,曾经为 Orbitz Worldwide、Reflect True Custom Beauty、Archipelago LLC 和 United Airlines 等公司构建了富用户界面。现在,他是伊利诺斯州芝加哥市的 Pathfinder Development 的 RIA Evangelist,为各类客户构建富 Internet 应用程序,并参与了开源项目,为 Agile Ajax blog 投稿。他是 Really Simple History 的项目主管,这是一个 Ajax 历史和书签库,用于数千个 Web 站点的生产代码中。
相关推荐
【Ajax 改造】指的是利用Ajax技术来优化和提升现有Web站点的用户体验。Ajax,即Asynchronous JavaScript and XML,是一种创建交互式网页应用的技术,它允许网页在不刷新整个页面的情况下,与服务器交换数据并更新...
关于本文重温“Ajax改造,第1部分”使用jTip将弹出窗口转换成工具提示使用GreyBox将off-site链接转换成lightbox有何收获忽略了什么今后的目标最后一点提示:使用而不是滥用Ajax特性下载参考资料Ajax技术改变了大型...
总的来说,jQuery AJAX框架为开发者提供了一套强大且易于使用的工具,以实现高效的数据交互和动态页面更新。通过深入理解这些API和相关的配置选项,你可以更好地利用jQuery优化Web应用的性能和用户体验。
1. **定义WCF服务契约**:使用接口定义服务操作,并使用数据契约定义传输的数据结构。 2. **实现服务契约**:创建服务类实现契约接口,编写服务操作的具体逻辑。 3. **配置WCF服务**:设置服务的行为、绑定和终结点...
1. 引入jQuery库和AJAXCache插件的JavaScript文件。确保它们在HTML文档的`<head>`部分或者在`$(document).ready()`函数中加载。 2. 在需要使用缓存的$.ajax()调用中,添加特定的选项。比如设置`cache: true`以启用...
1. **下载jQuery**:访问官方网站或第三方镜像站点下载最新版本的jQuery文件,例如`jquery-1.5.1.min.js`。 2. **添加核心文件**:将下载的jQuery文件放置于项目的静态资源目录中,如`/js/jquery/`。 3. **在HTML...
1. **使用库和框架**:如jQuery、Prototype等,这些库封装了许多常用的功能,简化了Ajax的开发过程。 2. **优化网络性能**: - 使用压缩工具减少HTTP响应大小。 - 缓存策略:合理设置缓存头信息可以减少不必要的...
10. **调试和测试**:使用Chrome DevTools或Firefox Developer Tools的移动模拟器进行调试,确保在不同设备上的兼容性。 通过阅读指定的博客文章(博文链接已给出),读者可以深入学习到jQuery Mobile的实战技巧,...
在Microsoft Office SharePoint Server (MOSS)中,Ajax(Asynchronous JavaScript and XML)技术的应用可以显著提升用户体验,通过异步更新页面部分,而无需刷新整个页面。以下是一个详细的步骤指南,教你如何在Moss...
- **前端页面设计**:使用HTML/CSS布局页面,并使用jQuery和AJAX实现动态加载数据的功能。 - **后端接口开发**:定义Django视图函数,处理前端发起的AJAX请求。 #### 六、结语 《Django JavaScript Integration ...
- **jQuery对象**:使用`$()`函数选择的元素集合,可以执行jQuery特有的方法。 - **DOM对象**:原生JavaScript中的DOM元素,只能使用DOM API操作。 转换关系: - DOM对象转jQuery对象:`$(domElement)`。 - ...
【标题】:“基于jQuery+ASP.NET技术实现的Ajax在线报价单源码例子”...通过学习和理解这套源码,开发者不仅可以掌握如何使用jQuery和ASP.NET来构建Ajax应用,还能提升在实际项目中处理动态数据和用户体验优化的能力。
标题“Building.a.Web.Site.with.Ajax”暗示了这个主题是关于使用Ajax技术构建Web站点的。Ajax(异步JavaScript和XML)是一种在不重新加载整个网页的情况下更新部分网页的技术,提高了用户体验,使得交互更加流畅。 ...