网页设计实验报告及代码精品资料.doc

《网页设计实验报告及代码精品资料.doc》由会员分享，可在线阅读，更多相关《网页设计实验报告及代码精品资料.doc（31页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、潍坊学院本科毕业论文26 1 网站的功能现如今,网站开发技术日益发展完善,基于web的网站设计与开发已成为当今企业和学校积极探索和发展的热门技术.带有交互性的动态网站设计也越来越受到人们的重视.出现了各种网站开发工具，如dreamweaver、frontpage、记事本等，同时也需要一些网页美化工具，如photoshop、firework、flash等等。在网站制作中要用到Html语言、javascript、vbscript脚本语言、asp 、php、 jsp等网站开发技术，xml技术等等，同时还能提供一些组件来丰富页面内容。动态网站还可与数据库连接，实现交互功能。2网站设计制作的理论和技术基

2、础21 网站用户界面设计原则一个设计优秀的用户界面不仅要能够充分发挥软件的功能，而且要让用户使用方便。用户界面设计的一个最基本也是最重要的依据是以用户为中心。因为设计软件是给人使用的，一个软件使用效率的好坏取决于软件本身的设计和人是否能够方便的使用。因此，用户界面的设计必须以用户为中心。211 一般软件的用户界面设计原则(1) 一致性一致性体现在用户界面的各个方面，包括界面元素、命令名称、信息表示和操作方式。(2) 容错性 一个好的用户界面应该在设计时尽量避免可能的出错情况，对于不可避免的错误，应该尽量给用户提供恢复的手段。对于可能发生灾难性后果的命令/操作，应给出警告并要求用户确认。(3)

3、反馈 一个好的用户界面在任何情况下都应该对用户的操作做出反馈(除非用户不需要这种反馈)。反馈使用户感觉到他在操作该软件，了解软件的当前运行状态。212 网站用户界面设计原则网站的用户界面设计，除了要掌握用户界面设计的一般原则外，还要把握其特殊性，因为网站网页的主要功能是向浏览者提供信息，所以网站的界面设计和其它应用软件界面设计存在一定的差异。下面，根据界面设计的一般原则，结合网站开发平台的实际情况，认为网站开发平台界面设计应遵循以下基本原则，如表2-1所示。表2-1 网站开发平台界面设计原则界面设计的一般原则网站界面的设计原则1一致性统一的风格2容错性、反馈良好的交互3审美性视觉效果4简易性网

4、页洁简5传输速度22 网站用户界面设计技术221 网站的页面布局网站开发平台的页面布局总体上遵循了网站界面设计原则。根据网站开发平台的整体组织结构，可以分两类页面:首页的页面布局、后台管理页面布局。下面介绍本网站的页面布局：(1) 首页的布局整个页面的布局采用了“三型”结构，主色调采用了桔红的暖色色调，文字的大小采用目前网上非常流行的9pt，字体是宋体，对于叙述性的文字，采用黑色，对于链接，活动的采用红色。教育科学与技术系的标志图片logo放在最上面，logo下面是整个网站的导航栏，主体部分左边放置辅助模块，右边放置主要的新闻和消息，底部是版权。如图2.1所示。图2.1 首页的布局(2) 后台

5、管理布局网站的后台主页面是用框架布局比较简单，用表格布局页面，点击每个超连接就会打开一个新的页面，便于管理，如图2.2所示。图2.2 后台管理布局222 网站的统一版面设计技术 由于网站中的网页要求有统一的风格和良好的视觉效果，即要求网站有统一的版面，由于级联格式页(CSS )技术能集中管理WEB站点的格式元素(字体、背景、文本、223 界面元素定位技术界面元素定位是版面布局的重要内容之一。要使网页的界面布局具备报纸、杂志等漂亮的布局，必须要对页面的界面元素进行定位。在网站开发平台中采用了以下几种界面元素的定位技术:表格定位、块表示符和定位和CSS定位，下面分别进行讨论。23 网站制作运用的开

6、发技术教科系网站在Windows XP系统下，在Dreamweaver软件中设计制作的，用到的语言有html语言和脚本语言。本系统动态开发技术主要采用了ASP技术(ActiveX Server Pages )，它是新一代动态网页开发技术，具有开发简单、与浏览器类型无关、功能强大、。23 平台的体系结构和开发环境该系统采用了B/S/D(Browser/server/Date server)的体系结构如图2.3所示。 WEB服务器端 Server端 数据库服务器组件ADO和ODBCIIS5.0 和 ASP环境服务器脚本代码教师用户学生用户图2.3 B/S/D的体系结构三层结构中, 第一层(浏览器)

7、 为表示层, 主要用于完成用户接口的功能; 用户在客户端向URL 指定的Web 服务器提出服务申请,Web 服务器通过HTTP 协议将用户所需的信息传送给客户端。在这里,客户端的作用只是接收信息并用WWW 浏览器显示出来。第二层(为功能层, 主要用于完成客户请求的应用功能,Web 服务器在收到客户的请求后与第三层中的数据库连接并进行数据处理, 而后通过Web 将处理结果传回到客户端。第三层(数据库服务器) 为数据层, 采用Access 网络数据库, 主要完成的数据存储、加工和管理功能。网络操作系统、数据库系统和网络编程技术选择(1) 操作系统平台: Windows xp；(2) 实现环境: I

8、IS 5.0, 后台采用面向对象设计的ASP 编程技术；(3) 数据库： Access 。232 HTML语言 HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述

9、的文件，需要通过WEB浏览器显示出效果。233 脚本语言脚本程序设计在Web程序设计中占有很重要的地位，无论是客户端动态页面设计，还是动态网站设计中的服务器端编程，使用最多的就是脚本语言。在众多的脚本语言中，使用最广泛的是JavaScript和VBScript。这两种语言即可作为客户端脚本语言，又可以作为服务器端脚本语言。JavaScript是一种嵌入在HTML文件中的脚本语言，它是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、页面浏览等用户事件作出反应并进行处理。JavaScript语言具有如下特点：234 ASP技术ASP是一种服务器端的脚本运行环境，利用它我们可以产生和运行动态的、交

10、互的、高性能的web服务应用程序。一个ASP应用程序通常以.asp作为扩展名，ASP文件通常由文本、HTML标志和ASP文件特有的脚本语句组成，其中VBScript是ASP中缺省的脚本语言。客户端通过浏览器向web服务器发送请求，web服务器响应页面请求后调用文件，然后解释执行每一条脚本语句，用ADO组件通过ODBC向数据库服务器发送数据请求及235 数据库访问技术ADO微软公司提供了一种对各类应用程序均适用、采用ODBC接口、通过结构化查询语言SQL对数据库进行访问和操作的总体解决方案，这就是OLEDB，它是一个组件对象模型（COM）接口。可通过对存储在不同信息源上的数据进行统一访问能力。但

11、是OLEDB应用程序编程接口的设计目的是为了给多种多样的应用程序提供优化功能，对Web应用的开发者而言，并不需要如此复杂的API。ADO（ActiveX Data Objects,ActiveX数据对象）技术则是一种良好的Web数据库访问解决方案，其编程接口简单，用它开发应用程序十分便捷。ADO是一个ASP内置的服务器组件，它是一座连接Web应用程序和OLEDB的桥梁，运用它并结合ASP技术可在网页中执行SQL命令，达到数据库访问目的。表 2-2 是ADO对象模型，它反映了ADO对象之间的关系。表2-2 ADO对象模型ConnectionRecordSetParameterErrorComma

12、ndParametersErrorsFieldsField3教科系网站功能及体系结构的设计31 网站教学平台的目标设计教育技术专业网站教学平台各模块的功能如下：311 教师部分的功能应该达到下面的要求(1) 通过教学公告向学生发布信息、制定教学计划；(2) 将教学、专业、课程、实验信息发布到网站上；(3) 在网上发布教案；(4) 在网上发布作业、包括作业题目上载、公布作业、批阅作业，给出学生成绩；(5) 将常用的学习资源发布在网站上，便于学生下载使用；(6) 通过聊天空间与学生进行实时讨论；(7) 教师可以通过后台对页面进行管理,添加修改删除新闻,上传文件。312 学生部分的功能应该达到下面的

13、要求(1) 阅读公告；(2) 在网上完成课程学习；(3) 在网上完成作业、包括作业下载、上传作业内容和作业成绩查询等；(4) 通过讨论组的形式向老师提出问题。32 网站教学平台系统功能分析与设计本网站共分为两个子系统,教师子系统和学生子系统.如表3-1所示。表3-1 教师子系统和学生子系统首页学生子系统教师子系统公告浏览新闻浏览在线学习作业上载资源学习新闻发布公告浏览资源管理作业批改后台维护321 教学内容发布管理员发布网站新闻，这些内容是该网站的主要内容。各种新闻在页面上动态显示,管理员可以通过后台对这些新闻进行添加、修改和删除。另外系统可对教学内容提供查询搜索功能。322 公告功能教师可以

14、通过公告功能发布各项通知，例如以下内容：(1) 招生公告招生简章、招生专业介绍、招生站点联系方式；(2) 规章制度，包括各类管理又件等；(3) 课程安排，包括课程数学方式、课程播放表；(4) 临时通知和教材。323 作业功能 对于作业，学上需要将作业通过上传的方式上交。因此系统需要提供以下功能：(1) 上传：格作业上载到指定地点、并按某种方式进行标识；(2) 批阅：教师可对作业进行批阅判分。324 答疑功能(1) 非实时答疑：系统需要完成一个讨论组的功能， 以便学生和老师能顺利提问和解答；(2) 实时答疑：功能类似于聊天室。学生和老师可以同时登录到系统，进行实时交流。325 后台管理功能后台登

15、陆页面用户名密码验证功能，新闻管理页面对新闻的添加修改删除操作功能。文件上传功能。326 其他功能站内搜索、友情链接等。4教科系网站数据库的设计41 数据库的需求分析表4-1数据库需求分析表管理系统管理员信息表教务公告信息表教学管理信息表专业建设信息表专业介绍信息表课程建设信息表教学系统实验教学信息表实验室信息表科研动态信息表科研项目信息表成人教育信息表学生工作信息表42 数据库的逻辑结构设计在Access中建立数据库文件mdb，此文件包含jjh_admin、jjh_activ、jjh_news、jjh_jiaoxue等数据表。下面是以表jjh_admin、jjh_activ为例说明这些表的逻

16、辑结构。(1) 管理员信息表jjh_admin管理员信息包括ID号、用户名、密码、是超级管理员还是一般管理员。(2) 教务公告信息表jjh_activ教务公告信息表包括ID号、公告标题、公告发布作者、是否推荐、公告来源、图片地址、公告内容、点击次数、发布时间。其逻辑结构如表4-2所示。表4-2 表的逻辑结构表名字段名称数据类型说明jjh_adminadmin_id自动编号字段编号admin_name文本登陆用户名admin_password文本登陆密码admin_flag数字是否为超级管理员jjh_activactiv_id自动编号字段编号activ_title文本公告标题activ_auth

17、er文本公告作者activ_tui数字是否推荐activ_comefrom文本公告来源activ_images文本公告图片来源activ_content备注公告内容activ_hits数字点击次数activ_time日期时间公告发布日期43 后台数据库的配置本系统是在Windows xp系统下开发的，数据库使用的是access 2003。新建数据库并填充内容，命名为mdb。因为网站中是用代码实现的数据库连接，所以这儿不用建立手动建立数据源连接。5网站开发平台的功能实现 在整个网站开发平台中，网站的信息除了存储在文本文件上外，其他都存在Access数据库中。要显示数据库中的数据，必须要连接数据库

18、，调用数据库中的数据表。在这里主要采用了ASP的ADO技术来实现。使用ADO进行数据库的访问主要步骤如下：(1) 建立ADO组件连接对象Set Conn=Server.CreateObject(ADODB.Connection)(2) 打开待访问数据库 打开数据库有两种方式:全路径方式和DSN (Data Source Name)数据源方式。在本系统中，我们用到了一个数据库文件mdb，下面以mdb数据库为例子，用全路径方式来打开该数据库，用该方式不需要象DSN方式配置数据源，方便用户使用。其方式如下: connstr=DBQ=+server.mappath(./jjhmdb/mdb.mdb)+

19、; DRIVER=Microsoft Access Driver (*.mdb); conn.open connstr其中DRIVER= Microsoft Access Driver (*.mdb)表示连接的数据库是Microsoft Access, (3) 建立数据库记录集Recordset对象，访问数据库表 (4) 关闭记录集，断开与数据库的连接Rs.close51 新闻动态显示 对于一个主要用来传递信息的网站，能将数据库中的信息显示在网页中是一项很重要的技术。本网站中有多种新闻和公告需要在网页中显示，这就需要通过调用数据库来动态显示数据库中表的信息。都用到了在数据库中实现记录集分页技术

20、，附录中介绍了这种技术，所以在网页中和分页有关的代码就不再赘述。这儿就以学生工作信息页面student.asp为例，显示表jjh_news中的新闻，如图5.1所示。图5.1 学生工作信息新闻下面对网页中实现主要功能的代码进行分析：在student.asp页面中，通过建立记录集来显示新闻，这里用表格对新闻条目进行布局，具体代码如下：(1) 打开数据库连接，代码省略。(2) 打开记录集对象当用户点击显示的新闻标题时，就会打开一个新页面，新页面中显示的是关于这条新闻的具体信息，这是通过参数传递实现的。其他页面的新闻显示代码如上，只是操作的数据表和查询语句有所差异。52 站内搜索功能在首页的左边有个站

21、内搜索项目，如图5.2所示。图5.2 站内搜索图站内搜索功能主要是指搜索站内显示的新闻信息。通过在类型栏目内输入要搜索的新闻类型，再输入要显示的新闻的关键字，即新闻标题，点击提交后即能在一个新页面显示所搜索的新闻。在页面中通过调用一个过程实现的，代码为： 类 型 : 选择类型 教务信息 教学管理 专业建设 课程建设 (2) 表单将结果提交给search.asp，search.asp网页接收表单信息后，调用数据库，打开记录集，查询是否有所搜索的内容。然后将搜索的新闻记录在页面中显示。search.asp页面的处理代码为：53 后台登陆验证在网页index.asp中实现用户登陆和用户名密码验证，通

22、过如图5.3所示表单进行登陆。图5.3 用户登陆图对用户名和密码进行验证处理的代码如下：在后台管理的每个页面中都有一个check.asp网页，这个网页的功能是检查用户是否登陆，如果用户没有登陆而意图直接进入后台管理页面，则被强制转向到index.asp网页。54 后台新闻管理管理员登陆后台后可以对网页中用到的新闻进行添加、修改和删除操作，后台管理页面主要是用框架进行布局，在框架左侧，点击超连接则会在右侧框架内显示相应的管理页面。在管理页面中显示每条新闻，又有每条新闻相应的修改删除操作，还可对新闻进行添加。整个过程也是通过调用数据库，对数据库中的数据表进行操作实现的。下面以news.asp页面为

23、例，介绍这些操作如何实现。页面如图5.4所示：图5.4 后台新闻管理图用到的关键代码如下：(1) 打开记录集：(2) 页面中的需要操作的文字设置本站新闻管理 添加新闻表格中显示完每条记录集后的修改、删除操作:a href=news.asp?type=edit&news_id=修改 a href=news.asp?type=del&news_id=删除(3) 根据传递的type参数来显示表单，再用action参数传递对表单的操作： 添加新闻表单的具体代码省略，下面是对表单结果的操作：% 在这里，用于实现对上述数据表的操作，主要通过参数传递，再调用数据库中相应的数据表来实现添加、修改和删除的操作。

24、6平台的测试与维护61 平台功能的测试611 新闻动态显示功能打开网站首页，通过链接打开各个功能页面，均能正确显示数据库中的记录内容。612 站内搜索功能在首页的左侧站内搜索板块，先选择所要搜索的新闻类型，然后输入关键字，点击搜索，则在打开的页面中显示标题为所输关键字的新闻记录。如果输入的关键字在数据库中找不到相应的新闻标题，则在打开的页面中提示“没有查询到你要的信息”。613 后台登陆验证功能在地址栏内输入进入后台页面的目录，打开index.asp页面，在登陆表单中输入管理员用户名密码，如果输入的正确，则直接进入后台管理的框架页面admin.asp，如果输入的用户名密码不正确，则打开一个错误

25、页面，需要重新输入登陆信息。614 后台新闻管理功能进入后台管理页面后，点击左边导航栏的各个链接，进入各个数据库信息的管理页面。在页面中显示数据库中的记录。点击上方的添加新闻，在下面显示添加新闻的表单，在每个输入框中输入数据后，点击确定添加，则页面中可看到自己添加的新闻已经在表格中显示。点击一条新闻记录后的修改链接，出来修改新闻的表单，在表单中修改新闻后点击确定修改，则在页面中显示已经修改的信息。点击记录后面的删除链接。显示删除表单，点击确定删除后，则在页面中可看到记录已经删除。62 平台的维护本平台的维护主要是对后台数据库中信息的维护，需要进行经常的更新。教师应把系部内最新的公告发布到网页上

26、，把教学管理信息，专业建设信息、实验室新闻，学生新闻等进行更新。结束语未来的社会是网络的社会，处在信息时代的校园里，系部网站更是不可缺少。而网络教学将是未来教学方式有力的补充形式，它以多媒体技术和计算机网络技术为主体，自主的个性化学习与交互式的集体协同学习相结合的现代教学模式，是现代教育发展的趋势。本文的主要工作就是设计和开发了潍坊学院教科系的网站。本文的工作主要包括:(1) 对网络教育和网站设计开发技术的现状进行了分析和研究。(2) 对ASP技术和数据库技术的相关知识进行了介绍。(3) 在对各种理论分析的基础上，利用ASP十IIS+ACCESS的开发模式实现教科系网站的部分功能的设计与开发。

27、本文还有如下问题需待以后进行深入的研究:(1) 整个系统平台的界面比较简单，页面美化不是很好，如何使平台界面更富有吸引力，还需进一步考虑。(2) 系统经过多次修补，代码有点乱，因而还需要进行进一步优化。(3) 由于时间关系，本平台只搭了一个大致框架，所提供的资源和功能并不完备，要做为一个真正的教学平台，系统还显得较单薄，还需要继续扩充相关的功能模块。总之，本文还存在许多问题与不足，望各位专家、老师、同学批评指正，从而使我在以后的学习和工作中做得更好。参考文献1李龙,动态性安全型网站开发平台的研究与开发Zhttp:/210.44.255.144/kns50/scdbsearch/scdetail

28、.aspx?QueryID=2&CurRec=1，2002。 2邢苗条，基于Internet 教学网站系统的设计方案J，现代电子技术, 2002，4。3姚东, DHTML动态网页高级编程M，北京: 人民邮电出版社, 2001。4武延军, 赵彬，精通ASP 网络编程M，北京:人民邮电出版社, 2001。5林义正, HTML&ASP 网页制作教程M，北京: 中国铁道出版社, 2001。6邓鸿英,基于ASP和SQL Server 的电工电子网上答疑系统J，电工电子教学学报, 2002。7何克抗，建构主义革新传统教学的理论基础M，电化教育研究。8刘革平，e-learning系统的教学原则与教学模式研究

29、M，西南师范大学。致谢XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX。附录资料：从 XML 生成

30、可与 Ajax 共同使用的 JSON时下，非常流行使用 JavaScript 代码为数据驱动的 Web 应用程序添加互动性。若能将数据编码成 JavaScript Object Notation（JSON）的格式，您就可以更轻松地通过 JavaScript 语言使用它。通过本文，发掘使用 XSLT V2 从 XML 数据生成 JSON 的几种不同方法。几年前，许多开发人员很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于标记的语言。现在，Asynchronous JavaScript and XML（AJAX）成了新的热点，人们又将目光转向了使用 JavaS

31、cript 代码的数据驱动的富 Internet 应用程序。但是开发人员是否已经消除了 XML 和这一新技术之间的鸿沟呢？当然，您可以在 Web 客户机中使用 XML 解析器来读取数据，但这种做法会带来两个问题。第一，出于安全方面的原因，XML 数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素，但它的确会引起部署方面的问题，还会阻碍 DHTML 小部件的创建。第二，读取和解析 XML 会非常慢。另一种做法是让服务器执行 XML 的解析工作，方法是设置服务器，使之向浏览器发送以 JavaScript 代码或时下流行的 JavaScript Object Notation（JSON

32、）编码的数据。本文将展示如下三种使用 XSLT V2 语言和 Saxon XSLT V2 处理器从 XML 数据生成 JSON 的技巧： l 简单编码 l 通过函数调用加载数据 l 编码对象 JSON 简介要学习如何将数据编码成 JSON（它只是 JavaScript 的一个子集），最好的方法是从数据开始。清单 1 显示了书籍列表的一个示例 XML 数据集。清单 1. 基本的图形化图书馆 Code Generation in Action JackHerrington Manning PHP Hacks JackHerrington OReilly Podcasting Hacks JackH

33、errington OReilly 这个数据集很简单，只包含三本书，每本书都具有惟一的 ID、书名、作者姓名及出版商的名字。（没错，我只选择了我自己的书作为数据集，但能怨我吗？这些书实在是不可多得的节日和生日礼物。）清单 2 显示了这些数据在 JSON 中的效果。清单 2. JSON 中的示例数据集 id: 1, title: Code Generation in Action, first: Jack, last: Herrington, publisher: Manning , . 方括号 () 表明这是一个数组。大括号 () 则表明这是一个散列表，该散列表由一组名称和值对组成。在本例中，

34、我创建了一个散列表的数组 用来存储这类结构式数据的一种常见方法。另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以，如果我想用单引号编码 OReilly，我就必须使用反斜杠对它进行转义：OReilly。 这让我编写的这个 XSLT 样式表更为有趣了一些。我并未在本例中放上任何日期，但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串，该字符串必须在后面被解析。第二种方法是将日期作为一个对象，比如：publishdate: new Date( 2006, 6, 16, 17, 45, 0 )这段代码将 publishdate 的值设置为6/16/2006 5:45:00

35、p.m.。简单编码接下来我将陆续介绍 JSON 编码的几种技巧。第一种也是其中最简单的一种，此样式表如 清单 3 所示。清单 3. simple.xsl 样式表 var g_books = 1, id: ,name: ,first: ,last: ,publisher: ;要理解此样式表，不妨先来看一下 清单 4 所示的输出。清单 4. simple.xsl 的输出var g_books = id: 1,name: Code Generation in Action,first: Jack,last: Herrington,publisher: Manning, id: 2,name: PHP

36、 Hacks,first: Jack,last: Herrington,publisher: OReilly, id: 3,name: Podcasting Hacks,first: Jack,last: Herrington,publisher: OReilly;这里，我将名为 g_books 的变量设置为一个包含三个散列表的数组，每个散列表包含关于该书的信息。再回过头来看看 清单 3，您会发现第一个模板匹配 / 路径，它也是首先应用到输入数据集的模板，该模板使用 for-each 循环来遍历每本书。之后，它使用 标记来将文本从该数据输出到 JavaScript 输出代码。对于字符串，我使用

37、名为 js:escape() 的定制函数，它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。最后一个重要的元素是 标记，它告知处理器要输出的是文本而不是 XML。要检验此过程是否可以正常工作，我加入了一个 simple .html 文件，该文件引用我在 simple.js 保存的 XSL 样式表的输出。这个 HTML 文件如 清单 5 所示。清单 5. simple.html 文件Simple JS loaderdocument.write( Found +g_books.length+ books );.html 文件使用 标记简单地加载已编码了的 JavaScript 代码。之后，第二个 标记将数组的长度写出到浏览器页面，如 图 1 所示。图 1. simple.html 的输出好了！数据文件包含三本书，相应的 JavaScript 文件也包含三本书。它真的可以工作！通过函数加载上述第一个示例很简单，而且在大多数情况下可以发挥其作用，但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的，这不成问题。但是如果页面动态创建了一个 标记来按需加载数据，那么就很有必要知道