易截截图软件、单文件、免安装、纯绿色、仅160KB

Ajax特效:动态加载的FAQ 之一


图1.1  实例运行效果
1.1.1  技术要点
动态加载FAQ的过程主要是利用XMLHttpRequest(以下简称XHR)对象与服务端通信,根据用户单击的感兴趣问题动态将内容加载到页面中。在具体实现时,有两点要注意的内容。
1.对每个问题进行唯一标识
FAQ主要包含问题与解答两个部分,用户单击一个问题时,服务器必须知道请求的是哪个问题的解答,所以必须对每个问题进行唯一标识。标识的方法很多,在本例中简单使用数字进行标识。每个问题在页面上表现为超链接,单击链接将触发onclick事件,调用loadFAQ函数,传入问题标识,获取对应的解答。
单击后并不是要真正链接到一个新的页面,所以在<a>标签的onclick事件中return false取消原有链接的功能。每个答案分配一个div用于显示,每个div的id属性命名规则为,在对应的问题数字标识前统一增加“faqDetail”。
2.对已加载的解答不重复向服务器发出请求
问题的解答加载后,将显示在对应问题下方的div中。当用户再次单击问题时该div将隐藏起来。如果用户第三次单击相同的问题,由于解答已加载到页面,所以不需要再次向服务器发送请求,只需将隐藏的div显示出来即可。
隐藏和显示主要通过设置div样式中的display属性来完成,当display属性设置为“none”时隐藏,设置为“block”时显示。判断是否需要发出请求,可以检查div的innerHTML是否包含内容。


相关文档:

VS2005 使用AJAX直接调用后台方法

首先都是使用VS.Net2005创建一个 ASP.Net AJAX-Enabled Web Application
 1、使用AJAX直接调用后台方法:
后台代码:
namespace AJAX1
{
    public partial class _Default : System.Web.UI.Page
    {
        // 需要标识为WebMethod ......

c#中的Ajax上手篇---非同步请求responseText

先来写一个简单的Ajax程序,使用非同步的方式向服务器端取得TXT文件中的内容,并加以显示。首先,请准备一个HelloAjax.aspx(HTML也可):
*HelloAjax.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelloAjax.aspx.cs" Inherits="HelloAjax._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD ......

c#中的Ajax上手篇---非同步请求responseXML

上篇介绍了如何在Ajax客户端与服务器端之间传送简单的文本数据,其实,也可以使用XML作为数据传送、沟通的格式,Ajax客户端若要发送XML,基本上就是将XML作为字符串,在POST请求时发送,例如:
*HelloAjax.js
var xmlHttp;
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttp = new ......

使用 jQuery 简化 Ajax 开发

jQuery 是一个JavaScript 库,它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。
jQuery 是什 ......

ajax 与Ext2框架在.net程序中的应用

 一 .下面先对asp.net ajax做一个简单的介绍:
asp.net ajax 的 前身就是我们大家熟悉的Atlas ,后来被正式的纳入到vs框架中来。通过对asp.net ajax的应用 ,我们可以方便的将ajax的特性引入到项目中来,显著的提高用户体验。其实asp.net ajax的特点也是继承了微软产品一贯的特点,简单易用。功能强大。只需要掌握asp ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号