Web开发09.ppt

1、Web 开发技术基础,北京工业大学计算机学院 分布式软件方向专业必选课 32 学时（含上机10学时） 主讲教师：软件系廖湖声 参考书：郝兴伟、Web技术导论、清华大学出版社 http:/,一、Web基础,互联网（INTERNET、因特网） 即广域网、局域网及单机按照一定的通信协议组成的国际计算机网络 提供各种网络服务（数据资源、软件服务） 万维网 World Wide Web 简称WWW 或 Web 的全球信息网 是一种 Internet 服务，用于信息发布 基于超文本传输协议 HTTP,1.1 互联网和万维网,互联网的定义 逻辑上通过全球唯一的地址（IP地址）链接在一起。 通过传输控制协议

2、TCP和互联网协议IP（TCP/IP），或者其它兼容协议来进行通信。 在上述通信基础设施（传输层）之上，为用户提供高层服务。 服务器 提供各种网络服务的计算机系统（应用层） 如：邮件服务器(SMTP、POP)、文件传输服务器(FTP)、域名服务器(DNS)、Web服务器、数据库服务器等等,互联网中计算机的定位,标识方法 IP 地址：分配给计算机的32位二进制数 计算机在网络中的唯一标识 IP 地址的点分十进制表示 如：202.96.61.168 IP 地址格式 A类：0+网络地址(7位)+主机地址(24位) B类：10+网络地址(14位)+主机地址(16位) C类：110+网络地址(21位)+

3、主机地址(8位) 网络地址全球统一、主机地址本地分配,域名服务（DNS）,为计算机指定域名 建立域名和 IP 地址的一一对应关系 配置于本地主机、以及远端主机 域名结构 主机名.三级域名.二级域名.顶级域名 如：北京工业大学网站的域名 常用域名 顶级：cn中国、jp日本、uk英国等 二级：edu教育、gov政府、com商业、net网络等,网络资源的定位,网络资源 硬件：计算机、打印机、网络设备。 软件：服务（程序）、网页、数据文件。 URL（Uniform Resource Location） 统一资源定位地址，指定网络资源的位置 URL格式 :/: 例：http:/:80/software/

4、home.html 说明指定通信协议，如http、ftp等指定服务的软件端口 计算机上可安装多个服务程序，分别使用不同端口 各服务程序有缺省端口号，也可手工设定,万维网概要,Web 资源 提供以超文本方式组织的信息（Web 网页） 用超链接方式连接各种网络资源（跨网络） 通过浏览器为用户提供搜索和浏览信息的手段 客户服务器体系 WWW 服务器（由 URL 标识、又称Web服务器） 保存 Web页面等各种资源（数据、程序） WWW 客户 = 浏览器（Internet Explorer等） 发出请求，获取资源，展示数据信息等 通信协议：HTTP超文本传输协议,Web网络工作过程,浏览器,Inter

5、net网络,Web服务器 (网页、数据、后台程序）,HTTP 请求,HTTP请求,资源URL,HTML响应,HTTP响应,网页展示、播放多媒体、执行程序。,客户和服务器的责任,客户程序 = 浏览器 DNS 系统将域名翻译成 Web服务器的 IP 地址 构造并发出 HTTP请求，接收HTTP响应 展示网页、播放多媒体、执行Applet程序 服务器（Web服务器） 接收HTTP请求，找到指定的资源（HTML文件。） 如果请求的资源是后台程序，则执行该程序 构造并发出HTTP响应 支撑环境 客户软件：浏览器（IE浏览器等） 服务器软件：Web服务器（IIS、Apache等） 网络配置（TCP/IP）

6、：IP地址、DNS地址,内部网（企业网）,Intranet（内部网） 企业内部网络 采用 Internet 技术、开发技术相同 提供内部服务（邮件、FTP、WWW等） 主要区别 内部分配 IP地址、主机名 内部资源定位：URL 应用特点 内部专用服务（业务系统）,1.2 Web 应用系统,定义 通过Internet技术连接的客户/服务器软件 特征 以浏览器作为应用程序的客户 通过Web服务器连接应用服务器软件 应用服务器软件的调用 直接用 URL 指定应用软件的 URL 在网页中调用应用软件 调用专用的网页，如：JSP、ASP,Web 应用体系结构（B/S结构）,Web服务器,Web应用服务器

7、,数据库服务器,客户程序 工作于浏览器 网络中多客户 Web服务器 接收并分析请求 调用应用程序 返回结果（网页） 应用服务器 描述业务逻辑 多客户共享 数据库服务器 多客户数据共享,Internet,浏览器,Web 应用系统的特点,浏览器服务器模式 客户：通过浏览器的多个网页 服务器：提供多个客户共享的资源 跨网络的资源共享 服务共享：应用软件提供的服务 数据共享：通过软件使用的数据 网页信息共享 系统支持 Web服务器支持网页信息共享 Web应用服务器支持服务共享 数据库服务器支持数据共享,几种常见的 Web 应用,网上商店 选购商品、网上支付、定单管理 网上银行（电子银行） 个人帐户、转

8、帐存款、网上支付 网上订机票 查询航班信息、价格信息、定单管理 Web 网页和 Web 应用的区别 网页：按照用户选择，提供静态信息或更新网页 应用：人机交互丰富，访问数据库，生成新网页内容,各种 Web应用服务器,Servlet 服务器 支持 Java 语言开发的 Servlet程序 如：Sun Application Server JSP 服务器 支持 Java Server Page 格式的网页 如：Tomcat服务器 ASP 服务器 支持 Active Server Page 格式的网页 如：IIS服务器 开发技术 Servlet、JSP、ASP、J2EE,Web服务器和Web服务,W

9、eb 服务器和 Web 服务 Web Server 和 Web Service Web 服务的特点 采用专用协议 SOAP 进行通信的网络服务 基于 HTTP 协议，通过 Web 服务器直接提供 基于 XML 语言的通用数据表示 不需要 Web应用服务器 Web服务应用软件的开发 通信描述中使用基于SOAP协议的系统调用 系统发布时使用基于WSDL的服务描述（接口描述） 可用专用软件接口（Java、C+）,教学安排,本学期：Web 开发技术基础 网页设计：HTML语言 Web客户编程：JavaScript XML数据处理 Web服务开发 下学期：网络编程基础（网络程序设计） 基于应用服务器的J

10、ava程序设计 Servlet 编程、JSP 编程、J2EE 编程,二、HTML语言/HTTP协议,HTML 语言 超文本标记语言 HyperText Makeup Language 用于编制网页、组织各种数据、连接网页 HTTP 协议 超文本传输协议 HyperText Transfer Protocol Web客户程序（浏览器）和 Web服务器软件之间的通信协议,2.1 HTML语言,HTML语言是浏览器可识别的语言 语言用途 用于编写 Web网页（.htm、.html文件） 用标签组织各种内容（文本、图象） 用标签对内容排版、组织网页的结构 用标签指定URL、连接其他网页的超连接 客户编

11、程 嵌入脚本程序（JavaScript、VBScript） 服务器编程 动态生成 HTML网页（用Servlet、JSP 程序）,例2-1：简单的HTML文档, 文档开始头部开始 我的网页 网页题目头部结束主体开始段落分隔 大标题 1级标题段落分割 小标题 2级标题段落分割 详细内容段落分割主体结束文档结束,HTML 要点,标记说明 tag起点终点 自说明性：用标签说明语义 标题、主体、头部 排版功能 一般内容无标记 标题、段落 字体、粗体、斜体 水平线,例2-2：表格标签, 表格开始 表名 列名1列名2 数据11数据12 数据21数据22 数据31数据32表格结束3行2列的表格,表格tabl

12、e和列表list,一般的标记结构 内容 表格的描述 标记 属性：线宽、高度等 表名 行标记、项标记 各种列表 编号列表 表项 定义列表 定义项说明项 不编号列表 表项,超级连接和图象,文本上的超级连接北京工业大学图象上的超级连接,图片文件名,目标URL,锚（连接）,告诉浏览器从网页中的指定内容开始显示 （用标记的 id 属性来标识） 参考文献 使用例：转向锚的一个超级连接 浏览参考文献,框架,框架：实现网页分区2列2行3行,功能小结,排版 展板 字体、文本 表格、列表 嵌入资源：图片、多媒体信息 页面分区 超级连接 转移到网络资源或本地资源的手段 应用需求 人机交互功能（响应用户操作） 动态网

13、页的构造（根据用户的请求）,pplet的引用,Applet 的工作环境 配置在Web服务器侧，随HTML文件被下载 装入内存后，运行于客户机 提供独立的用户界面，完成较复杂的处理 网络应用系统中Applet的作用 作为C/S系统的客户程序，可以通过专用协议与后台服务器通信 特点：Java编程通用性，易于实现复杂的算法描述，适用于图形图象等复杂界面的实现； 限制：专用协议通用性差，受防火墙限制,HTML和Applet的加载过程,浏览器,Internet网络,Web服务器 (HTML文件、Applet文件）,网页请求,网页请求,网页URL,HTML文件,HTML文件,加载Applet,加载Appl

14、et,Applet文件,Applet文件,解释HTML,执行Applet程序,表单 Form,接收用户输入的控制部件 提供按纽、选择列表、编辑窗等界面对象 接收用户的输入信息 发送给远端的网络服务器程序 或发送给网页中的脚本程序 网络应用软件的人机交互界面（B/S结构） 网页提供静态框架和内容 表单提供人机交互手段（程序入口）,表单的元素,界面对象的类型type 普通按钮button 提交按钮submit、复原按钮reset 单选框radio、复选框checkbox 文本框text、密码框password、 文件上载file 隐藏框hidden 多行文本框 列表框、选择项,例2-3：表单使用例

15、, 用户名 密码选择按纽“检查”时， 调用本文件中的脚本程序myCheck（JavaScript事件响应函数） 提交表单时（submit）, 调用后台的表单处理程序process（URL指定）,表单的用途,Web应用系统的人机交互界面 展示提示信息（静态） 提供用户输入手段 有限的输入手段：表单元素（input等） 提交用户请求 submit按纽激活后台程序 后台程序位于指定的网络服务器 后台程序的作用 运行于网络服务器，完成某计算 返回结果到浏览器（常用：动态构造的HTML网页）,表单与后台程序的交互,表单属性 method 指定HTTP方法（POST/GET） action 动作：后台程序

16、的URL 激活方法 submit按钮 提交 后台程序的种类 CGI 程序、JSP 程序、ASP 程序 Java Servlet程序、Web 服务。 提交的数据 按钮选择、列表选择、输入的编辑文本 按照HTTP协议规定的格式组织,2.2 HTTP协议,Web 客户程序（浏览器） 发出 HTTP 请求，包括 请求方法、资源标识、协议版本等参数 Web 服务器 提供CGI程序等后台服务程序 接收分析 HTTP 请求，返回符合协议的应答 CGI程序 从标准输入流 stdin 和环境变量获取请求参数 向标准输出流 stdout 输出应答数据,GET 请求方法,主要特征 通信中将参数编码到请求命令中 请求

17、案例 例如：如果例2-3的表单处理程序的资源标识URL为http:/ 则请求命令为http:/ 主要参数 CONTENT_LENGTH=0 REQUESY_METHOD=GET QUERY_STRING=id=sccot&pwd=123&arg=myTest,POST 请求方法,主要特征 请求命令 = 资源标识 URL 以数据流方式传递“参数名=值”序列 适应大数据量的传输 请求案例 请求命令为http:/ 通过标准输入输出流传递“参数名值对”序列 主要参数 CONTENT_LENGTH=27 参数名/值序列的长度 REQUESY_METHOD=POST QUERY_STRING=(null)

18、,HTTP客户程序的设计,以网页为客户程序（常用） 从表单指定URL和POST/GET方法 以界面对象的名字和内容作为参数 Submit按钮作为激活手段 广泛用于网络应用系统的开发 通用程序设计语言 建立URL连接，按照HTTP协议组织参数 以POST方法或GET方法实现 利用编程环境提供的网络通信手段发送 可用Java、C+ 等各种语言,后台CGI程序,部署 在 Web服务器的 cgi-bin目录 可执行程序 .EXE 开发方法 从标准输入流stdin和环境参数读入请求数据 GET方法和POST方法的读入方法不同 向标准输出流stdout输出应答数据 可以用各种程序设计语言开发CGI程序 缺

19、陷 执行效率低；每次激活时，被装入内存，结束后释放 主要原因：反复装载,CGI程序应用方式,Internet网络,Web服务器 (HTML文件、CGI可执行文件）,HTTP请求 （程序名与参数）,HTTP请求,执行结果,CGI执行结果,客户程序 （浏览器）,展示CGI执行 结果（网页等）,执行CGI程序,应答数据的格式,符合HTTP协议 由 Web服务器返回给浏览器 应答案例 HTTP/1.1 200 协议版本、应答码 Date: Sun,01 Jul 2001 12:00:01 GMT Content-Type: text/html; charset=UTF-8 内容类型(MIME)数据内容

20、欢迎来到 WWW 万维网,MIME 类型,Multipurpose Internet Mail Extensions 格式：类型/子类型 常用 Content-type text/html HTML文档 text/text 文本格式 text/postscript 打印脚本语言 image/gif GID图像格式 image/jpeg JPEG图像格式 常用字符编码 UTF-8 多文种编码 GB2312 国标汉字编码 用途 一般情况：服务器返回HTML文档（网页） 其他情况：返回图像、声音等多媒体信息,其他后台程序,Web 应用服务器提供的后台程序 Java 系列 Java Server Pa

21、ge、Servlet J2EE 应用服务器 JBuilder、NetBeans、Eclipse开发环境支持 微软系列 Active Server Page（ASP） ASP.NET 开发环境支持 Web 服务 支持 SOAP的开发环境 返回数据格式 必须符合上述应答数据的格式,例2-4：最简单的 Servlet,public class myServlet extends HttpServlet public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException, Servle

22、tException / 动态构造1个网页作为响应response.setContentType(“text/html“);String title = “Hello World!“;PrintWriter out = response.getWriter( );out.println(“);out.println(“ + title + “);out.println(“);out.println(“);out.println(“ + title + “);out.println(“); ,编程小结,响应 HTTP GET 请求 HttpServlet:doGet 方法 Servlet程序运行

23、在服务器端 输入输出： HttpServletRequest 类 HttpServletResponse 类 输出网页（HTML文本） 类型设置：setContentType(“text/htm”); 写入输出流：PrintWriter getWriter( ) 网页制作：向输出流写入 HTML语句 输出数据必须符合 HTML 文法 在“网络编程基础”（下学期）中详细介绍 Servlet、JSP、J2EE、JMS等,基于Servlet的Web应用,Internet网络,Web服务器,HTTP请求 (程序名&参数),HTTP请求,执行结果,执行结果,浏览器,展示执行结果（HTML网页）,Web应

24、用服务器 (Servlet, JSP),程序名和参数,执行结果,Servlet 程序运行过程,从表单动作（或浏览器）请求启动 指定 Servlet 文件的URL 如：http:/ Web 服务器接受请求 由 Servlet 服务器负责响应 Servlet 服务器启动 Servlet 程序（线程） 检查 Servlet 程序是否加载 如果未加载，加载 Servlet 文件 启动 Servlet 程序（线程） 送回执行结果（包含HTML文本的HTTP响应） Servlet 程序的终止 线程撤销、或 Servlet 服务器终止 反复响应多个客户的请求（常住内存）,第二章 习题,编制个人网页 展示：个

25、人基本信息 选课情况、社团活动情况 要求：尽可能多利用已知的标签 编制一个旅馆预定系统，包括以下网页 分类选择页：提供多个按纽分别选择不同的旅馆 房间选择页：提供多种房间及其价格（各有复选项） 房间预定页：显示选中的各种房间，输入每种房间的数量与客户信息 要求：利用表单实现界面布局，不考虑功能实现 客户信息包括：姓名、身份证号码、入住日期,三、JavaScript编程基础,客户端编程 在HTML网页中引用脚本程序 常用的脚本语言：JavaScript、VBScript、JScript 参考：http:/ Java 和 JavaScript 的区别 Java程序(.java)编译成字节码程序(.

26、class)，运行于Java虚拟机(JVM) JavaScript程序直接被解释执行，需要浏览器内部提供内置脚本引擎 JScript 微软仿照 JavaScript设计、略有不同,3.1 JavaScript语言基础, function in JavaScrpit脚本标记 function fact(n) var res = 1; 阶乘函数定义if( n=0) res = 1;else res = n*fact(n-1);return res; fact( 5 ) = 脚本标记document.write( fact(5) ); 程序段向浏览器文档输出阶乘函数调用的结果 例 3-1：JavaS

27、cript简例,编程小结,标记 说明使用的脚本语言 执行脚本程序段（函数定义、语句执行） JavaScript 的特征 多入口（每个script标记） 程序基本组织：自定义函数（function指定） 基本语法和 Java、C+相同 无类型变量 var （运行时确定类型） 基于对象的编程 内置对象 document （浏览器文档） 发送 write 消息,JavaScript 基础,变量和数据类型 关键var 说明变量（也可不说明、类型运行时指定） 数值（整数/实数）、布尔值（true/false） 字符串 （”Welcome”/hello） 表达式和运算（Java） 算术、逻辑、关系、条件、

28、字符串连接+ 控制结构（Java） 选择（if/else、switch）、循环（while、for、do while） break、continue 函数定义 function关键字指定函数定义,3.2 事件驱动和事件处理,例3-2：标题的动态修改指定脚本语言 function show( t ) 定义函数document.title = t; 修改标题 响应按钮的函数调用,程序说明,自定义函数 document.title = t 修改了文档的标题 表单中的输入响应 button按钮的事件响应 onclick 捕获按钮操作，调用指定的脚本 JavaScript程序入口 HTML文档中指定的各

29、种事件响应 从网页中执行程序的手段,常见的事件响应,网页装载中的事件 onload 装入网页（初始化） onunload 卸载网页 文本编辑中的事件 onchange捕获修改 onselect捕获选中 onfocus捕获得到焦点 onblur 捕获失去焦点 鼠标事件： onmousemove、onmousedown onmouseup、ondblclick 键盘事件 onkeydown、onkeypress、onkeyup,3.3 对象及其操作,JavaScript 是基于对象的语言 支持类定义、对象创建、消息传递 不支持封装、继承、接口 类定义方法 用函数定义类，初始化类成员 通过 this

30、 为类数据成员和方法成员赋值 对象创建方法 new 函数名（参数表） 消息传递和属性访问 同 Java 语言,例3-3 对象使用例,function squArea( ) this.result = this.width * this.height; 增加成员 function MyClass(x, y) 类定义函数this.width = x; this.height = y;this.result = 0; this.area = squArea; 成员函数 myObj = new MyClass( 5, 6 ); 创建对象myObj.area( ); 消息传递document.write

31、( myObj.result ); 取对象属性 ,对象的使用,成员函数的编制 用 this 引用属性 运行中可增加属性、可改变成员函数 用 new 构造对象；其余同一般函数 专用语句 for ( var x in object ) objectx用于枚举每个成员 with object 程序段内可以省略 this,内置对象,Array 异构数组（元素类型不同） 成员：长度length 数组定义例 var colors = new Array( ); Colors0 = “red”; Colors1 = “green”; Colors2 = “blue”; Colors3 = 256 Date

32、日期对象 Math 数学计算对象,顶层对象 浏览器、主窗口、屏幕窗口对象 window 含：文档、URL地址、历史URL数组、框架数组 支持窗口的创建和关闭 open、close,3.4 浏览器对象模型,document 对象,代表表示的文档 可通过 write、writeln 写入 获得元素 getElementById、getElementByTagName 属性成员：内部信息 标题 title、各种颜色 bgColor、fgColor、linkColor等 图像数组 images、超连接数组 links、表单数组 forms link对象 属性：地址 href、名称 name、类型 ty

33、pe form对象 属性：元素elements、动作 action、HTTP方法 method 支持新文档的创建 open、write、writeln、close,例3-4：文档应用,function createNewDoc( ) var newDoc=document.open(“text/html“);var txt=“动态生成的文档!“ ;newDoc.write(txt); newDoc.close( ); function check( f ) document.getElementById(“myCheck“).checked=f; ,程序说明,针对浏览器对象的操作 发送消息、调

34、用方法 引用对象属性 document.myform（属性名元素名） 常用的内部对象 document.forms j 文档中的表单对象 document.forms j .elements i 表单中的元素 获取内部对象的方法 通过Id getElementById 通过Name getElementsByName（返回数组） 通过Tag getElementsByTagName（返回数组）,程序说明（续）,动态创建页面 创建元素（如: createElement、createTextElement） 修改文档树节点 appendChild、removeChild 修改元素的 innerHT

35、ML属性（赋值为HTML文本） Web 页面和 JavaScript程序的交互手段 Web页面 事件驱动 JavaScript 程序 JavaScript 程序 访问&操作 浏览器对象 编程参考（JavaScript手册） 对象模型：document, form, 对象方法：getElementsByTagName 对象属性：value、checked（多选按钮） 界面事件：onclick,3.5 应用例: 订货,浏览页： 列出一组图书信息，请用户选择 订货页： 列出选中的图书，计算总价，请用户确认 浏览页的实现方法 构造表格，提供多选框checkbox供选择 选定后，调订货页；通过参数传选中

36、的信息 订货页的实现方法 分析HTTP请求参数，展示选定的信息 计算总价，等待用户确认,浏览页的实现,(请选择你要购买的图书)1AJava_Servlet$15.002AJavaScript$30.003AJ2EE$45.00,界面与设计,表单包含：表格、提交按钮（调EX7.htm） 表格第一列是 checkbox 按钮,表单的提交,调用其他页面、CGI程序或其他后台程序 由 action 指定（action=“EX7.htm”） 按照 HTTP 协议（缺省方法 GET） 请求参数（名/值对） 输入域的name和value 从提交方传递给被调用方 value 的格式 编号-书名*价格$ 本例的

37、请求命令： URL +路径 + EX7.htm?B=2A-JavaScript*15.00%24&C=3A-J2EE*45.00%24 分割符 命令与参数 ? 参数与参数 & 参数名和值 = %24 是 $ 的 16为编码,订货页的编制EX7.htm,编号图书名称价格decodeString( ); 分析请求参数构造订货页 ,请求参数的分析,function decodeString( ) var string = unescape(location.search); / 消除16进制编码var grandTotal = 0, orderData =“”;do string = string.

38、substring(string.indexOf(“=“)+1,string.length);ampd = string.indexOf(“ / 价格,订货页的动态构造EX7.htm,orderData += “ + itemnum + “;orderData += “ + itemdsc + “;orderData += “ + itemcst + “;grandTotal += parseInt(itemcst); / 总价的计算string = string.substring(ampd+1, string.length); while( ampd!=-1 ); orderData +=

39、 “总额“ ; orderData += “” + grandTotal + “.00“; document.write(orderData); ,实现方法的讨论,参数的分析 名值对的分解：符合 HTTP GET 请求 参数值的组织与分解（编号-书名*价格$） 页面的动态生成 按照 HTML 文法、组织字符串 写入 document 文档对象 订货页的构造 = 静态HTML文本+动态HTML 实用系统的实现 连接后台数据库（图书信息、订单信息） 使用 JSP、Servlet 等后台程序设计工具,JavaScript和浏览器的交互,浏览器 内置 JavaScript 引擎（解释程序） 支持 Ja

40、vaScript 语句的执行 DOM 模型 提供编程接口（为各种浏览器脚本语言） 使得脚本程序可以访问浏览器中的网页 操作浏览器窗口、表单元素和框架 动态网页的实现方法 用脚本语言操作DOM（客户端） 编制程序来构造HTML文本 （客户端、服务器端）,3.6 Ajax技术,Asynchronous JavaScript and XML 异步 JavaScript 发出提交请求后，继续执行，不等待返回 结果返回时，自动调用预先指定的函数（回调） 特点 响应速度快，改善人机交互的效果 灵活利用了 JavaScript 的功能 主要支持手段 内置的 XMLHttpRequest对象,XMLHttpR

41、equest对象的创建, var xmlHttp = false; try xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP“); catch (e) try xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP“); catch (e2) xmlHttp = false; 适应各个版本 IE浏览器的创建方法,激活HTTP请求的方法,function callServer( ) / 激活HTTP请求的事件响应函数 。var url = ”http:/ xmlHttp.open(“GET”, url, true); /

42、 指定 URL和方法xmlHttp.onreadystatechange = updatePage; / 指定回调函数xmlHttp.send(null); / 发送请求 function updatePage( ) / 回调函数 / 得到响应结果后，被自动调用if (xmlHttp.readyState != 4) return; var response = xmlHttp.responseText; / 响应结果。 / 通过 DOM操作，来更新网页 ,Ajax方式的交互过程,JavaScript,XMLHttpRequest,WWW服务器,程序执行过程,创建HttpXMLRequest对

43、象 在或 定义程序入口 某个事件响应 如：onclick=“callServer( )” 用户激活该事件时 调用callServer( ), 发出Http请求send(null) 服务器返回Http响应时(readyState=4) 预先指定的updatePage( )检测所有状态变化,第三章 习题,编制一个信息输入网页 输入姓名、学号、出生年月日 使用JavaScript实现输入数据正确性检查 检查学号中的年级、学院等信息 检查YYYY-MM-DD中的年月日 提示：用onBlur捕获失去输入焦点的事件 扩展第二章习题2中实现的旅馆预定系统 使用JavaScript实现各个网页之间的控制转移，

44、实现旅馆预定功能，包括： 旅馆分类选择、房间选择和数量输入、总价计算等等,四、XML语言,XML 可扩展标记语言（eXtensible Markup Language） 为数据交换和数据共享提供平台无关的数据格式 HTML 和 XML 的对比,4.1 XML文档,例4-1: XML文档简例信息安全专业的学生 物理老师 考试通知 4月2日早8点在3教402室考试自定义标记（可扩展） 自描述性（用标记说明内容的语义）,XML 文法,文档结构 文档说明 + 文档类型定义 +文档内容 书写规则 字母大小写敏感（HTML大小写不敏感） 第一行是 xml 声明 标记嵌套结构（树结构） 文档元素 处理命令

45、注释 标记 内容 空标记 CDATA ,例4-2：Books.xml,Everyday Italian Giada De Laurentiis 2005 30.00Harry Potter J K. Rowling 2005 29.99 , XQuery Kick Start James McGovern Per Bothner Kurt Cagle James Linn Vaidyanathan Nagarajan 2003 49.99Learning XML Erik T. Ray 2003 39.95,例4-3：命名空间,xmlns 指定命名空间，使得标记具有全局唯一的名称 如：cmb

46、代表招商银行 进而 cmb:branch 代表招商银行的分行，区别于其他分行朝阳分行朝阳区,4.2 DTD 和 Schema,Ducument Type Definition（DTD） 用途：说明文档的类型（合法性检查） 书写格式元素定义的种类 EMPTY表示空元素； ANY表示任何元素和数据； #PCDATA表示可解释的数据； 复合元素的成员； 实体：数据的简写 XML引用方法： &实体名,例4-4：DTD 案例,报纸信息的数据格式若干文章组成报纸头条新闻,说明符,属性值类型 CDATA、ID、IDREF、ENTITY等 字符数据段、关键字、引用、实体 属性缺省值 #REQUIRED 必备

47、#IMPLIED 可选 #FIX 固定值 出现次数的说明 a 缺省 表示只有一个元素a a+ 表示有一个或多个元素 a a* 表示有0个或多个元素 a a? 表示 a 可有可无 a | b 表示 a 或 b,XML Schema,用途：XML数据类型定义（替代DTD） XSD（XML Schema Definition） 可扩展、功能强、基于XML schema声明专用标记元素的类型声明属性的类型说明复杂类型定义简单类型定义,例4-5：XML Schema案例,Schema用法,XSD 文件头部 xs 常用做 schema 的命名空间 schema 标记说明本文件是 schema 定义 元素和

48、属性的说明 名称name、类型type、缺省default、固定fixed 用法use=“required“：表示必备 出现次数maxOccurs、minOccurs 内置数据类型 xs:string、xs:decimal、xs:integer xs:boolean、xs:date、xs:time 等等,类型的定义和扩展,复杂类型中的专用标记 sequence 元素按照规定顺序出现 all 元素任意顺序出现 choice 任意一个元素出现 simpleContent 指定简单内容 complexContent 指定复杂内容 extension 在base指定的类型上扩展 group/attributeGroup 定义分组，支持引用分组 any/anyAttribute 允许无类型定义的元素或属性,在XML文件中指定schema文件,铅笔绘图专用200.40。笔记本电脑25000.00 ,4.3 DOM 和 SAX,