第7章 JavaEE基础应用教程之Ajax

JavaEE基础应用教程之Ajax

第7章 Ajax 7.1 Ajax概述 7.2 JavaScript基础 7.3 Ajax基础应用 7.4 开源Ajax框架——DWR

JavaEE基础应用教程之Ajax

Ajax包括： Html/XHtml:实现页面内容的表示。 CSS:格式化文本内容。 DOM:对页面内容进行动态更新。 XML:实现数据交换和格式转化。 XMLHttpRequest对象：实现与服务器异步通信。 JavaScript:实现以上所有技术的融合。 在Web应用程序中，通常通过表单进行数据提交，在同步情况下，使用者发 送表单之后，就只能等待服务器回应。在这段时间内，使用者无法进一步操作， 如图7.1所示。 图7.1中加阴影部分是发送表单之后使用者必须等待的时间，浏览器预设为使 用同步方式送出请求并等待回应。

7.1 Ajax概述

图7.1 同步技术

JavaEE基础应用教程之Ajax

7.1 Ajax概述当服务器处理请求并送出回应时，计算机接收到回应，再呼叫浏览器所设定 的对应动作进行处理，如图7.2所示。

图7.2 非同步技术

JavaEE基础应用教程之Ajax

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表示换行，\\表示 “\”,\”表示“””。

JavaEE基础应用教程之Ajax

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;

7.2.1 JavaScript语法基础

JavaEE基础应用教程之Ajax

7.2.1 JavaScr

ipt语法基础 4. 运算符 JavaScript运算符可分为3类：算术运算符(见表7.1)。表7.1 算术运算符运 算 符 + * / % | & << >> >>> ~ ++ -功 能 加 减 乘 除 取模 按位或 按位与 左移 右移 右移、零填充 取反 取补 递加1 递减1

JavaEE基础应用教程之Ajax

7.2.1 JavaScript语法基础比较运算符(见表7.2)和逻辑运算符(见表7.3)。表7.2 比较运算符运 算 符 < > <= >= ==!=

表7.3 逻辑运算符运 算 符 ！ &= & |= |^= ^ ?: || == !=

功 能 小于 大于 小于等于 大于等于 等于不等于

功 能 取反 与后赋值 逻辑与 或后赋值 逻辑或异或之后赋值 逻辑异或 三目操作符 或 等于 不等于

JavaEE基础应用教程之Ajax

7.2.1 JavaScript语法基础 5. 语句 JavaScript语句包括：if条件语句、for循环语句、while循环语句、break语句 和continue语句。这些语句的应用与在Java语言中类似，这里就不详细介绍了。 6. 函数 JavaScript的函数相当于Java语言中的方法，用于完成所需要的功能。通常 在写一个复杂程序时，总是根据所完成功能的不同，将程序划分为一些相对独立 的部分，每个部分由一个函数来完成。从而使各部分独立，任务单一，程序清晰、 易懂。 JavaScript中函数定义的基本格式如下： function 函数名(形式参数){ 函数体； return 表达式; }

JavaEE基础应用教程之Ajax

7.2.2 JavaScript浏览器对象 1.Window对象 Window 对象描述浏览器窗口特征，它是Document、Location和History对象的父 对象。另外，还可以认为它是其他任何对象的假定父对象。 (1)Window对象属性 name:指定窗口的名称。 <a href="http://www.77cn.com.cn" target="IE_Window">南京师范大学</a> parent:代表当前窗口(框架)的父窗口，使用它返回对象的方法和属性。 opener:返回产生当前窗口的窗口对象，使用它返回对象的方法和属性。 top:代表主窗口，是最顶层的窗口，也是所有其他窗口的父窗口。可通过该 对象访问当前窗口的方法和属性。 self:返回当前窗口的一个对象，可通过该对象访问当前窗口的方法和属性。 defaultstatus:返回或设置将在浏览器状态栏中显示的默认内容。 status:返回或设置将在浏览器状态栏中显示的指定内容。例如，在浏览器状 态栏中显示浏览当天的日期： status = Dateformat(date);

JavaEE基础应用教程之Ajax

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)

JavaEE基础应用教程之Ajax

open():打开一个已存在的窗口，或者创建一个新窗口，并在该窗口中加载一 个文档。 语法格式如下： NewWindow = Window.open(url , name, 窗口参数设置表) 窗口参数设置表格式：参数1=值，参数2=值，…… 窗口参数用于描述打开的窗口，参数可以多个，是可选项。例如，Set NewWindow1=Window.open("Jsp.htm","WindowIE","toolbar=no,location=no")

7.2.2 JavaScript浏览器对象

这行语句将在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():在当前窗口中显示指定网页。 语法格 …… 此处隐藏：4242字，全部文档内容请下载后查看。喜欢就下载吧 ……