第7章 ajax_开发工具

PPT 内容

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测试界面

第7章 ajax

0mighty

贡献于2016-11-01

第7章 ajax

PPT 内容

PPT 图集

相关PPT