当前课程知识点:Web后端开发技术 >  第9章 某高校毕业生信息发布系统开发 >  9.1 技术准备 >  9.1.2技术准备-Ajax技术

返回《Web后端开发技术》慕课在线视频课程列表

9.1.2技术准备-Ajax技术在线视频

下一节:9.1.3技术准备-jQuery对Ajax的实现

返回《Web后端开发技术》慕课在线视频列表

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来获取省市信息

不刷新页面的一个实现

这一小点我们就介绍到这里

再见

Web后端开发技术课程列表:

第1章 Java Web开发准备

-1.0 导学

--1.0.1 导学

-1.1 Web应用开发概述

--1.1.1 Web应用简介

--1.1.2 Web开发技术

--1.1.3 测试

-1.2 准备Java Web应用开发环境

--1.2.1 准备Java Web应用开发环境

--1.2.2 测试

--1.2.3 谈谈JavaWeb优势和学习方法

-1.3 任务实现:Hello World Web项目

--1.3.1 Hello World Web项目

--1.3.2 测试

-1.4 小结

--1.4.1 小结

-本课程所有代码

--课程参考代码

第2章 Servlet技术基础

-2.0 导学

--2.0.1 导学

-2.1 Servlet概述

--2.1.1 Servlet简介

--2.1.2 Servlet API

--2.1.3 测试

-2.2 创建Servlet

--2.2.1 Hello Servlet

--2.2.2 Servlet配置

--2,2,3 作业

-2.3 Servlet应用

--2.3.1 处理超链接请求

--2.3.2 处理form表单请求

--2.3.3 处理结果

--2.3.4 测试

-2.4 任务实现:某高校毕业生信息发布系统-注册与登录(Servlet版)

--2.4.1 注册代码实现

--2.4.2 登录代码实现

--2.4.3 测试

--2.4.4谈一谈jQuery前端开发框架

-2.5 ServletConfig接口

--2.5.1 ServletConfig接口

-2.6 ServletContext接口

--2.6.1 ServletContext接口

-2.7 HttpServletRequest接口

--2.7.1 获取请求报文信息

--2.7.2 上传照片

--2.7.3 获取网络连接信息

--2.7.4 存取请求域属性

--2.7.5 测验

--2.7.6 在请求转发和重定向过程中传递数据

-2.8 HttpServletResponse接口

--2.8.1 HttpServletResponse接口

--2.8.2 输出服务器端图片

--2.8.3 测试

-2.9 任务实现:某高校毕业生信息发布系统-简历添加

--2.9.1 任务实现:某高校毕业生信息发布系统-简历添加

-2.10 小结

--2.10.1 小结

-动画演示:Java Web应用服务器处理客户端请求的过程

--Java Web应用服务器处理客户端请求的过程

第3章 会话跟踪

-3.0 导学

--3.0.1 导学

-3.1 Cookie技术

--3.1.1 Cookie技术概述

--3.1.2 Cookie技术应用-自动登录

--3.1.3 测试

-3.2 Session技术

--3.2.1 Session技术概述

--3.2.2 Session技术-Session技术应用购物车

--3.2.3 测试

-3.3 URL重写与隐藏表单域

--3.3.1 URL重写技术与隐藏表单域

--3.3.2 测试

-3.4 任务实现:某高校毕业生信息发布系统-简历修改

--3.4.1 任务实现:某高校毕业生信息发布系统-简历修改

--3.4.2 讨论会话跟踪技术的应用场景

-3.5 小结

--3.5.1 小结

第4章 JSP基础

-4.0 导学

--4.0.1 JSP导学

-4.1 jsp概述

--4.1.1 JSP概述

--4.1.2 测试

-4.2 脚本元素

--4.2.1 脚本元素

--4.2.2 测试

-4.3 指令元素

--4.3.1 指令元素

--4.3.2 测试

-4.4 动作元素

--4.4.1 动作元素

--4.4.3 测试

-4.5 内置对象

--4.5.1 内置对象(1)

--4.5.2 内置对象(2)

--4.5.3 测试

-4.6 JavaBean

--4.6.1 JavaBean概述

--4.6.2 分步注册

--4.6.3 测试

-4.7 任务实现:某高校毕业生信息发布系统-首页(JSP版)

--4.7.1 任务实现:某高校毕业生信息发布系统-首页(JSP版)

--4.7.2 在JSP页面显示内容的都有哪些方法

-4.8 小结

--4.8.1 小结

第5章 表达式语言

-5.0 导学

--5.0.1 表达式语言

--5.0.2 测试

-5.1 el语法

--5.1.1 EL语法

--5.1.2 测试

-5.2 el隐含对象

--5.2.1 EL隐含对象

--5.2.2 测试

-5.3 任务实现:某高校毕业生信息发布系统-学生详细信息展示

--5.3.1 任务实现:某高校毕业生信息发布系统-学生详细信息展示

--5.3.2 测试

-5.4 小结

--5.4.1 小结

--5.4.2 讨论el表达式的优势

第6章 标准标签库

-6.0 导学

--6.0.1 标准标签库

--6.0.2 测试

-6.1 核心标签库

--6.1.1 通用标签

--6.1.2 条件标签

--6.1.3 迭代标签

--6.1.4 URL标签

--6.1.5 测试

-6.2 任务实现:某高校毕业生信息发布系统-首页(JSTL版)

--6.2.1 任务实现:某高校毕业生信息发布系统-首页(JSTL版)

--6.2.2 测试

-6.3 小结

--6.3.1 小结

--6.3.2 讨论如何实现自定义标签

第7章 Filter和Listener

-7.0 导学

--7.0_导学

-7.1 过滤器

--7.1.1过滤器(1)

--7.1.2过滤器(2)

--7.1.3 测试

-7.2 监听器

--7.2.1.1与ServletContext相关的监听器

--7.2.1.2示例:访问网站计数功能

--7.2.2.1与Session相关的监听器

--7.2.2.2示例:显示在线用户名称

--7.2.3.1与Request相关的监听器

--7.2.3.2示例:实时显示访问网站用户信息示例

--7.2.4 测试

-7.3 任务实现:某高校毕业生信息发布系统-单态登录

--7.3.1 任务实现:某高校毕业生信息发布系统-单态登录

--7.3.2 测试

-7.4 小结

--7.4.1小结

--7.4.2讨论filter和listener使用场景

第8章 JDBC

-8.0 导学

--8.0_导学

-8.1 JDBC API

--8.1.1 JDBC API

--8.1.2 测试

-8.2 JDBC API访问MySQL基本步骤

--8.2.1 JDBC API

--8.2.2 测试

-8.3 任务实现:某高校毕业生信息发布系统-注册与登录

--8.3.1 任务实现:某高校毕业生信息发布系统-注册与登录(JDBC版)

--8.3.2 测试

-8.4 小结

--8.4.1小结

--8.4.2 讨论JDBC工具类

第9章 某高校毕业生信息发布系统开发

-9.0导学

--9.0导学

-9.1 技术准备

--9.1.1技术准备-MVC模式

--9.1.2技术准备-Ajax技术

--9.1.3技术准备-jQuery对Ajax的实现

--9.1.4_技术准备- JDBC工具类

--9.1.5 测试.

-9.2 系统设计

--9.2系统设计:某高校毕业生信息发布系统开发

-9.3 系统实现

--9.3.1完善登陆和注册功能

--9.3.2完善简历添加功能

--9.3.3完善简历修改功能

--9.3.4.1首页分页显示

--9.3.4.2首页分页显示

-9.4 小结

--9.4.1小结

--9.4.2讨论:分页组件

9.1.2技术准备-Ajax技术笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。