网站设计与Web应用开发技术ch08

1、网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 2021年年5月月7日日 第8章 Web新技术展望 教学目标教学目标 教学重点教学重点 教学过程教学过程 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第2页页 教学目标 l了解了解XML及其相关技术及其相关技术 l了解了解Ajax技术及其开发技术及其开发 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第3页页 教学重点 lXML及相关技术及相关技术 lAjax技术及开发技术及开发 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版

2、社清华大学出版社 第第4页页 教学过程 lXML及其相关技术及其相关技术 lXML范例范例 lAjax技术技术 lAjax的简单开发的简单开发 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第5页页 8.1 XML及其相关技术及其相关技术 l eXtensible Markup Language， “可扩可扩 展标识语言展标识语言” l HTML本身的应用范围有很大的局限本身的应用范围有很大的局限(例如，例如， 通常只能在浏览器上使用通常只能在浏览器上使用)，因此，因此W3C便便 开始推广开始推广XML l SGML、HTML是是XML的先驱的先驱 SGML

3、 XML HTM L 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第6页页 l XMLXML的特点的特点 简单性及开放性简单性及开放性 国际化的标准国际化的标准 延伸性及自我描述性延伸性及自我描述性 能分离数据储存与呈现方式能分离数据储存与呈现方式 8.1 XML及其相关技术及其相关技术 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第7页页 l XML文档实例文档实例 8.1 XML及其相关技术及其相关技术 01085041 老吕 北京 02085063 老邱 上海 网站设计与网站设计与Web应用开发技术应用开发技术清

4、华大学出版社清华大学出版社 第第8页页 l DTD Document Type Definition，文档类型定义，文档类型定义， 一组标记符的语法规则，表明一组标记符的语法规则，表明XML是怎样组是怎样组 织的织的 l XML Schema 验证验证XML文档是否具有严格的规范文档是否具有严格的规范“格式格式 良好良好” ，以适应广泛的应用，以适应广泛的应用 l CSS、XSL和和XSLT XML Style Language和和XML Stylesheet Language Transformation；分别定义了；分别定义了 XML的显示和文档类型的转换方式的显示和文档类型的转换方式 8

5、.1 XML及其相关技术及其相关技术 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第9页页 l DOM Document Object Model，文档对象模型，文档对象模型， 一个对象化的一个对象化的XML数据接口，一个与语言无数据接口，一个与语言无 关、与平台无关的标准接口规范关、与平台无关的标准接口规范 l Xpointer和和Xlinks 用于链接其它用于链接其它XML文档和其它文档和其它XML文档中的文档中的 某个部分某个部分 l XML framework 利用利用XML框架，可以把商业逻辑分离出来，框架，可以把商业逻辑分离出来， 实现数据与计

6、算的分离实现数据与计算的分离 8.1 XML及其相关技术及其相关技术 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第10页页 l XML开发工具开发工具 Notepad Microsoft XML Notepad Microsoft XML Tree Viewer Microsoft XML Validator Microsoft XSL Debugger Xray XMLWriter XMLSpy Sonic Stylus Studio 8.1 XML及其相关技术及其相关技术 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社

7、 第第11页页 l XML的使用前景的使用前景 商务的自动化处理商务的自动化处理 丰富的标签完全可以描述不同类型的单据，可以丰富的标签完全可以描述不同类型的单据，可以 被加密，并且很容易附加上数字签名等被加密，并且很容易附加上数字签名等 信息发布信息发布 客户可根据其需求选择和制作不同的应用程序以客户可根据其需求选择和制作不同的应用程序以 处理数据，构成广泛的、通用的分布式计算处理数据，构成广泛的、通用的分布式计算 智能化的智能化的Web应用程序和数据集成应用程序和数据集成 XML能更准确地表达信息的真实内容，严格的语能更准确地表达信息的真实内容，严格的语 法降低了应用程序的负担，也使智能工具

8、的开发法降低了应用程序的负担，也使智能工具的开发 更为便捷更为便捷 8.1 XML及其相关技术及其相关技术 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第12页页 l XML实例实例 8.1 XML及其相关技术及其相关技术 甲车甲车 A厂厂 500 3 乙车乙车 B厂厂 200 7 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第13页页 l XML实例实例 l 这是一个这是一个XML文档，其中定义了一些车以及文档，其中定义了一些车以及 相关的参数相关的参数 8.1 XML及其相关技术及其相关技术 丙车丙车 A厂厂 30

9、0 4 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第14页页 8.1 XML及其相关技术及其相关技术 车名车名 经销商经销商 售价售价 数量数量 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第15页页 8.1 XML及其相关技术及其相关技术 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第16页页 8.1 XML及其相关技术及其相关技术 l XML实例的显示效果实例的显示效果 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第17页页 8.2 Aj

10、ax技术技术 Ajax的现状的现状 l IBM、Oracle、Yahoo!、BEA、RedHat、 Novell等业界领先的公司启动了等业界领先的公司启动了Open Ajax 项目项目 l 微软开发了自己的微软开发了自己的Ajax框架框架Altas l Sun也将也将Ajax技术列入了技术列入了J2EE的的 blueprint(蓝图蓝图)中中 l Google建立了建立了Google Maps、GMail、 Google Suggest等，其中被公认为最优秀等，其中被公认为最优秀 的的Ajax应用是应用是Google Maps 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清

11、华大学出版社 第第18页页 8.2 Ajax技术技术 Ajax是什么是什么 l Asynchronous JavaScript and XML，异，异 步步JavaScript和和XML 利用利用XHTML和和CSS实现标准化的呈现实现标准化的呈现 借助借助DOM实现动态显示和交互实现动态显示和交互 使用使用XML和和XSLT进行数据的交换与处理进行数据的交换与处理 采用采用XMLHttpRequest进行异步数据读取进行异步数据读取 通过通过JavaScript绑定和处理所有数据绑定和处理所有数据 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第19页页

12、8.2 Ajax技术技术 l Ajax的工作原理：在用户和服务器之间加了的工作原理：在用户和服务器之间加了 多个中间层，使用户操作与服务器响应异步多个中间层，使用户操作与服务器响应异步 化化 l 将以前的一些服务器负担的工作转嫁到客户将以前的一些服务器负担的工作转嫁到客户 端，利于客户端闲置的处理能力来处理，减端，利于客户端闲置的处理能力来处理，减 轻服务器和带宽的负担轻服务器和带宽的负担 l 需要支持的浏览器才能工作需要支持的浏览器才能工作 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第20页页 8.2 Ajax技术技术 网站设计与网站设计与Web应用开

13、发技术应用开发技术清华大学出版社清华大学出版社 第第21页页 8.2 Ajax技术技术 传统Web 的同步交 互模式 基于Ajax的 Web异步交 互模式 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第22页页 8.2 Ajax技术技术 var XmlHttp=new ActiveXObject(Microsoft.XMLhttp); function sendAJAX() XmlHttp.Open(POST,ex8_4.aspx,true); XmlHttp.send(null); XmlHttp.onreadystatechange=ServerPro

14、cess; function ServerProcess() if (XmlHttp.readystate=4 | XmlHttp.readystate = complete) document.getElementById(nameList).innerHTML =XmlHttp.responsetext; setInterval(sendAJAX(),1000); 网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 第第23页页 8.2 Ajax技术技术 protected void Page_Load(object sender, EventArgs e) PerformanceCounter myMemory = new PerformanceCounter(); myMemory.CategoryName = Memory; myMemor