当前,许多设计良好的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对象两种方案来实现可导航元素的延迟装载。显然,各存在其优缺点;因此,在实际开发网站的过程中,还宜视具体情况来定夺。
分享到:
相关推荐
创建XMLHttpRequest对象var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("get", "GetDate.ashx?id=" + encodeURI("中国") + "&ts;", false); xmlhttp.onreadystatechange = function () { if ...
使用XMLHttpRequest访问Web Services(ASP.NET Web)
tools.jsp 兼容创建xmlhttprequest,update.jsp前台页面,getColor.jsp后台页面。这个只能让初学者对ajax有感性认识。
Ajax无刷新读取数据库数据技术是Web应用程序中非常重要的一项技术,通过使用JavaScript、XMLHttpRequest和ASP.NET技术,可以实现无刷新更新数据的功能。该技术可以提高用户体验,提高应用程序的性能。
[王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用
XmlHttpRequest与XMLDOM的完整使用示例
针对B/S应用中的Web服务器与浏览器间频繁操作导致Web应用执行速度慢的问题,提出了一种基于AJAX的Web无刷新页面更新数据的方法。
尽管与其说Ajax是一种技术,不如说是一种技巧,但如果没有对XMLHttpRequest的广泛支持,Google Suggest和Ta-da List可能不会像我们看到的有今天这样的发展,而你可能也不会看到手上的这本书! XMLHttpRequest最早是...
传统的聊天室基于客户端网页的自动刷新技术而实现,它的主要缺点是不断刷新页面造成屏幕的闪动,而经过了Ajax改造后的聊天室,每次只获取最新的发言信息,并将获取结果动态写入页面,不会有以上的缺点 ………………...
JSP XMLHttpRequest动态无刷新及其中文乱码处理.docx
什么是Ajax? 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态...下面这篇文章主要介绍的是利用ajax实现与php数据交互,并局部刷新页面的相关内容,下面话不多说,来一起看看详细的介绍:
AJAX技术使用XMLHttpRequest对象传递参数的中文乱码问题
如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。 随着Web2.0和SNS的兴起,Web应用对跨域访问的需求...
"AJAX技术在Web应用中的研究与实现.pdf" AJAX技术是当前Web应用开发中的一种关键技术,它可以实现异步交互,提高Web应用程序的数据交换速度和响应速度。本文将对AJAX技术的工作原理、主要技术和应用情况进行研究和...
XmlHttpRequest详解XmlHttpRequest详解XmlHttpRequest详解
WEB开发 之 AJAX - 创建 XMLHttpRequest 对象.docx
ajax XMLHttpRequest。。。。。。
谢从华,高蕴梅,黄晓华.Web系统与技术[M],清华大学出版社,2018年6月 第1章 Web系统与技术的基础知识... 1 1.1 Internet介绍... 1 1.1.1 Internet含义... 1 1.1.2 TCP/IP协议... 1 1.1.3 域名... 2 1.1.4 URL...
所有发送、接收、显示在线用户列表等皆采用ajax技术完成,实现无刷新聊天的功能 Ajax的核心是JavaScript XmlHttpRequest对象。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术 使用: 首先...
XMLHTTPREQUEST对象创建,交互,回调底层代码。。。