当前课程知识点:Web后端开发技术 > 第9章 某高校毕业生信息发布系统开发 > 9.1 技术准备 > 9.1.2技术准备-Ajax技术
同学们好
欢迎回来继续学习web后端开发技术
在这一小节当中
我们将介绍Ajax技术
首先我们看一段视频
通过刚才的视频
大家已经注意到
当我们在百度的搜索框中输入字符的时候
会在它的下面及时的实时的提示一些信息
那么这种功能是通过什么技术来实现的呢
对了
就是通过Ajax技术来实现的
那么我们一这一小节将详细介绍一下
Ajax技术
那么Ajax它产生是有一定的背景的
在传统的web应用中
客户端和服务器之间采用的就是
发送请求
接下来就是等待
然后是响应新的页面
或者是刷新当前页面这种交互模式
由于这种等待使用户的体验很差
为了提高用户的体验
人们提出一些解决方案
比如使用
frameset和frame标签
在2005年
谷歌通过Google Suggest
使Ajax这个技术流行起来
这种无刷新页面的技术
使得Web应用能够达到与桌面相同的
这样的效果
那么Ajax是什么呢
Ajax
它实质上是一个异步的
JavaScript和xml
它的作用就是使得不刷新页面
就能够向服务器发起请求
那么我们看一下Ajax的工作过程
在浏览器当中
用户触发的一个js事件
那么在js事件当中
我们需要创建一个
XMLHttpRequest对象
那么由这个对象向web服务器发送 http请求
服务器将处理的结果
返回给XMLHttpRequest对象
这个对象它有一个回调函数
他可以接收到返回这个数据
并且用这些数据来更新用户界面
这样就实现了页面的局部刷新
而不需要整个页面的刷新的功能
这就是Ajax的工作原理
通过刚才的描述
我们知道Ajax呢它是一个js对象
它实质上是浏览器的一个特性
本质就是一个js对象
使用这个对象可以向web服务器发送
http请求
并且还可以接收服务器响应的数据
几乎所有的浏览器都支持
XMLHttpRequest对象
下面示例
如何创建XMLHttpRequest对象
这里面都是js代码了
我简单介绍一下
首先我们定义一个xhr对象
它代表的就是XMLHttpRequest对象
对于 IE7以上的版本
还有chrome
opera
和safari这种浏览器
我们使用这行代码来创建对象
对于IE5和IE6
我们使用这样一行代码来创建对象
注意这里参数
这个写法就是这样来写的
我们在创建对象的时候使用
try catch来完成
那么第1步先判断一下
当前浏览器是不是这种版本
如果不是这种版本
在它的try当中
在它catch当中
再写一对try catch来判断它
最后我们可以通过 alert来
弹出一个窗口
直观的看一下对象是否创建成功了
接下来我们介绍一下
XMLHttpRequest
对象的属性
第1个属性它叫做
readyState
意思是什么呢
它的意思是表示异步请求过程当中
这个对象的状态
一会我们会看到它共计有5种状态
第2个属性是onreadystatechange
它表示的是某一次状态变化所触发的事件
处理程序
第3个属性是 responseText
它表示的是服务器返回的文本信息
这里面主要是这个字符串信息
接下来属性是responseXML
它表示的是从服务器返回的
XML文档数据
下边是status
它表示服务器返回的状态码
那么我们在之前的课程当中也介绍了
比如404是一个错误请求
200是一个成功的请求
下边是statusText
它是伴随状态码的
字符信息
接下来我们介绍一下readyState属性
它的属性值
它的属性值共计有5个
分别用数字
0 1 2 3 4来表示
这5个数字表示的是
XMLHttpRequest
对象的5个状态
那么这5个状态都是什么
我们这里面给大家做一个简单的介绍
0表示的是已经创建了这样一个对象
但是还没有初始化
1表示是待发送状态
创建完成了
待发送什么
待发送请求这种状态
此时他已经调用了
一个叫做open的方法
2表示的是发送状态
此时它已经调用了send的方法向服务器
发起了请求
3表示正在接受请求的状态
也就是说正在接收服务器返回数据
这样一个状态
4表示服务器的数据已经被完全接收
完毕的状态
这里面我们一定要注意到
4它表示的是数据库向
这个对象返回数据已经结束了
这个状态用4来表示
接下来我们介绍一下
XMLHttpRequest对象的方法
常用的方法就是上面这两个
第1个叫open方法
而这个方法它的作用是
建立对服务器的调用
它里面有method的方法就是说
你发送请求是哪种类型的
Get类型的还是put post
还是其他类型的
还有一个请求的地址
第2个方法叫做send方法
它表示的向服务器发送的请求
接下来这个方法叫getAllResponseHeaders
它的作用是以k/v的形式
获取返回所有的HTTP头部信息
第二
接下来是getResponseHeader
返回指定的http头部的值
最后一个方法叫做 setRequestHeader
它的作用是把指定的请求头设置为
提供的值
接下来我们详细介绍两个方法
第1个方法是open方法
它作用是建立对服务器的调用
共计有5个参数
第1个参数是method
它表示是请求的方法
如get post put等等
这是个必选项
接下来这个参数是url 表示的是
调用的资源的地址
这也是一个必选项
接下来是asynch
他指定的是当前的工作模式是异步的
还是同步的
默认的是异步的
下边是userName指定一个
特定的用户名
最后一个参数是password
指定密码
后边三个选项都是可选的
send方法
它是用来向服务器发送请求的
它里面有一个这个参数内容可有可无
如果填写的话
那么它可以是DOM对象的实例
或者是输入流或者是字符串
它会作为请求的一部分被发送
需要说明的是
如果这个请求是异步的
那么这个方法在调用过程当中
会立即返回
如果这个调用是同步的
那么这个方法会等待
直到接收数据响应
完成为止
接下来我们示例使用Ajax
服务器发送请求的过程
首先我们要创建ajax这个对象
我们这里用xhr来表示这个代码
刚才我们已经看到了
接下来我们要设置发送请求的数据
和url再接下来我们就要为
xhr对象
它的onreleadychange
属性设置
回调函数
这一步是非常关键的
那么在回调函数内部
我们要通过if语句做判断
判断什么呢
判断两件事情
第1件事情
我们看一下它的readystate
是否等于4
这就表示什么呢
表示服务器返回的数据是否已经被
xhr这个对象完全接收
接收完毕了
另外一个需要判断的就是
status是否等于200
这意味着在判断什么呢
判断服务器是否是一个成功的响应
如果这两个条件都满足的话
那么我们就可以在if语句体内来
更新页面的元素了
接下来我们还需要调用
open方法和send方法
向服务器发送请求
open方法是在前
send方法是在后
接下来我们使用ajax实现根据
区号获取省市名称这样一个例子
本节我们将使用ajax技术
来给大家演示一下
如何我们输入一个区号
然后根据区号到后台自动查询区号
所属的省和市
在页面不刷新的情况下
自动的填充到省和市的列表当中
那么为了完成这个功能
首先我们新建了一个ajax的
一个servlet
那么在servlet
doGet的方法当中
我们模拟了一些数据
那么这个数据我们是用map
来进行模拟的
首先我们new了一个HashMap
在这个map当中
我们 它的key是我们的区号
然后它的value是我们省和市
之间用逗号来隔开的
那么可以看到我们的承德区号就是
0314
它是属于河北
逗号隔开是承德
那么当接收到请求以后
我们向servlet发送请求的时候
我们会给它一个zipCode的
这样的一个参数
比如说我们现在给的是0314
那么我们就会到我们获取到的
zipCode
0314
然后我根据zipCode到
map当中把我的数据拿出来
那么拿到的就应该是河北
还有承德
那么当然了
如果这个数据拿不到的话
我就给它返回error和
error
如果拿到了
我就把这个数据返回给我的客户端
进行处理
这就是我们后台的一个示例
那么在我们的前台
Ajax这块我们该怎么去进行处理呢
首先我们这里面有相对应的
文本框
让我们输入区号
区号的时候
当我们失去焦点的时候
就会调用我们Ajax
Process这样的一个方法
那么把我当前的文本框对象给传进去
那么因为把文本框对象传进去以后
object就代表我输入文本框
我就可以拿到它里面的值
实际上也就是我们输入的 zipCode
然后向我们的后台异步的发生请求
当数据返回的时候
我把这个数据填充到省和市两个
文本框当中
那么接下来我们就看ajax
Process该怎么去实现
那么首先我们肯定要获取到我们的
zipCode
也就是说用户输入的 zipCode
那么因为我们把文本框传进来了
zip传进来
也就是说我们当前 update
是我们的文本框
我直接通过.value方法
就可以拿到我们的zipCode
然后我们要构造一个url
url是向我们后台请求的url
也就是我们的ajax的
servlet
那么这个地址我们这么来写
首先我获取到我当前的上下文的路径
我们可以通过request.get
contextPath
.get
ContextPath
那么所谓的上下文路径对于我当前
这个项目应该就是我们的
chapter nine
也就是第9章
这个的是我们的上下文路径
然后我再访问我们的ajax
servlet
然后我还要传递一个参数叫做
zipCode
那么zipCode连接上
我这里获取到的
zipCode
这就是我们要请求的url
然后我们在访问的时候
我们需要XMLHttpRequest
这么一个对象
那么这个对象我们写了一个方法叫做createXHR
因为在不同的浏览器当中
比如说IE7
谷歌
还有Opera等等这样的
包括火狐这样的浏览器
我们都是通过new一个
XMLHttpRequest对象
来初始化我们这个变量
Xhr我们这个异步对象
那么如果发生异常了
也就是说我们当前浏览器
不是我列出的这几种
那么有可能是IE5
IE6之前更早浏览器
这两种浏览器的new初始化
xhr的方法
那么通过ActiveXObject
这样的一种方式来
进行初始化
好
那么如果这样的话都初始化成功
我们就把我xhr给返回回来
所以说xhr这个对象
它是根据浏览器不同
我们采取不同的初始化方法
那么这时候我就可以去
调用这个方法来创建我们的异步对象
我们把它起名叫xhr那么加上
createXHR这个方法就
可以了
好
那么紧接着我们就要通过这个对象
然后它有一个属性叫做
readystatechange
它可以接受一个回调函数
我们叫做function
直接在function里写对应的方法
那么我们来判断一下
也就是说它会跟服务器交互
如果它的交互状态也就是
readyState是等于4的话
同时我们的返回的响应
是200 表示我服务器正确的接受了
这个请求
并且正确的响应了请求
那么只有在这样的情况下
我们这个代码还有必要继续往下写
那么我们首先获取到我们服务器
给我们返回的数据
也就是说当前我们返回时
date数据
好
我们定义一个变量来进行接收
我们可以通过xhr的
response
Response的 text方法
就可以拿到我们数据
因为我们的数据是以逗号分隔的
所以说我直接就拿用split的方法
给它分割开来
逗号前面的是省逗号
逗后面是市
我们就可以拿到
responseData
实际上是一个数组
然后我想把他的第0号元素会付给
province
第1号元素赋给 city
所以说我就可以通过
document的一个方法叫做
getElementById
首先我们获取到我们
province
然后我把它的值给置成
我们的responseDate的第0号元素
也就是我们的省
同理为了简便
我把它复制一份
还是
只不过现在我们获取的是city
我们把它置为我们返回数据的
第1号元素
接下来我们就处理完了xhr的
onredaystatechange
这样的一个回调方法
那么紧接着我们就要向服务器去
发送请求了
那么下面我们就要通过xhr.
open向服务器发送请求
我们发送请求是get请求
然后请求的地址是我们上面定义的url
好
然后xhr点
send这个send
现在我们什么值都不用搁
就一个null就可以了
因为我们如果用post请求的话
这块可以给我们post请求
代表这些后面跟的一些参数
而我们现在用get请求我们直接
拼到了url的后面
所以说这里就不用再做任何的改变了
好
那么我们回到我们的页面
刷新我们的页面
我们说一个区号0314
我们看到出现了一点点小问题
我们回到我们代码检查一下
大家可以看到是
status应该是等于两个等号
表示它等于200的时候返回
好
保存
重新刷新一下页面
输入0314
当它失去焦点的时候
大家可以看到我们0314
它没有正确获取到
我们首先先把我调试信息给删去
alert给删去
然后我们看一下url是不是正常的
发送给了我们的ajaxServlet
所以说我们在这里打印一下url
好
输入0314
当它失去焦点
大家可以看到我们的zipCode
是0314
就没有任何问题
那么再检查一下我们的后台
我们code这个c是给写成小写了
而我们传的时候是大写的 问题在这
我们再把我们调试信息给它注释掉
或者删除
我们重新刷新一下页面
输入区号0314
然后失去焦点的时候
大家可以看到这里就是河北
还有承德数据就过来了
我们之前还有的数据是0532
我们再试一下
输入0532
大家可以看到这里的省就是山东
市就是青岛
好
这就是使用ajax来获取省市信息
不刷新页面的一个实现
好
这一小点我们就介绍到这里
再见
-1.0 导学
--1.0.1 导学
-1.1 Web应用开发概述
--1.1.3 测试
-1.2 准备Java Web应用开发环境
--1.2.2 测试
-1.3 任务实现:Hello World Web项目
--1.3.2 测试
-1.4 小结
--1.4.1 小结
-本课程所有代码
--课程参考代码
-2.0 导学
--2.0.1 导学
-2.1 Servlet概述
--2.1.3 测试
-2.2 创建Servlet
--2,2,3 作业
-2.3 Servlet应用
--2.3.4 测试
-2.4 任务实现:某高校毕业生信息发布系统-注册与登录(Servlet版)
--2.4.3 测试
-2.5 ServletConfig接口
-2.6 ServletContext接口
-2.7 HttpServletRequest接口
--2.7.5 测验
-2.8 HttpServletResponse接口
--2.8.3 测试
-2.9 任务实现:某高校毕业生信息发布系统-简历添加
--2.9.1 任务实现:某高校毕业生信息发布系统-简历添加
-2.10 小结
-动画演示:Java Web应用服务器处理客户端请求的过程
-3.0 导学
--3.0.1 导学
-3.1 Cookie技术
--3.1.3 测试
-3.2 Session技术
--3.2.2 Session技术-Session技术应用购物车
--3.2.3 测试
-3.3 URL重写与隐藏表单域
--3.3.2 测试
-3.4 任务实现:某高校毕业生信息发布系统-简历修改
--3.4.1 任务实现:某高校毕业生信息发布系统-简历修改
-3.5 小结
--3.5.1 小结
-4.0 导学
-4.1 jsp概述
--4.1.2 测试
-4.2 脚本元素
--4.2.2 测试
-4.3 指令元素
--4.3.2 测试
-4.4 动作元素
--4.4.3 测试
-4.5 内置对象
--4.5.3 测试
-4.6 JavaBean
--4.6.3 测试
-4.7 任务实现:某高校毕业生信息发布系统-首页(JSP版)
--4.7.1 任务实现:某高校毕业生信息发布系统-首页(JSP版)
-4.8 小结
--4.8.1 小结
-5.0 导学
--5.0.2 测试
-5.1 el语法
--5.1.2 测试
-5.2 el隐含对象
--5.2.2 测试
-5.3 任务实现:某高校毕业生信息发布系统-学生详细信息展示
--5.3.1 任务实现:某高校毕业生信息发布系统-学生详细信息展示
--5.3.2 测试
-5.4 小结
--5.4.1 小结
-6.0 导学
--6.0.2 测试
-6.1 核心标签库
--6.1.5 测试
-6.2 任务实现:某高校毕业生信息发布系统-首页(JSTL版)
--6.2.1 任务实现:某高校毕业生信息发布系统-首页(JSTL版)
--6.2.2 测试
-6.3 小结
--6.3.1 小结
-7.0 导学
--7.0_导学
-7.1 过滤器
--7.1.3 测试
-7.2 监听器
--7.2.1.1与ServletContext相关的监听器
--7.2.4 测试
-7.3 任务实现:某高校毕业生信息发布系统-单态登录
--7.3.1 任务实现:某高校毕业生信息发布系统-单态登录
--7.3.2 测试
-7.4 小结
--7.4.1小结
-8.0 导学
--8.0_导学
-8.1 JDBC API
--8.1.2 测试
-8.2 JDBC API访问MySQL基本步骤
--8.2.2 测试
-8.3 任务实现:某高校毕业生信息发布系统-注册与登录
--8.3.1 任务实现:某高校毕业生信息发布系统-注册与登录(JDBC版)
--8.3.2 测试
-8.4 小结
--8.4.1小结
-9.0导学
--9.0导学
-9.1 技术准备
--9.1.5 测试.
-9.2 系统设计
-9.3 系统实现
-9.4 小结
--9.4.1小结



