`
qwex9iao
  • 浏览: 177894 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

两种Web页面局部刷新技术IFRAME与XmlHttpRequest

    博客分类:
  • html
阅读更多
当前,许多设计良好的web站点往往都包含大量的与实际内容相联系的可导航信息。而用于实现导航的HTML标记往往极大地影响你的网站的搜索引擎评价指数,而且也极大地影响访问者页面下载体验感。基于本文中的实现思路,将会有助于你创建基于AJAX技术但又尽可能少地受搜索引擎影响的web页面。

一、 初步设计Web页面
    根据内容与导航相分离的原则,我们的第一步应该是,先在web页面上创建一些将插入可导航元素的占位符。对于每一个可导航元素的连续区域,必须创建一个具有唯一id的独立DIV元素;以便将来方便地在JavaScript代码中标识它。为了防止过度抖动现象,在创作页面期间,目录上方或右边的DIV元素的尺寸应该调整到非常接近你的可导航元素的实际大小;这样,当你使用希望的HTML代码来代替它们时内容就不会移动位置。为此,一种最巧妙的方法是把一个空的适当大小的DIV元素插入到该占位符处。
很简单。你仅需要从可导航DIV元素中删除内容并且插入一个空框,页眉以后将会出现在这里。下面是一段示例代码:

<div id="header">
<div style="height: 100px; width: 100%"></div>
</div>
<div id="contentArticle">
<div id="firstCol">
文章内容放在此处……
</div>
<div id="secondCol" ></div>
</div>
<div id="footer"></div>

    【注意】如果你的web页面使用表格来实现所希望的页面布局,那么请不要把表格单元格重用作占位符;而把DIV元素放到表格单元格内比较好一些。

    已经被从web页面中删除的可导航的元素必须被重新创建为独立的页面。你应该使用静态HTML文件来表达静态内容(这将允许缓冲内容,不管你使用什么样的 web服务器)和在加载它们的web页面上创建显示基于动态元素的服务器端脚本。典型情况下,每一个web页面都应该有唯一一个文章标识符(例如可以使用 URL中的“p=”参数);因此,你需要创建一个能够接受文章标识符并创建右边的栏目的服务器端脚本。在大多数情况中,你可以重用创建嵌入的可导航元素的服务器端代码。
在重新设计这些web页面后,接下来,你就可以实现“AJAX”编程部分了。下面,我们将分别讨论基于嵌入式框架(IFRAME元素)和XmlHttpRequest对象两种方案实现这一过程的思路,并探讨其各自的优劣点。
现在,细心的读者应该感到疑惑,为什么这么复杂?在IFRAME元素中加载导航元素不是更简单一些吗?事实证明,对于此方法还要加一些防止误解的说明为好:
IFRAME具有固定的高度和宽度。如果内容彼此超出,则内容将被剪掉或者IFRAME要加上滚动条。然而,被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。
当在一个IFRAME中时,在导航内容中的链接(一个元素)将装载IFRAME中的新页面,除非你把target="_parent"添加到每一个链接之后。
依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作(如果还保留这个上下文的话)。如果你把导航内容移动主页面上,那么事件处理器能够存取在主页面中定义的函数和变量。
【另注】IFRAME极大地影响到其所开发的网站的搜索引擎优化问题。如今,大多数人的观点是尽可能不要在以推广为主要目标的网站开发中使用此技术。本人也持有同样观点。因此,这种方案宜慎重选用为好。
    在此,回调函数contentLoaded首先检查XmlHttpRequest对象是否已经准备好(第一个if语句),并判断其完成状态(如果请求已完成的话)。如果一切顺利,则从响应中提取HTML标记。接下来的编码即是从服务器返回的响应信息中提取我们所关心的内容。当然,提取HTML代码(除非你使用XHTML,这种情况下,你可以使用新式的XMLDOM接口)的最容易的方法是,使用字符串处理函数来查找<body>和< /body>标志之间的文本。

    与前面描述的基于IFRAME的方法相比,使用XmlHttpRequest对象具有下列优点: 代码更利索,并且不依赖于页面的上下文切换。
   XmlHttpRequest对象能够为我们提供检测和处理错误(通过它的readyState和status属性)功能。而使用IFRAME加载内容时,如果出现错误,则只能显示非常粗略的错误提示,这主要是因为这种技术缺乏对回调机制的支持。
开发人员既能够实现内容元素的平行加载(如在本节中所描述的),也可以以顺序化方式加载页面内容以达到最为有效地利用带宽。

    【另注】使用AJAX技术开发后的网站是否也不利于搜索引擎的优化(或支持)?对此观点,在这种技术刚刚推出时就被争论不休,以至于到现在仍无定论。本人建议,如何你的网站以早期推广为主,则基于各种AJAX技术的内容宜少用为好。当然,如果你的网站已经发展相对成熟(推广相对成功;此时,搜索引擎自然会找上门来),则适当利用AJAX技术自然会极大地提高用户体验感。

四、 小结
    在本文中,我们强调基于web页面内容与包围该内容的可导航元素分离开来的观点来构建网页。因为,这种分离将导致更为集中地描述搜索引擎要搜索的页面内容,而且也有助于减少用户使用低带宽存取的加载时间(因为我们是在可导航元素被下载之前把实际内容显示给用户的)。

    接下来,我们通过示例代码片断简要讨论了使用嵌入式框架(IFRAME)与使用新式的XmlHttpRequest对象两种方案来实现可导航元素的延迟装载。显然,各存在其优缺点;因此,在实际开发网站的过程中,还宜视具体情况来定夺。
分享到:
评论

相关推荐

    关于Ajax与iframe及target的问题

    在Web开发中,Ajax(Asynchronous JavaScript and XML)和iframe是两种常见的技术,它们各自有其独特的用途,但在某些场景下也可能相互结合使用。本文将深入探讨Ajax与iframe的交互,以及如何利用它们来实现特定的...

    Ajax学习资料

    - **局部刷新**:利用`iframe`可以实现页面部分区域的更新,但这种方法存在一定的局限性和复杂性。 **Ajax的基本内容** Ajax的核心组件包括: 1. **异步**:JavaScript的异步特性使得在等待服务器响应时,用户仍可...

    DWR框架学习资料...

    - **AJAX**:DWR的核心是利用AJAX技术实现页面的局部刷新,提高用户体验。 - **Reverse AJAX**:DWR实现的一种特性,即服务器可以主动向客户端推送数据,而不仅仅是响应客户端的请求。 2. **DWR的主要组件** - *...

    让浏览器崩溃的12行JS代码(DoS攻击分析及防御)

    AJAX是一种技术,它允许网页在不重新加载整个页面的情况下,通过与服务器进行少量数据交换,实现页面的局部更新,从而提供快速动态的用户体验。这使得用户能够在浏览过程中更加流畅地进行交互,但同时也带来了...

    lim_3ck_01b_0718.pdf

    lim_3ck_01b_0718

    C2Former: 解决RGB-红外物体检测中模态校准与融合不精确问题的标定互补变压器

    内容概要:本文介绍了一种新颖的变压器模型C2Former(Calibrated and Complementary Transformer),专门用于解决RGB图像和红外图像之间的物体检测难题。传统方法在进行多模态融合时面临两个主要问题——模态错位(Modality miscalibration)和融合不准确(fusion imprecision)。作者针对这两个问题提出采用互模交叉注意力模块(Inter-modality Cross-Attention, ICA)以及自适应特征采样模块(Adaptive Feature Sampling, AFS)来改善。具体来说,ICA可以获取对齐并且互补的特性,在特征层面进行更好的整合;而AFS则减少了计算成本。通过实验验证了基于C2Former的一阶段和二阶段检测器均能在现有公开数据集上达到最先进的表现。 适合人群:计算机视觉领域的研究人员和技术人员,特别是从事跨模态目标检测的研究人员,对Transformer架构有一定了解的开发者。 使用场景及目标:适用于需要将可见光和热成像传感器相结合的应用场合,例如全天候的视频监控系统、无人驾驶汽车、无人

    pepeljugoski_01_0108.pdf

    pepeljugoski_01_0108

    [AB PLC例程源码][MMS_044696]ME Faceplates for 1797 Digital and Analog I-O.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    matlab程序代码项目案例模型预测控制(MPC)基准测试问题的开放集合.zip

    matlab程序代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    lusted_3ck_02_1118.pdf

    lusted_3ck_02_1118

    虚拟同步发电机非对称电网故障下自适应低电压穿越方法的研究与应用

    内容概要:本文提出了用于虚拟同步发电机(VSG)在非对称电网故障期间的一种自适应低电压穿越(LVRT)方法。现有LVRT方法由于故障检测延迟可能导致逆变器损坏的问题以及新的电网标准(GCs)规定了逆变器基资源(IBRs)需要注入负序电流的需求。所提出的LVRT方法采用初始故障时刻电压控制环差补及有功功率环相角调整,使系统能够在正常运行时保持特性不受影响,并在出现不对称故障时立即限制输出电流。模拟结果显示,新方法不仅能迅速响应并抑制故障电流,在不同类型的不对称故障条件下亦能良好表现。此外,该方法不需要参数设计,且能够最大限度利用IBRs电流,同时维持IBRs电压源特性和符合新的GCs。 适合人群:电力电子与能源系统的学术研究人员和技术人员,熟悉虚拟同步发电技术以及LVRT相关背景的工程师。 使用场景及目标:主要适用于包含虚拟同步发电机的新能源系统中的故障穿越技术改进,以满足最新国际电气电子工程师协会(IEEE)的电气互连标准,并解决当前LVRT方法无法全面符合规范的问题,确保系统的安全可靠运行。该研究可用于改进新能源并网逆变器的设计。 其他说明:文章通过对现有的LVRT控制方法进行改进来

    AI工具DeepSeek的应用指南:从入门到高级提示词策略与实战案例

    内容概要:本导读书籍《DeepSeek从入门到精通》旨在为读者提供对AI工具DeepSeek全面的认识。书籍首先概述了DeepSeek作为一个国产、开源的多功能AI平台的功能和特点,接着详细介绍了如何入门操作,并通过实战演示来帮助用户掌握不同应用场景下的高级提示词策略和使用技巧,如针对不同类型的提示语的设计方法和实际应用。特别是在‘发散’部分,对提示语进行了深入剖析,不仅探讨了提示词的高级技术和策略,还包括AI幻觉、人机协作以及知识生成等方面的讨论,有助于用户深入理解和灵活应用提示词,在各种任务中提高效率并获得更好的效果。最后一章展望了AI与人类在未来内容创作中的角色转变和发展趋势。这本详细的指导手册能帮助读者形成系统的AI工具认知和技术体系,快速上手并在实践中不断加深对该领域的理解。 适用人群:面向希望深入了解AI工具尤其是提示词设计的专业人士、开发者及所有有兴趣探索这一领域的个人;适合有一定技术背景的从业者。 使用场景及目标:帮助初学者快速启动DeepSeek的日常使用,为中高级用户提供更深入的高级功能理解和实践,特别是涉及提示词构建的技术细节,助力于提升特定任务处理效率和结果品质

    支持适用于PERC H330/H730/H730P/H830/H730P系列RAID卡MX/FD33xD/FD33xS控制器的驱动安装指南

    下载 1. 单击“立即下载”,以下载该文件。 2. 出现“文件下载”窗口后,单击“保存”,以将文件保存到硬盘。 安装 1. 浏览至文件下载目标位置并双击新下载的文件。 2. 仔细阅读对话窗口中显示的发布信息。 3. 下载并安装对话窗口中标识的任何必备项,然后再继续。 4. 单击“Install”(安装)按钮。 5. 按照其余提示执行更新。 安装 1. 将解压的文件复制到可访问Windows的介质。 2. 将系统重新引导至Windows操作系统。 3. 打开“服务器管理器”->“设备管理器”->“存储控制器”,然后单击“PERC控制器”。 5. 单击“更新驱动程序软件”,并按照提示更新驱动程序。 4. 重新引导系统以使更改生效。

    Saxena_01_0107.pdf

    Saxena_01_0107

    [AB PLC例程源码][MMS_040317]DINT Conversion of INT data type and Arithmetic operations like Div, Mul.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_046353]using RSlogix v16 alarming instructions with RSViewSE-32 and.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    第8节模型预测控制在运动规划中的应用

    第8节模型预测控制在运动规划中的应用

    2024年 中国统计年鉴excel整理版.zip

    覆盖了人口统计、经济发展、教育体系、环境资源等多个关键领域,旨在为研究人员、政策规划者及相关各界提供全面洞察社会现状与趋势的窗口。 2024年修订内容如下: 资源和环境–增加“倒塌房屋间数”。 农业–增加“大豆”、“花生”、“油菜籽”、“芝麻”“甘蔗”“甜英”业及辅助性活动”产值和指数。 工业–增加“智能手机”产量。 卫生和社会服务–增加“分地区儿童健康情况`和“分地区孕产妇健康情况”。 文化和体育–增加公共图书馆“少儿文献数”和国有博物馆“未成年人参观人次”情况。 城市、农村和区域发展–增加“乡村办水电站”“农村水电装机容量”“农村水电年发电量”情况。 科学技术–新增分行业新产品开发经费支出、新产品销售收入等指标。 运输、邮电和软件业–公路营业性客运量包括班车包车客运量、公共汽电车城际城乡客运量、出租汽车(含巡游出租汽车、网络预约出租汽车)城际城多客运量 运输、邮电和软件业–公路客运周转量包括班车包车客运周转量、公共汽电车城际城乡客运周转量、出租汽车(含巡游出租汽车、网络预约出租汽车)城际城乡客运周转量。 就业和工资、固定资产投资、工业、建筑业、批发和零售业、房地产、科学计算等修订主要内容: (1)拓展适用范围 为了更全面覆盖统计调查对象,新标准按照市场主体登记注册管理实际对分类范围作相应调整,从“企业”扩大至所有“市场主体”,增加了“农民专业合作社(联合社)”和“个体工户”等类别。 (2)取消相关类别 由于《中华人民共和国私营企业暂行条例》已被废止,根据《中华人民共和国公司法》《中华人民共和国个人独资企业法》《中华人民共和国合作企业法》,将相关“私营有限责任公司”、“私营股份有限公司”分别列入“有限责任公司、“股分有限公司”范围类别。引国,“私营独资企业”调整为“个人独资企业”,“私营合伙企业”调整为“合伙企业”。 (3)调整分类结构 一是关于“内资企业”。根据《中华人民共和国市场主体登记管理条例》规定,将原内资企业分类“国有企业”“集体企业”、“股份合作企业”、“联营企业”、“有限责任公司”、“股份有限公司”、“私营企业”和“其他企业”等8个类别调整为“有限责任公司”、“股份有限公司”、“非公司企业法人”、“个人独资企业”、合伙企业”和“其他内资企业”等6个类别。其中,原“国有企业”、“集体企业”、“股份合作企业”“联营企业”纳入新类别“非公司企业法人”下;原“私营企业”类别取消(上段已述)。二是关于“外商投资企业”和“港澳台投资企业”。根据《中华人民共和国外商投资法》规定,将原外商投资企业分类“中外合资经营企业”“中外合作经营企业”、“外资企业”、“外商投资股份有限公司”和“其他外商投资企业”等5个类别调整为“外商投资有限责任公司”、“外商投资股份有限公司”、“外商投资合伙企业”和“其他外商投资企业”等4个类别。港澳台投资企业参照外商投资企业分类方法调整。 (4)规范类别名称根据市场监管部门对登记注册管理的规范名称,分别将原“国有企业”、“集体企业”更名为“全民所有制企业(国有企业)”、“集体所有制企业(集体企业)” (5)统一内资范围根据《中华人民共和国外商投资法》和相关部门规定,将登记注册为内资公司的有限责任公司(外商投资企业投资)、登记注册为内资公司的股份有限公司(上市、外商投资企业投资)等市场主体,即外商投资企业市场主体在中国境内的再投资市场主体,由原标准中的“外商投资企业”调整为新标准中的“内资企业”相关类别。

    [AB PLC例程源码][MMS_046682]ME Faceplates for 1734 Digital and Analog I-O with Descriptions.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    [AB PLC例程源码][MMS_046233]Tank Volume AOI.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

Global site tag (gtag.js) - Google Analytics