7
使用Ajax进行数据交互
在web开发中, Ajax技术可以实现页面的局部更新,数据异步交互 的方式给用户带来更好的使用体验。 使用 Javascript可以实现Ajax操作, 但使用 Javascript实现Ajax操作不仅代码复杂, 还需要考虑浏览器的兼 容问题, 给开发人员带来了不便。 i Query对 Javascript进行了二次封装, 同时也对Ajax的操作重新进行了整理与封装, 简化了Ajax 的使用。本模 块将针对jQuery 中Ajax的使用进行详细讲解。
。 知识目标 。
1 . 了解jQuery框架的基础知识。
2.理解 Ajax 的原理。
3. 熟悉jQuery框架对 Ajax 的实现。
4. 了解 JSON数据格式的使用方法。
。 能力目标 。
1 . 掌握Query 中向服务器请求数据的方法。
2. 能编写基本的 Ajax程序并理解异步刷新的特点和Ajax应用的场合。
3. 熟练掌握jQuery结合 Nj ax开发技术。
。 素质目标 。
1 .在实际项 目活动中需要具备细心和积极主动等态度。
2.具有在技术上遇到难题时集思广益, 一起解决问题的能力。
3.具有在实际项 目活动中深入体验创新思维的实践和应用的能力 。
Java web
程序设计任务教程
jQuery 的常用操作包括选择器的使用、 元素对象的操作、 事件的绑定、 链式编程等。
1.选择器的使用
jQuery选择器用于获取网页元素对象。 jQuery选择器以 "$" 符号开头, 示例代码 如下:
2.元素对象的操作
jQuery 中对获取的元素对象可以进行一系列的操作, 如元素的取值、 赋值、 属性的 设置等, 示例代码如下:
3.事件的绑定
在jQuery 中, 事件一般直接绑定在元素上。 例如, 为指定元素对象绑定单击事件, 示例代码如下:
4.链式编程
jQuery 中支持多个链式编程方法,在完成相同功能的情况下, 开发者可以编写最少 的代码。 多个方法链式调用的示例代码如下:
.__2:
Java web
程序设计任务教程
由上述语法格式可知, $. get()是jQuery 的静态方法, 由 "$" 对象直接调用。 $. get() 方法的参数含义如表7- 1 -2所示。
表 7-1-2 $. get( )方法的参数含义
|
|
urI |
必需, 规定加载资源的路径 |
data |
可选, 发送至服务器的数据 |
function(data, status, xhr) |
可选, 请求成功时执行的函数, data表示从服务器返回的数据; status 表示请求的状态值; x hr表示当前请求相关的XMLHttpRequest对象 |
data Type |
可选, 预期的服务器响应的数据类型 (xml、html、text、script、json. json p) |
3.$. pos il方法
在jQuery 中, 发送GET请求调用 $. get()方法, 发送POST请求调用 $. post()方法, 两个方法使用方式完全相同, 替换两者的方法名就可以在GET 请求和POST请求方式之 间切换。
首先在 IDEA 中创建项目 project07, 并在 IDEA 中 配置project07项 目 的Tomcat、 jQuery 1.6.1等信息, 最后在project07的web 目录下创建 load. jsp页面。 load. jsp 的实现如例7- 1 - 1所示。
例 7-1-1 load. jsp
Java web
程序设计任务教程
问 "http://ocal host:8080/project07/1o ad. jsp", 单击 "加载数据" 按钮, 页面效果如 图 7-1-1所示。
图 7-1-1 例7- 1 -2运行结果
由图7- 1 - 1 可知, 浏览器局部更新了数据。在局部更新的后面是load()方法从target. jsp文件获取数据后, 将数据作为 JSP 内容插入了 id为box 的目标元素内。
党的二十大报告提出 , 实施科教兴国战略, 强化现代化建设人才支撑。 作为新时 代的大学生, 我们应清醒地认识到 "青年强 , 则国家强" 的道理, 施展才干的舞台无 比广阔 , 实现梦想的前景无比光明 。 |
步骤2 向服务器发送数据
load()方法在发送请求时, 可以附带一些数据, 附带的数据可以通过 第 2个参数传递。 下面演示如何调用 load()方法向服务器发送数据。 在 project07项 目 的web 目 录下创 建 load2. jsp文件, load2. jsp 的 实现 如 例 7-1-3所示。
例 7-1-3 load2. jsp
Java web
程序设计任务教程
码调用response的 get writer()方法打印用户注册成功的信息, 从而检测服务器是否收到 了 load()方法发送的数据。
在 IDEA 中 启动Tomcat, 在浏 览 器 中访 问 "http://ocal host:8080/project07/ load2. jsp", 并单击 "查询 '三大战略' 的第3条数据" 按钮, 结果如图 7- 1 -2所示。
图 7-1-2 例7- 1 -4运行结果
.__22,
4 <title>get</title> 
学习笔记
5 <script type="text/javascript"
6 sr c="$t page context. request. context path}/jquery
-1.6.1. min. js"></script>
7 </head>
8 <body> 
9 <button id-"btn">加载数据 </button>
10 <div id="box"></div>
11 <script>
12 $ ( ' #btn' ) . click (function () {
13 $ .get ( 'http://local host:8080/project07
/target. jsp' , function (data) t
14 $ ( '#box' ) . html (data) ;
15 }, 'html') ;
17 </script>
18 </body> 
19 </html>
在例 7- 1 -5的第 13 
16行代码中, $. get()方法的第 2个参数表
示请求成功后执行的回调函数。 其中, 回调函数的参数 data表示服 务器返回的数据。 第 14行代码将返回的数据替换到 id值为box 的
元素中。
在IDEA中启动Tomcat, 通过浏览器访问 "http://local host: 8080/project07/get. jsp", 单击 "加载数据" 按钮, 页面效果如
图 7-1-3所示。 
Java web
程序设计任务教程
由图 7- 1 -3 可知, 浏览器使用GET 方式从服务器端请求到了数据, 并通过回调函数
模块7学习任务 1 任务实施步骤4 -wzduI rp
在例 7- 1 -6 中, 第 14 
18行代码中 的 $. get()方 法的第 2 个参数 user Data表示 向服务器发送请求时携带的数据, 携带的数据为用户名和密码, 访问服务器资源的 Load2ser v let. java。
在IDEA 中启动Tomcat, 在浏览器中访问 "http://ocal host:8080/project07/get2. jsp", 并单击 "加载数据"按钮,效果如图 7- 1 -4所示。
模块
学习笔记
图 7-1-4 例 7- 1 -6运行结果
.__2:
Java web
程序设计任务教程
上述代码的作用是在控制台输出 1o ad()方法的回调函数function()的参数, 即请求 的数据、 请求状态和XMLHttpRequest对象。 其中, status请求状态共有 5种, 分别为 success (成功)、 not modified (未修改)、 error (错误)、 time out (超时) 和 parser error (解析错误)。
修改完成后, 在 IDEA 中重启Tomcat, 在浏览器中请求 "http://ocal host:8080/ project07/o ad2. jsp" 并单击 "加载数据" 按钮, 再打开开发者工具 (一般在浏览器中按 "F12" 键可以直接进入开发者模式) , 页面效果如图 7- 1 -5所示。
图 7-1-5 控 制 台 输 出
由图 7- 1 -5可知, 输出结果依次是请求的数据 (load2. jsp文档内容)、 请求状态及本 次请求对应的XMLHttpRequest对象。
2 实现登录页面信息的实时刷新
本任务要求学生学会使用Ajax技术对登录页面的信息进行实时刷新, 在用户输入账 号和密码单击 "登录" 按钮时不会重新加载页面, 实现局部刷新。
学习笔记
Java web
程序设计任务教程
表 7-2- 1 传统异步请求方式和Ajax异步请求方式的区别
|
|
|
|
传统异步 |
HTTP |
页面链接跳转发出 |
重新载入新页面 |
Ajax异步 |
HTTP |
由 XMLHttpRequest 实例发出 请求 |
Javascript和DOM技术把数据更 新到本页面 |
由表7-2- 1 可知, 相较于传统异步请求方式, Ajax异步请求具有以下几点优势:
(1) 请求数据量少: 因为 Ajax请求只需要得到必要数据, 对不需要更新的数据不做 请求,所以数据量少,传输时间较短。
(2) 请求分散: Ajax是按需请求, 请求是异步形式, 可在任意时刻发出, 所以请求 不会集中爆发, 在一定程度上减轻了服务器的压力, 响应速度也比较快。
(3) 用户体验优化: Ajax数据请求响应时间短、 数据传送速度快, 已经在很大程度 上提升了用户的使用体验。 由于Ajax是异步请求, 不会刷新页面, 使得页面上的用户行 为得到了有效保留。
在jQuery 中, 向服务器请求数据的方法有很多。 其中, 最基本的方法是 $. ajax(), $. ajax()方法可以精确地控制Ajax请求。 例如, 在请求出错时执行某些操作,设置请求 字符集和超时时间等。
$. ajax()方法是jQuery中最底层的Ajax方法, 前面讲解的$. get()方法、 $. post()方 法就是对 $. ajax()方法的进一步封装, $. get()方法、 $. post()方法的实际封装代码如下:
.__2:
从第9 
15行代码可以看出, $. get()方法和$. post()方法在底 学习笔记
层都是调用$. ajax()实现相应功能的。
$. ajax()方法可以实现所有关于Ajax 的操作, 其语法格式
如下:
$. ajax(options) 1/ 语法格式1
$ .ajax (url, options) 1/ 语法格式2
在上述语法格式中, url表示请求的URL; options对象以 key-value的形式将Ajax请求需要的设置包含在参数中。 $. ajax()
方法中可设置的参数如表 7-2-2所示。 
表 7-2 -2 $. ajax( )方法中可设置的参数
ur |
请求地址, 默认是当前页面 |
data |
发送至服务器的数据 |
xhr |
用于创建XMLHttpRequest对象的函数 |
before send(x hr) |
发送请求前执行的函数 |
success(result, status, xhr) |
请求成功时执行的函数 |
error(x hr, status, error) |
请求失败时执行的函数 |
complete(xhr, status) |
请求完成时执行的 函数 (请求成功或失败时 都会调用 , 顺序在 success和 error 函数之后) |
callback |
请求完成时执行的函数 |
data Type |
预期的服务器响应的数据类型 |
type |
请求方式 (GET或 POST) |
cache |
是否允许浏览器缓存被请求页面。 默认为 true |
time out |
设置本地的请求超时时间 (以毫秒计 |
a sync |
是否使用异步请求。 默认为 true |
user nam ne |
在 HTTP访问认证请求中使用的用户名 |
password |
在 HTTP访问认证请求中使用的密码 |
content Type |
发送数据到服务器时所使用的内容类型。 默 认为 application/x-www-form-url encoded |
process Data |
是否将请求发送的数据转换为查询字符串。 默认为 true |
context |
为所有Ajax相关的回调函数指定 this值 |
data Filter(data, type) |
用于处理 XML Htpe quest原始响应数据 |
Java web
程序设计任务教程
|
|
global |
是否为请求触发全局Ajax事件处理程序。 默认为 true |
if Modified |
是否仅在最后一次请求后响应发生改变时才请求成功。 默认为 false |
traditional |
是否使用传统方式序列化数据。 默认为 false |
script char set |
请求的字符集 |
Java web
程序设计任务教程
中第 8行代码中, $(document). ready()是jQuery 中的方法, 在页面加载后优先执行 ready()方法内的代码; 第 12行代码的 url属性后的值是请求的ser v let地址; 第 17行代 码中的data Type属性用于设置返回的数据格式, 常用的有 text、json script、html、xml
和 string, 此处使用 text格式。
步骤 2 编写ser v let代码
在project07项目的sr c 目录下创建名为AJAx serv let的ser v let类, 用于判 断用户输入的账号与密码是否正确。AJAx serv let类的实现如例7-2-2所示。
例 7-2-2 AJAx serv let. java
1 import java x . servlet . servlet Exception;
2 import java x . servlet . annotation . webs erv let;
3 import java x . servlet . http . Http serv let;
4 import java x .servlet . http . Http servlet Request;
5 import java x .servlet . http . Http servlet Response;
6 import java . io . IO Exception;
7 import java . io . print writer;
任务实施步骤2 -tbjhgi
8 webs ervlet (name = "AJAx serv let", url patterns = "/AJAx serv let")
9 public class AJAx servlet extends Http ser vlet t
10 public void do Get (Http servlet Request request, Http servlet Response
11 response) throws servlet Exception, IO Exception t
12 }
13 public void do post (Http servlet Request request, Http servlet Response
14 response) throws servlet Exception, IO Exception t
15 boolean flag = false;
16 if ( (request .get parameter ("userName" ) ) . equals ("aj ax" )
17 &&request . get parameter ("password") . equals ("123") ) ( 18 flag = true; /登录成功标志
19 }else {
20 flag=false;
21 }
22 response .set content Type ("text/html; char set=utf-8") ;
23 /1使用 print writer方法打印登录结果
24 print writer out = response . get writer () ;
25 out . print (flag) ;
26 out . flush ( ) ;
27 out . close ( ) ;
28 }
29 }
._212,
步骤 3
启动测试
学习笔记
在IDEA中启动Tomcat, 在浏览器中访问 "http://local host:
Java web
程序设计任务教程
{
"name": "Java web程序设计任务教程 ", "author" : " 张三 ",
"price" : "⃞49 . 80" } , {
"name": " Java wi eb程序设计进阶 ", "author" : "李四 ",
"price" : "⃞59 . 80" }
JSON数组数据都存储在一对 [ 中, 在 [ 中, 每一组数据用一对 }括起来, 多个组 之间用 "," 分隔。 需要注意的是, 如果value是string类型, 必须用双引号引起来, 如 果value是number、 object、boolean和数组, 可以不使用双引号。 下面通过一个示例分 步骤讲解 JSON数据的传递与获取。
步骤 1 下载jar包并导入
要使用 JSON 数据格式, 必须导入对应的jar包, 这里需要使用到 6个jar包, 分别 是 json-lib-2.4-jdk15.jar、 ez morph 1.0.6. jar、 commons logging 1.1.1. jar、 commons- lang 2.5. jar、 commons-colletions-3.2.1. jar和commons-bean utils 1.8.0. jar, 下载完成 后, 将这 6个jar包复制到 project07项目的 WEB-INF/ib 目录下。 这些jar包可以在 Maven 官网下载或在本书的配套资源中下载。 导入jar包后的项目结构如图 7-2-5所示。
图 7-2 -5 导入 JSON 数据格式 jar包的项目结构
.__224
Java web
程序设计任务教程
例 7-2-4 JSON serv let. java
.__2:
Java web
程序设计任务教程
在例 7-2-5 的第 22 
28行代码中, 通过循环遍历的方式获取例 7-2-4的数据, 并解析 获取相应信息, 将获取的信息拼接成HTML 字符串。 第29行代码调用 append()方法将 拼接的 JSP 内容插入页面中。
步骤4 启动并测试
在 IDEA 中启动Tomcat, 并在浏览器中访问 "http://ocal host:8080/project07/ JSON. jsp", 单击 "加载数据"按钮, 效果如图 7-2-6所示。
图 7-2-6 例7-2- 5运行结果
应用Ajax可以实现无刷新动态获取实时信息。 下面完成一个程序, 要求应用 Ajax 实现无刷新、 每隔 10分钟从数据库获取一次最新公告并滚动显示。 实时显示公告信息的 效果如图 7-3- 1所示。
图 7-3- 1 实时显示公告信息的效果图
注意: 要想实现公告信息实时刷新, 首先需要有数据库支持, 再通过Ajax 无刷新从数 据库实时获取数据, 所以要先创建数据库, 再使用 JDBC 连接数据库读取数据, 然后使用
Java web
程序设计任务教程
步骤 3 编写数据库连接类
在项目 project07的 src 目录下创建名为cn的包, 在cn包下创建名为 conn DB. java 的类, 用于与数据库交互, 具体代码如例7-3 -2所示。
例 7-3 -2 conn DB. java
.__2:
Java web
程序设计任务教程
42 conn = Driver Manager. get connection (db url, user, pass) ; 43 }catch (Exception ee) f
44 ee. print stack Trace () ;
45 }
46 if (conn==null) (
47 system. err. print("连接失败") ;
48 }
49 return conn; 50 }
51 /**
52 * 执行查询
53 */
54 public Result set execute Query (string sql) t 55 try(
56 conn=get connection () ;
57 stmt =conn . create statement
(Result set. TYPE_SCROLL_INSENSITIVE, Result set. CONCUR_READ_ONLY) ;
58 /执行SQL 语句, 并返回一个Result set对象 rs
59 rs =st mt. execute Query (sql) ;
60 )catch (SQL Exception ex) (
61 system. err. print (ex. get Error code () ) ; 62 }
63 return rs; 64 }
65 /**
66 * 关闭数据库连接
67 */
68 public void close () f
69 tryt
70 if (rs !=null) (
71 rs . close () ;
72 }
73 if (st mt !=null) ( 74 st mt. close () ; 75 }
76 if (conn !=null) ( 77 conn. close () ; 78 }
.__22,
Java web
程序设计任务教程
15 out. print("<1i>暂无公告信息! </li>") ;
18 </ul>
至此, 使用 Ajax实时显示公告信息的代码已经全部实现, 在 IDEA中启动Tomcat, 在浏览器中访问 "http://1ocal host:8080/project07/index. jsp", 结果见图 7-3-1。
在平时应多阅读一些中国的古籍, 中华民族在五千多年的历史进程中不仅创造出 光辉灿烂、享誉世界的中华文明 , 也塑造出独特的精神气质和精神品格。 |
一、选择题
1. jQuery的简写是 ( )。
A ?符号 B. $符号
C. %符号 D. @ 符号
2. jQuery 的常用操作中, 不包括下列选项中的 ( )。
A.选择器的使用 B.元素对象的操作
C.响应式编程 D.事件的绑定
3. jQuery 中最底层的Ajax 方法是 ( )。
A. $. get()方法 B. $. post()方法
C. $. ajax() D. $. ready()
二、简答题
1.相较于传统异步请求方式, Ajax异步请求具有哪些优势?请简要说明。
2.使用 Ajax 异步技术判断网页输入的账号是否已被注册。 要求在网页表单事件响应 函数、服务器端业务处理函数和客户端回调函数中输出时间信息。
