《javaee核心技术(第5章 表示层-ajax)》由会员分享，可在线阅读，更多相关《javaee核心技术(第5章 表示层-ajax)（53页珍藏版）》请在金锄头文库上搜索。
1、表示层相关技术Ajax介绍,1 Ajax概述 2 JavaScript基础 3 Ajax基础应用,1 Ajax概述,Ajax（Asynchronous javascript and xml） 例如：Google Suggest 核心理念:使用XMLHttpRequest对象发送异步请求,1 Ajax概述,Ajax不是一种全新的技术，而是几种技术的融合： Html/XHtml CSS DOM XML XMLHttpRequest对象 JavaScript,1 Ajax概述,同步技术,1 Ajax概述,非同步技术,1 Ajax概述,特点： Ajax应用程序必须是有客户端和服务器一同合作的应用程序。
2、 JavaScript是撰写Ajax应用程序的客户端语言，XML则是请求或回应时建议使用的交换信息的格式,2 JavaScript基础,2.1 JavaScript语法基础 1. 基本数据类型 数值型，包括整数和实数。 字符串型，用“ “或 括起来的字符。 布尔型，使用true和false表示。 空值，null。,2. 常量 整型常量 实型常量 布尔常量 字符型常量 空值null 转义符,2 JavaScript基础,2.1 JavaScript语法基础,3. 变量 变量主要用于存取数据及提供存放信息的容器。 JavaScript中变量的命名规则如下： 以字母或下画线开头，中间可以出现数字。
3、不能使用JavaScript中的关键字作为变量。,2.1 JavaScript语法基础,用命令var声明变量，不指定变量类型，如： var a; 此时该变量在赋值时才清楚它是哪种数据类型，如： var a; a=5; 也可以在定义变量时直接赋值，如： var a= “25“; 变量也可以不做声明，使用时根据数据类型来确定其变量的类型，如： i=5; j=“abc“;,2.1 JavaScript语法基础,表1 算术运算符,4. 运算符:JavaScript运算符可分为3类：算术运算符,2.1 JavaScript语法基础,表2 比较运算符 表3 逻辑运算符,比较运算符（见表2）和逻辑运算符（见
4、表3）,2.1 JavaScript语法基础,5. 语句 JavaScript语句包括： if条件语句 for循环语句 while循环语句 break语句 continue语句。这些语句的应用与在Java语言中类似（略）。,2.1 JavaScript语法基础,6. 函数 JavaScript中函数定义的基本格式如下： function 函数名(形式参数) 函数体； return 表达式; ,2.2 JavaScript浏览器对象,1Window对象 描述浏览器窗口特征 是Document、Location和History对象的父对象。 另外，还可以认为它是其他任何对象的假定父对象。,2.2
5、JavaScript浏览器对象,（1）Window对象属性 Name parent Opener Top Self Defaultstatus status,2.2 JavaScript浏览器对象,（2）Window对象的方法 alert()：显示一个警告对话框，包含一条信息和一个确定按钮。 语法格式如下：alert(参数) 举例,2.2 JavaScript浏览器对象,confirm()：显示一个确认对话框，包含一条指定信息，还包含确定按钮和取消按钮。 语法格式：confirm(参数) 举例,2.2 JavaScript浏览器对象,prompt()：显示一个提示对话框，提示用户输入数据。 语
6、法格式：prompt(参数1, 参数2) 举例,2.2 JavaScript浏览器对象,open()：打开一个已存在的窗口，或者创建一个新窗口，并在该窗口中加载一个文档。 语法格式如下： NewWindow = Window.open(url , name, 窗口参数设置表) 举例 1.新浏览器窗口中打开 2.新浏览器窗口中打开 about:blank 页,2.2 JavaScript浏览器对象,close()：关闭一个打开的窗口 例如，在Mywin窗口中打开example.htm页面，该窗口没有状态栏、工具栏、菜单栏和地址栏。 Mywin=Window.open(“example.htm“,
7、 “mywin“, “Status=no, toolbar=no, menubar=no, location=no“); 关闭这个打开的窗口，语句如下： Mywin.close() 举例,2.2 JavaScript浏览器对象,navigate()：在当前窗口中显示指定网页。 语法格式如下：navigate url 其中url参数用于指定要显示的新文档的URL。例如： Window.navigate “;,2.2 JavaScript浏览器对象,setTimeout()：设置一个计时器，在经过指定的时间间隔后调用一个过程。语法格式如下： 变量名=Window.setTimeout（过程名, 时
8、间间隔, 脚本语言） 举例,2.2 JavaScript浏览器对象,clearTimeout()：给指定的计时器复位。 语法格式如下：Window.clearTimeout 对象 其中，“对象”是用SetTimeout方法返回的计数器对象。例如：Window.clearTimeout TID 这行代码可以清除名字为“TID”的计数器对象。,2.2 JavaScript浏览器对象,focus()：使一个Window对象得到当前焦点。例如，要使NewWindow对象得到焦点，使用如下语句：NewWindow.focus; blur()：使一个Window对象失去当前焦点。例如，要使NewWindo
9、w对象失去焦点，使用如下语句：NewWindow.blur,2.2 JavaScript浏览器对象,（3）Window对象的事件：Window对象事件如表4所示。,表4 Window对象事件,2.2 JavaScript浏览器对象,2Document对象 （1）Document对象的属性 Document对象有许多属性，用来设置文档的背景颜色、链接颜色和文档标题等，也可执行更为复杂的操作。 与颜色有关的属性。 fgColor bgColor linkColor alinkColor vlinkColor,2.2 JavaScript浏览器对象, 与HTML文件有关的属性。 title loca
10、tion parentWindow。 referrer lastModified,2.2 JavaScript浏览器对象, 对象属性。 对象属性就是对象属性的值。例如，通过length属性可以返回当前文档中该对象的数目。每个对象被存储在数组中，可以通过索引值来访问该数组中的元素。 all anchors links forms images stylesheets applets embeds scripts,2.2 JavaScript浏览器对象,（2）Document对象的方法 Document对象通过方法对文档内容进行控制。 open()：打开要输入的文档。执行该方法后，文档中的当前内容
11、被清除，可以使用write或writeLn方法将新内容写到文档中。 语法格式：Document.open。 write()：向文档中写入HTML代码。 语法格式：Document.write 写入内容。 执行write方法后，写入内容插入到文档的当前位置，但该文档要执行close方法后才能显示出来。,2.2 JavaScript浏览器对象,writeLn()：向文档中写入HTML代码。 语法格式：Document.writeLn 写入内容。 writeLn方法与Write方法类似，不同的是writeLn在内容末尾添加一个换行符。 close()：关闭文档，并显示所有使用write或writeL
12、n方法写入的内容。 clear()：清除当前文档的内容，刷新屏幕。 对于Document对象的各个方法，浏览器默认的在当前文档中放入数据时的各种方法的顺序通常是： Document.Open; Document.Write content; Document.Close;,2.2 JavaScript浏览器对象,（3）Document对象的事件 Document对象的事件主要有鼠标事件和键盘事件，见表5。,表5 Document对象事件,2.2 JavaScript浏览器对象,3History对象 （1）History对象的属性 length：返回历史表中的URL地址数目。 （2）Histor
13、y对象的方法 back()：在历史表中向后搜索。 forward()：在历史表中向前搜索。 go()：在历史表中跳转到指定的项。,2.2 JavaScript浏览器对象,4Navigator对象 Navigator对象包含浏览器的信息。 （1）Navigator对象的属性 appCodeName：返回浏览器的代码名称。 appName：返回浏览器的名称。 appVersion：返回浏览器的版本号。 userLanguage：返回当前用户所使用的语言。 cookieEnabled：如果允许使用cookies，则该属性返回true，否则返回false。 （2）Navigator对象的方法 它提供了
14、一种用于确定浏览器中的Java是否可用的方法。 java.Enable ();,2.2 JavaScript浏览器对象,5Location对象：Location对象包含当前URL的信息。 （1）Location对象的属性 href：返回或设置当前文档的完整URL。 hash：返回或设置当前URL中#后面的部分（即书签）的名称。 host：返回或设置当前URL中的主机名和端口部分。 hostname：返回或设置当前URL中的主机名。 port：返回或设置当前URL中的端口部分。 path：返回或设置当前URL中的路径部分。 protocol：返回或设置当前URL中的协议类型。 search：返回
15、或设置当前URL中的查询字符串，即提交给服务器时在URL中紧跟在问号后面的内容。如果当前URL中不包含查询字符串，则它返回一个空字符串。,2.2 JavaScript浏览器对象,（2）Location对象的方法 reload()：重新加载当前文档。 replace()：用参数中给出的网址替换当前的网址。 assign()：将当前URL地址设置为其参数所给出的URL。,2.2 JavaScript浏览器对象,6Link对象 Link对象表示文档中的超链接，通过该对象的一些属性可以得到链接目标。 Link对象的基本属性是length，它返回文档中链接的数目。每个链接都是Links数组中的一个元素，
16、可以通过索引值来访问。例如，第一个链接是Links(0)，第二个链接是Links(1)，最后一个链接是Links(Links.Length)。,3 Ajax基础应用,3.1 Ajax应用实例 AjaxTest,2. CheckUser.java,学生注册名的唯一性由一个名为“CheckUser”的HttpServlet来实现。,3. web.xml,在介绍Servlet的时候说过，有Servlet文件存在就要进行相应的配置。,4. index.jsp客户端程序,3.2 XMLHttpRequest对象,XMLHttpRequest对象提供客户端与HTTP服务异步通信的协议 通过该协议Ajax只同服务器进行数据层交换，而不用每次刷新界面，也不用每次将数据处理工作提交给服务器来做。 减轻了服务器负担，加快响应速度,3.2 XMLHttpRequest对象,在Ajax应用程序中，如果使用的是Mozilla、Firefox或Safari，可以通过XMLHttpRequest对象来发送非同
