• 1. 第7章 Ajax7.1 Ajax概述7.2 JavaScript基础7.3 Ajax基础应用7.4 开源Ajax框架——DWR
  • 2. 7.1 Ajax概述Ajax包括: Html/XHtml:实现页面内容的表示。 CSS:格式化文本内容。 DOM:对页面内容进行动态更新。 XML:实现数据交换和格式转化。 XMLHttpRequest对象:实现与服务器异步通信。 JavaScript:实现以上所有技术的融合。 在Web应用程序中,通常通过表单进行数据提交,在同步情况下,使用者发送表单之后,就只能等待服务器回应。在这段时间内,使用者无法进一步操作,如图7.1所示。 图7.1中加阴影部分是发送表单之后使用者必须等待的时间,浏览器预设为使用同步方式送出请求并等待回应。 图7.1 同步技术
  • 3. 7.1 Ajax概述当服务器处理请求并送出回应时,计算机接收到回应,再呼叫浏览器所设定的对应动作进行处理,如图7.2所示。 图7.2 非同步技术
  • 4. 7.2 JavaScript基础7.2.1 JavaScript语法基础 1. 基本数据类型 JavaScript脚本语言同其他语言一样,有自身的基本数据类型、表达式、算术运算符及程序的基本框架结构。JavaScript有4种基本数据类型。 ① 数值型,包括整数和实数。 ② 字符串型,用" "或' ' 括起来的字符。 ③ 布尔型,使用true和false表示。 ④ 空值,null。 2. 常量 JavaScript中常量分为整型常量、实型常量、布尔常量、字符型常量、空值和转义符几种。 整型常量可以使用十六进制、八进制和十进制数表示。 实型常量由整数部分加小数部分表示,如3.14、0.618等。 布尔常量只有两种形式true或false,主要用来说明或代表一种状态或标志。 字符型常量是用单引号'或双引号"括起来的一个或几个字符。 空值null。当引用没有定义的常量时会返回一个null值。 转义符。当要引用某些特殊字符时,可以使用“\”。如\n表示换行,\\表示“\”,\”表示“””。
  • 5. 7.2.1 JavaScript语法基础3. 变量 变量主要用于存取数据及提供存放信息的容器。 JavaScript中变量的命名规则如下: ① 变量名要以字母或下画线开头,中间可以出现数字。 ② 不能使用JavaScript中的关键字作为变量。 JavaScript中变量的声明方式和其他语言不同。在JavaScript中,可以用命令var声明变量,而不指定变量类型,例如下面的语句: var a; 在这种情况下,该变量还不知是哪种数据类型,赋值时才清楚,例如下面的语句: var a; a=5; 为变量a赋予int型值5。也可以在定义变量时直接赋值,例如下面的语句: var a= "25"; 为变量a赋予字符串类型值"25"。在JavaScript中,变量也可以不做声明,使用时根据数据类型来确定其变量的类型,例如下面的语句: i=5; j="abc"; k=true; x=0.618;
  • 6. 7.2.1 JavaScript语法基础4. 运算符 JavaScript运算符可分为3类:算术运算符(见表7.1)。运 算 符功 能+加-减*乘/除%取模|按位或&按位与<<左移>>右移>>>右移、零填充-取反~取补++递加1--递减1表7.1 算术运算符
  • 7. 7.2.1 JavaScript语法基础比较运算符(见表7.2)和逻辑运算符(见表7.3)。运 算 符功 能运 算 符功 能<小于!取反>大于&=与后赋值<=小于等于&逻辑与>=大于等于|=或后赋值==等于|逻辑或!=不等于^=异或之后赋值^逻辑异或?:三目操作符||或==等于!=不等于表7.2 比较运算符 表7.3 逻辑运算符
  • 8. 7.2.1 JavaScript语法基础5. 语句 JavaScript语句包括:if条件语句、for循环语句、while循环语句、break语句和continue语句。这些语句的应用与在Java语言中类似,这里就不详细介绍了。 6. 函数 JavaScript的函数相当于Java语言中的方法,用于完成所需要的功能。通常在写一个复杂程序时,总是根据所完成功能的不同,将程序划分为一些相对独立的部分,每个部分由一个函数来完成。从而使各部分独立,任务单一,程序清晰、易懂。 JavaScript中函数定义的基本格式如下: function 函数名(形式参数){ 函数体; return 表达式; }
  • 9. 7.2.2 JavaScript浏览器对象1.Window对象 Window 对象描述浏览器窗口特征,它是Document、Location和History对象的父对象。另外,还可以认为它是其他任何对象的假定父对象。 (1)Window对象属性 name:指定窗口的名称。 南京师范大学 parent:代表当前窗口(框架)的父窗口,使用它返回对象的方法和属性。 opener:返回产生当前窗口的窗口对象,使用它返回对象的方法和属性。 top:代表主窗口,是最顶层的窗口,也是所有其他窗口的父窗口。可通过该对象访问当前窗口的方法和属性。 self:返回当前窗口的一个对象,可通过该对象访问当前窗口的方法和属性。 defaultstatus:返回或设置将在浏览器状态栏中显示的默认内容。 status:返回或设置将在浏览器状态栏中显示的指定内容。例如,在浏览器状态栏中显示浏览当天的日期: status = Dateformat(date);
  • 10. 7.2.2 JavaScript浏览器对象(2)Window对象的方法 alert():显示一个警告对话框,包含一条信息和一个确定按钮。 语法格式如下: alert(参数) 它的参数就是提示信息。执行alert方法时,脚本的执行过程会暂停下来,直到用户单击【确定】按钮。例如, Window.alert( "欢迎访问南京师范大学"); confirm():显示一个确认对话框,包含一条指定信息,还包含确定按钮和取消按钮。 语法格式如下: confirm(参数) 它的参数就是提示信息。单击【确定】按钮,返回true;单击【取消】按钮,则返回false。例如下面的语句:   Res=confirm("欢迎访问南京师范大学") if Res then Form.Submit prompt():显示一个提示对话框,提示用户输入数据。 语法格式如下: prompt(参数1, 参数2)
  • 11. 7.2.2 JavaScript浏览器对象open():打开一个已存在的窗口,或者创建一个新窗口,并在该窗口中加载一个文档。 语法格式如下: NewWindow = Window.open(url , name, 窗口参数设置表) 窗口参数设置表格式:参数1=值,参数2=值,…… 窗口参数用于描述打开的窗口,参数可以多个,是可选项。例如, Set NewWindow1=Window.open("Jsp.htm","WindowIE","toolbar=no,location=no") 这行语句将在WindowIE窗口打开Jsp.htm文件,并且产生一个句柄为NewWindow1的对象。 close():关闭一个打开的窗门。例如,在Mywin窗口中打开example.htm页面,该窗口没有状态栏、工具栏、菜单栏和地址栏。 Mywin=Window.open("example.htm", "mywin", "Status=no, toolbar=no, menubar=no, location=no"); 关闭这个打开的窗口,语句如下: Mywin.close navigate():在当前窗口中显示指定网页。 语法格式如下: navigate url
  • 12. 7.2.2 JavaScript浏览器对象其中url参数用于指定要显示的新文档的URL。例如,在当前窗口打开南京师范大学主页: Window.navigate "http://www.njnu.edu.cn"; setTimeout():设置一个计时器,在经过指定的时间间隔后调用一个过程。 语法格式如下: 变量名=Window.setTimeout(过程名, 时间间隔, 脚本语言) 例如,打开窗口3s后调用MyProc过程: TID=Window.setTimout("MyProc", 3000, "JavaScript"); clearTimeout():给指定的计时器复位。 语法格式如下: Window.clearTimeout 对象 其中,“对象”是用SetTimeout方法返回的计数器对象。例如, Window.clearTimeout TID 这行代码可以清除名字为“TID”的计数器对象。 focus():使一个Window对象得到当前焦点。例如,要使NewWindow对象得到焦点,使用如下语句: NewWindow.focus;
  • 13. 7.2.2 JavaScript浏览器对象blur():使一个Window对象失去当前焦点。例如,要使NewWindow对象失去焦点,使用如下语句: NewWindow.blur (3)Window对象的事件 Window对象事件如表7.4所示。 事 件说 明OnLoadHTML文件载入浏览器时发生OnUnLoadHTML文件从浏览器删除时发生OnFocus窗口获得焦点时发生OnBlur窗口失去焦点时发生OnHelp用户按下F1键时发生onResize用户调整窗口大小时发生OnScroll用户滚动窗口时发生OnError载入HTML文件出错时发生表7.4 Window对象事件
  • 14. 7.2.2 JavaScript浏览器对象2.Document对象 (1)Document对象的属性 Document对象有许多属性,用来设置文档的背景颜色、链接颜色和文档标题等,也可执行更为复杂的操作。 ① 与颜色有关的属性。 fgColor:设置或返回文档的文本颜色。 bgColor:设置或返回文档的背景颜色。 linkColor:设置或返回文档中超链接的颜色。使用方法如下: Window.document.linkColor = color; 其中color是一种颜色的描述。它是颜色名称或颜色的数值表示。 linkColor的值在网页首次载入时设置,随后可以重新设置和修改。 alinkColor:设置或返回文档中活动链接的颜色。 vlinkColor:设置或返回已经访问过的超链接的颜色,与body标记中的vlink属性功能相同。
  • 15. 7.2.2 JavaScript浏览器对象② 与HTML文件有关的属性。 title:返回当前文档的标题,在运行期间不能改变。 location:设置或返回文档的URL。 parentWindow:包含此HTML文件的上层窗口。 referrer:返回链接到当前页面的那个页面的URL。 lastModified:返回当前文档的最后修改日期。 ③ 对象属性。 对象属性就是对象属性的值。例如,通过length属性可以返回当前文档中该对象的数目。每个对象被存储在数组中,可以通过索引值来访问该数组中的元素。 all:返回所有标记和对象。 anchors:表示文档中的锚点,每个锚点都被存储在anchors数组中。 links:表示文档中的超链接,每个超链接都存储在links数组中。 forms:返回所有表单。 images:返回所有图像。 stylesheets:返回所有样式属性对象。 applets:返回所有Applet对象。 embeds:返回所有嵌入标记。 scripts:返回所有Script程序对象。
  • 16. 7.2.2 JavaScript浏览器对象(2)Document对象的方法 Document对象通过方法对文档内容进行控制。 open():打开要输入的文档。执行该方法后,文档中的当前内容被清除,可以使用write或writeLn方法将新内容写到文档中。 语法格式:Document.open。 write():向文档中写入HTML代码。 语法格式:Document.write 写入内容。 执行write方法后,写入内容插入到文档的当前位置,但该文档要执行close方法后才能显示出来。 writeLn():向文档中写入HTML代码。 语法格式:Document.writeLn 写入内容。 writeLn方法与Write方法类似,不同的是writeLn在内容末尾添加一个换行符。 close():关闭文档,并显示所有使用write或writeLn方法写入的内容。 clear():清除当前文档的内容,刷新屏幕。 对于Document对象的各个方法,浏览器默认的在当前文档中放入数据时的各种方法的顺序通常是: Document.Open; Document.Write content; Document.Close;
  • 17. 7.2.2 JavaScript浏览器对象(3)Document对象的事件 Document对象的事件主要有鼠标事件和键盘事件,如表7.5所示。 事件处理名说 明onClick单击鼠标onDbClick双击鼠标onMouseDown按下鼠标左键onMouseUp放开鼠标左键onMouseOver鼠标移到对象上onMouseOut鼠标离开对象onMouseMove移动鼠标onSelectStart开始选取对象内容onDragStart开始以拖动方式移动选取对象内容onKeyDown按下键盘按键onKeyPress用户按下任意键时,先产生KeyDown事件。若用户一直按住按键,则产生连续的KeyPress事件表7.5 Document对象事件
  • 18. 7.2.2 JavaScript浏览器对象3.History对象 (1)History对象的属性 length:返回历史表中的URL地址数目。 (2)History对象的方法 back():在历史表中向后搜索。 forward():在历史表中向前搜索。 go():在历史表中跳转到指定的项。 4.Navigator对象 Navigator对象包含浏览器的信息。 (1)Navigator对象的属性 appCodeName:返回浏览器的代码名称。 appName:返回浏览器的名称。 appVersion:返回浏览器的版本号。 userLanguage:返回当前用户所使用的语言。 cookieEnabled:如果允许使用cookies,则该属性返回true,否则返回false。 (2)Navigator对象的方法 它提供了一种用于确定浏览器中的Java是否可用的方法。 java.Enable ();
  • 19. 7.2.2 JavaScript浏览器对象5.Location对象 Location对象包含当前URL的信息。 (1)Location对象的属性 href:返回或设置当前文档的完整URL。 hash:返回或设置当前URL中#后面的部分(即书签)的名称。 host:返回或设置当前URL中的主机名和端口部分。 hostname:返回或设置当前URL中的主机名。 port:返回或设置当前URL中的端口部分。 path:返回或设置当前URL中的路径部分。 protocol:返回或设置当前URL中的协议类型。 search:返回或设置当前URL中的查询字符串,即提交给服务器时在URL中紧跟在问号后面的内容。如果当前URL中不包含查询字符串,则它返回一个空字符串。 (2)Location对象的方法 reload():重新加载当前文档。 replace():用参数中给出的网址替换当前的网址。 assign():将当前URL地址设置为其参数所给出的URL。
  • 20. 7.2.2 JavaScript浏览器对象6.Link对象 Link对象表示文档中的超链接,通过该对象的一些属性可以得到链接目标。Link对象的基本属性是length,它返回文档中链接的数目。每个链接都是Links数组中的一个元素,可以通过索引值来访问。例如,第一个链接是Links(0),第二个链接是Links(1),最后一个链接是Links(Links.Length)。
  • 21. 7.3 Ajax基础应用7.3.1 Ajax应用实例 开发一个Ajax应用的步骤如下。  1. 建立项目 打开MyEclipse,建立Web项目,命名为“AjaxTest”。 注意,下面只列出文件的内容,而不说明在什么地方建立该文件,经过前面的学习,相信大家一定很清楚了,这里列出项目的目录结构,如图7.3所示。 图7.3 项目生成的目录
  • 22. 7.3.1 Ajax应用实例2. CheckUser.java 学生注册名的唯一性由一个名为“CheckUser”的HttpServlet来实现,代码。 3. web.xml 在介绍Servlet的时候说过,有Servlet文件存在就要进行相应的配置。 This is the description of my J2EE component This is the display name of my J2EE component CheckUser CheckUser CheckUser /CheckUser
  • 23. 7.3.1 Ajax应用实例4. index.jsp 接下来编写客户端程序,对应代码。 5. 运行 部署运行,可以验证实际效果。当输入已经存在的学号时,就会无刷新页面,提示该学号已经存在,如图7.4所示。 图7.4 运行效果
  • 24. 7.3.2 XMLHttpRequest对象为了满足各种不同浏览器的兼容性,必须先进行测试,取得XMLHttpRequest或ActiveXObject,例如下面的代码: var xmlHttp; function createXMLHttpRequest(){ if(window.XMLHttpRequest){ //如果可以取得XMLHttpRequest xmlHttp=new XMLHttpRequest(); //Mozilla、Firefox、Safari } else if(window.ActiveXObject){ //如果可以取得ActiveXObject xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//Internet Explorer } }
  • 25. 7.3.2 XMLHttpRequest对象创建了XMLHttpRequest对象后,通过在JavaScript脚本中调用XMLHttpRequest对象的方法(见表7.6)和XMLHttpRequest对象的属性(见表7.7),实现Ajax的功能。 方 法 名描 述abort()停止当前请求getAllResponseHeaders()将HTTP请求的所有响应首部作为键/值对返回getResponseHeader("header")返回指定首部的字符串值open("method","url"[,asyncFlag[,"userName" [, "password"]]])建立对服务器的调用,method参数可以是GET、POST或PUT,url参数可以是相对或绝对URL。该方法还有3个可选参数: asyncFlag=是否非同步标记 username=用户名 password=密码send(content)向服务器发送请求setRequestHeader("header","value")把指定首部设置为所提供的值,在调用该方法之前必须先调用open方法表7.6 XMLHttpRequest对象的方法
  • 26. 7.3.2 XMLHttpRequest对象属 性 名描 述onreadystatechange状态改变事件触发器,每个状态改变都会触发这个事件触发器readyState对象状态: 0 = 未初始化 1 = 正在加载 2 = 已加载 3 = 交互中 4 = 完成responseText服务器的响应,字符串responseXML服务器的响应,XML。该对象可以解析为一个DOM对象status服务器返回的HTTP状态码statusTextHTTP状态码的相应文本表7.7 XMLHttpRequest对象的属性
  • 27. 7.3.2 XMLHttpRequest对象不同的浏览器对Ajax有不同的支持方法,而对于Web服务器来说没有任何变化,因为浏览器和服务器之间的这个通道依然是基于HTTP请求和响应的,浏览器正常的请求和Ajax请求对于Web服务器来说没有任何区别。图7.5说明了Ajax的请求和响应过程。 图7.5 Ajax的请求和响应过程Ajax的请求和响应过程如下: ① 网页调用JavaScript程序。 ② JavaScript利用浏览器提供的XMLHTTP对象向Web服务器发送请求。 ③ 请求的URL资源处理后返回结果给浏览器的XMLHTTP对象。 ④ XMLHTTP对象调用实现设置的处理方法。 ⑤ JavaScript方法解析返回的数据,利用返回的数据更新页面。
  • 28. 7.3.3 Ajax技术适用场合1. 数据验证 在填写表单内容时,有时需要保证数据的唯一性(如新用户注册时填写的用户名),因此必须对用户输入内容进行数据验证。数据验证通常有两种方式:一种是直接填写,然后提交表单,这种方式需要将整个页面提交到服务器端进行验证,整个过程不仅时间长而且给服务器造成不必要的负担;第二种是对第一种方式的改进,用户通过单击相应的验证按钮,打开新窗口查看验证结果。 2. 按需取数据 分类树或树形结构在Web应用系统中使用非常普遍。以前每次对分类树的操作都会引起页面刷新,用户需要等待一段刷新的时间。为此,一般不采用每次调用后台的方式,而是一次性将分类结构中的数据全部读取出来并写入数组,然后根据用户的操作需求,用JavaScript来控制节点的呈现,这样虽然解决了响应速度慢、需要刷新页面的问题,并且避免向服务器频繁发送请求,但是如果用户不对分类树进行操作,或者只对分类树中的一部分数据进行操作,那么读取的数据就会成为垃圾资源。 Ajax技术改进了分类树的实现机制。在初始化页面时,只获取根部分类数据并显示它们。当用户单击根部分类的某一子节点时,页面会通过Ajax向服务器请求当前分类所属的子分类的所有数据;如果再继续请求已经呈现的子分类的子节点,再次向服务器请求当前子分类所属的子分类的所有数据,依此类推。
  • 29. 7.3.3 Ajax技术适用场合3. 自动更新页面 在Web应用中有很多数据变化十分迅速,如股市、天气预报等。在Ajax技术出现之前,用户为了及时了解相关的内容必须不断手动刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能。这种做法显然可以达到目的,但如果有一段时间网页内容没有发生任何变化,但是用户并不知道,仍然不断地刷新页面,或用户手动刷新太久失去了耐心,放弃刷新页面,很有可能在此时有新消息出现,这样就错过了得知消息的机会。 Ajax技术解决了一问题。页面加载以后,通过Ajax引擎在后台定时向服务器发送请求,查看是否有最新的消息。如果有,则加载新的数据,并且在页面上动态更新,然后通过一定的方式通知用户。
  • 30. 7.4 开源Ajax框架——DWR开发一个使用DWR的Web项目,步骤如下。 ① 创建Web项目,命名为AjaxDwr。 ② 添加DWR的Jar包。 ③ 修改项目的web.xml文件,添加Servlet映射。 在项目的web.xml文件中加入下面的代码: dwr-invoker org.directwebremoting.servlet.DwrServlet debug true dwr-invoker /dwr/*
  • 31. 7.4 开源Ajax框架——DWR④ 创建dwr.xml文件。 在项目的WEB-INF文件夹下创建dwr.xml部署描述文件,其代码如下: 该配置文件中,creator属性是必须的,它指定使用哪种创造器。默认情况下,create元素的creator属性可有三种选择值:new,scripted,spring。最常用的是new值,它代表将使用Java类默认的无参数构造方法创建类的实例对象。scripted值表示使用脚本语言来创建Java类对象。spring值表示通过Spring框架Bean来创建Java类对象。 该配置还可以在create元素下加入include标记,指明要公开给JavaScript的方法。例如加入:
  • 32. 7.4 开源Ajax框架——DWR⑤ 使用JavaScript远程调用Java类方法。 <%@ page language="java" pageEncoding="UTF-8"%> DWR应用
  • 33. 7.4 开源Ajax框架——DWR⑥ 部署运行。 部署运行,单击【查询当前时间】按钮,看到如图7.6所示的界面。 图7.6 DWR测试界面