JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求

JavaWeb 应用设计及实战目录

实例链接点我

任务1 使用原生 JavaScript 发送 Ajax 请求

6.1.1 认识 Ajax

6.1.2 认识 XMLHttpRequest

1.创建 XMLHttpRequest 对象

.2. XMLHttprequest 对象的常用属性和方法

6.1.3 发送 Ajax GET 请求并处理响应

6.1.4 发送 Ajax POST 请求并处理响应

任务1 使用原生 JavaScript 发送 Ajax 请求

随着互联网的广泛应用，基于 B/S 架构的 Web 应用程序越来越受到推崇。但不可

否认的是，B/S 架构的应用程序在界面效果及操控性方面比 C/S 架构的应用程序差很多，

这也是 Web 应用程序普遍存在的一个问题。

在传统的 Web 应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是

要等待服务器的响应。如果前一个请求没有得到响应，则后一个请求就不能发送。由于这

是一种独占式的请求，因此如果服务器响应没有结束，用户就只能等待或者不断的刷新页

面。在等待期间，由于新的页面没有生成，整个浏览器将是一片空白，而用户只能继续等待。

对用户而言，只是一种不连续的体验，同时，频繁地刷新页面也会使服务器的负担加重。

Ajax 技术正式为了弥补以上不足而诞生的。Ajax 应用使用 JavaScript 异步发送请求，

不用每次请求都重新加载页面，发送请求时可以继续其他的操作，在服务器响应完成后，

再使用 JavaScript 将响应展示给用户。

使用 Ajax 技术，从用户发送请求到获得响应，当前用户界面在整个过程中不会受到

干扰。我们在必要的时候可以只更新页面的一小部分，而不用刷新整个页面，即“”无刷新“”

技术。如图 6.1 所示，搜狐网首页上的登录功能就使用了 Ajax 技术。输入登录信息单击

“登录“按钮后，只是刷新登录区域的内容。因为首页上的信息很多，这就避免出现重复

加载、浪费网络资源的现象，提高了加载速度。也是无刷新技术的第一个优势。

图6.1 使用 Ajax 刷新局部页面图 6.2 Google 地图类似桌面程序的用户体验

再以土豆网为例，在观看视频的时候，我们可以在页面上单击其他按钮执行操作。

由于只是局部刷新，视频可以继续播放，不会受到影响。这体现了无刷新技术的第二个

优势：提供连续的用户体验，而不被页面刷新中断。

最后看一下 Goole 地图的例子。由于采用了无刷新技术，我们可以实现一些以前

B/S 程序很难做到的事情，即图 6.2 中 Goole 地图提供的拖动、放大、缩小等操作、

Ajax 强调的是异步发送用户请求，在一个请求的服务器响应还没返回时，可以再次发

送请求。这种发送请求的模式可以使用户获得类似桌面程序的用户体验。

思考

问题：传统的 Web 开发技术和 Ajax 技术有什么区别？

解答：无论使用哪种开发技术，流程都是先由客户发送 HTTP 请求，然

后由服务器对请求生成响应。但传统的 Web 开发技术和 Ajax 技术之间还

是存在很多差异的。

差异1：发送请求方式不同。

传统 Web 应用通过浏览器发送请求，而 Ajax 技术则是通过 JavaScript 的

XMLHttpRequest 对象发送请求。

差异2：服务器响应不同。

针对传统 Web 应用，服务器的响应时一个完整的页面，而采用 Ajax 技术后，

服务器的响应只是需要的数据。

差异3：客户端处理的响应方式不同。、

传统的 Web 应用发送请求后，浏览器将等待服务器响应完成后重新加载整

个页面。而采用 Ajax 技术后，浏览器不再专门等待请求的响应，而只是通过

JavaScript 动态更新页面中需要更新的部分。

图 6.2 Google 地图类似桌面程序的用户体验

6.1.1 认识 Ajax

从前面的介绍中我们已经知道，使用 Ajax 技术可以通过 JavaScript 发送请求到服

务器，在服务器响应结束后，根据返回结果可以只更新局部页面，以提供连续的客户体

验，那么什么是 Ajax 呢？

Ajax (Asynchonous JavaScript and XML)并不是一种全新的技术，而是由JavaScript 、

XML、CSS等几种现有技术整合而成。 Ajax 的执行流程是先由用户界面触发事件调用

JavaScript，通过 Ajax 引擎———XMLHttpRequest 对象异步发送请求到服务器，服务器

返回XML、JSON 或 HTML 等格式的数据，然后利用返回的数据使用 DOM 和 CSS 技术

局部更新用户界面。整个工作流程如图 6.3 所示、

通过图 6.3 可以发现，Ajax 技术包括以下关键内容。

1）JavaScript 语言： Ajax 技术的主要开发语言。

2) XML/JSON/HTML 等：用来封装请求或响应的数据格式。

图 6.3 Ajax 工作流程

3）DOM (文档对象模型)：通过 DOM 属性或方法修改页面元素，实现页面局

部刷新。

4） CSS:改变样式，美化页面效果，提升用户体验。

5）Ajax 引擎：即 XMLHttpRequest 对象，以异步方式在客户端与服务器端之间

传递数据。

通过上面的介绍，相信大家都已经看出来了，Ajax 涉及的大多技术之前都已经使用

过了，没接触过的只有 XMLHttpRequest 和 JSON 格式。下面我们先来认识

XMLHttpRequest 及其常用方法和属性。

6.1.2 认识 XMLHttpRequest

XMLHttpRequest 对象可以在不刷新当前页面的情况下向服务器发送异步请

求，并接收服务器端的响应结果，从而实现局部更新当前页面的功能。尽管名为

XMLHttpRequest ,但它并不限于和 XML 文档一起使用，它还可以接收 JSON 或

HTML 等格式的文档数据。XMLHttpRequest 得到了目前所有浏览器较好的支持，但它的

创建方式在不同浏览器下有一定的差别。

1.创建 XMLHttpRequest 对象

在老版本的 IE 浏览器（IE5 和 IE6）中创建 XMLHttpRequest 对象的方式与较新版

本的 IE(IE 7 及以上) 及其他大部分浏览器中的创建方式是不同的。为了使程序兼容性

更好，就需要了解它们的语法区别。

语法

老版本 (IE5 和 IE6)。

XMLHttpRequest = newActiveXobject("Microsoft.XMLHTTP");

新版本 IE 和其他大部分浏览器（推荐使用）。

XMLHttpRequest =  new XMLHttpRequest();

.2. XMLHttprequest 对象的常用属性和方法

对 Ajax 技术而言，主要就是 XMLHttpRequest 的使用。XMLHttpRequest 的常用方

法和属性如表 6-1 和表 6-2 所示。

表6-1 XMLHttpRequest 的常用方法

方法名称	说明
open(String method,String url,boolean async,String user,String password)	用于创建一个新的 Http 请求参数 method: 设置 HTTP 请求的方法，如 POST、GET 等，对大小写不敏感参数 url: 请求的 URL 地址参数 async: 可选，指定此请求是否为异步方法，默认为 true 参数 user :可选，如果服务器需要验证，此处需要指定用户名：否则，会弹出验证窗口参数 password：可选，验证信息中的密码，如果用户名为空，此值将会被忽略
send(String data)	发送请求到服务器端参数 data ：字符串类型，表示通过此请求发送的数据。此参数值取决于 open 方法中的 method 参数。如果 method 值为 “POST”,可以指定该参数中的 method 参数。如果 method 值为“POST”,可以指定该参数。如果 method 值为 “GET”,该参数为 null
abort()	取消当前请求
setRequestHeader(String header,String value)	单独设置请求的某个 HTTP 头信息参数 header: 要指定的 HTTP头名称参数 value: 要指定的HTTP 头名称对应的值
getReponseHeader(String header)	从响应中获取指定的 HTTP 头信息参数 header:要获取的指定 HTTP 头
getAllResponseHeaders()	获取响应的所有 HTTP 头信息

表 6-2 XMLHttpRequest 的常用属性
属性名称	说明
onreadystatechange	设置回调函数
readyState	返回请求的当前状态常用值 0——未初始化 1——开始发送请求 2——请求发送完成 3——开始读取响应 4——读取响应结束
status	返回当前请求的 HTTP 状态码常用值 200——正确返回 404——找不到访问对象
statusText	返回当前请求的响应行状态
responseText	以文本形式获取响应值
responseXML	以XML 形式获取响应值，并且解析成DOM 对象返回

了解XMLHttpRequest 常用属性请扫描二维码。

图……

提示

由于 XMLHttpRequest 的属性和方法内容较多，记住常用的属性和方法即可，

其他参数可在需要时再查阅相关资料。

了解了 XMLHttpRequest 的方法和属性后，下面一起来学习如何使用

XMLHttpRequest 实现 Ajax.

实现 Ajax 的过程分为发生请求和处理响应两个步骤，发送请求有两种

方式，即 GET 方式和 POST 方式；处理响应也有两种方式，即处理文本

响应和处理 XML 响应，下面以处理文本响应为例进行讲解。

6.1.3 发送 Ajax GET 请求并处理响应

思考

使用 Ajax 技术实现下列功能：

在用户名验证页面，当“用户名”文本框失去焦点时，发送请求到服务器，判

断用户名是否存在。若已存在则提示“用户名已被使用”，如图6.4 所示，若不存在

则提示“用户名可以使用”，如图 6-5 所示。在完成这个功能的过程中页面不会刷新。

分析

（1）使用文本框的 onBlur 事件实现当文本框失去焦点时调用检查用户名是否

存在的 JavaScript 方法。

（2）在该方法中创建 XMLHttpRequest 对象，发送异步请求到服务器进行用

户名验证操作。

使用 XMLHttpRequest 对象发送 GET 请求到服务器端，并处理文本方式响应，需

要通过以下4个步骤来实现。

（1）创建 XMLHttpRequest 对象。通过 window.XMLHttpRequest 的返回值判断

创建 XMLHttpRequest 对象的方式。

（2）设置回调函数。通过 onreadystatechange 属性设置回调函数，其中回调‘函数

需要自定义。

（3）初始化 XMLHttpRequest 对象。通过 open()方法设置请求的发送方式和路径。

（4）发送请求。

以上步骤的关键代码如实列1所示：

实列1’

//1.创建 XMLHttpRequest 对象
if(window.XMLHttpRequest){//返回值为 true 说明是新版本 IE 或其他浏览器xmlHttpRequest = new XMLHttpRequest();
}else{//返回值为 false 说明是老版本 IE 浏览器 （IE 5 和 IE 6）xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"):
}//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBlck://3.初始化 XMLHttpRequest 组件
var url = "userServlet?name ="+name;//服务器端 URL 地址，name 为从“用户名”文本框获取的值
xmlHttpRequest.open(“GET”,url,true);
//4.发送请求
xmlHttpRequest.send(null)://在回调函数 callBack() 中处理服务器响应的关键代码
function callBack(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){var data = xmlHttpRequest.responseText:if(data == "true"){$("#nameDiv").html("用户名已被使用！")：//nameDiv 为显示消息的 div 的 idelse{$("#nameDiv").html("用户名可以使用！")；}}
}

执行检查功能的 Servlet 代码如下。

public class UserServlet extends HttpServlet{public void doGet(HttpServletRequest request ,HttpServletResponse response)throws ServletException,IOException{String name = request.getParaneter("name");boolean used = false;if("ajax".equals(name))used = true;}else{used = true:}else{used = true:}reponse.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();out.print(used);out.flush();out.close();}public void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{request.setCharacterEncoding("UTF-8");this.doGet(request,response);}
}

步骤一，通过 window.XMLHttpRequest 的返回值判断当前浏览器以确定创建

XMLHttpRequest 对象的方式。如果为 true ,说明是新版本 IE 或其他浏览器，可以

使用“new XMLHttpRequest()” 的方式创建 XMLHttpRequest 对象：如果为 false ,说明

是老版本 IE 浏览器（IE 5 和 IE 6）,需要使用"new ActiveXObject("Microsoft.XMLHTTP")"

的方式创建 XMLHttpRequest 对象。

步骤二，通过 XMLHttpRequest 对象的 onreadystatechange 属性设置回调函数，监听

服务器的响应状态并进行相应处理。

步骤三，通过 XMLHttpRequest 对象的 open()方法，传入参数完成初始化

XMLHttpRequest 对象的工作。其中，第一个参数为 HTTP 请求方式，这里选择发送

HTTP GET 请求。第二个参数为要发送的 URL 请求路径，因为采用 GET 方式发送请求，

使用需要将要发送的数据附加到 URL 路径后。

步骤四，调用 XMLHttpRequest 对象的 send() 方法，参数为要发送到服务器端的数据，

因为采用 “GET” 方式发送请求时，参数只能附加到 URL 路径后，所以这里直接设为

null 即可。需要提醒的是，如果 send() 方法不设置参数值，在不同的浏览器下可能存在

兼容性问题。列如，在 IE 中能够正常运行，但在 Firefox 中却不能。所以，建议最好设

为 null .

执行完步骤四，这个异步请求的发送过程就结束了，但是如何知道这个请求是否

发送成功，服务器是否成功返回数据，则需要在步骤二设置的回调函数中判断。在回调

函数中，使用 XMLHttpRequest 对象的 readyState 属性判断当前请求的状态，使用status

属性判断当前请求的 HTTP 状态码。当请求状态为 “4”，同时 HTTP 状态码为 "200“

时，表示成功接收都到服务器端发送的数据。这时就可以使用 XMLHttpRequest 对象的

responseText 属性去获取服务器端返回的文本格式数据。

以上就是实现 GET 方式发送请求及处理文本方式响应的全部过程，下面我们来看

一下使用 POST 方式发送请求由何不同。

6.1.4 发送 Ajax POST 请求并处理响应

刚才实现了 GET 方式发送请求及处理文本方式响应，接下来我们来看一下 POST

方式的实现。实际上 POST 方式的实现跟 GET 方式类似，基本步骤相同，关键代码

如示例 2 所示。

示例2

//1.创建 XMLHttpRequest 对象
if(window.XMLHttpRequest){//返回值为 true 说明是新版本 IE 或其他浏览器xmlHttpRequest = new XMLHttpRequest();
}else{//返回值为 false 说明是老版本 IE 浏览器 （包括 IE 5 和 IE 6）xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBack;//3.初始化 XMLHttpRequest 对象
var url= "userServlet";//服务器端 URL 地址
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-222-form-urlencoded");
//4.发送请求
var data = "name="+name://需要发送的数据信息，name 为从 “用户名” 文本框获取的值
xmlHttpRequest.send(data);
//在回调函数 callBack 中处理服务器响应的关键代码
function callBack(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){var data = xmlHttpRequest.responseText;//省略将服务器返回的文本数据显示到页面的代码}
}

对此使用 Ajax 发送 GET 请求与发送 POST 请求的关键代码，可以发现它们不同

之处主要在步骤三和步骤四中，如表 6-3 所示。

表 6-3 使用GET 与 POST 方式实现 Ajax 的区别
发送方式	步骤三：初始化XMLHttpRequest 对象	步骤四：发送请求
GET	指定 XMLHttpRequest 对象的 open() 方法中的 method 参数为 "GET"	指定 XMLHttpRequest 对象的 send() 方法中的data 参数为“null”
POST	(1)指定 XMLHttpRequest 对象的 post() 方法中的 method 参数为 “POST” (2)指定 XMLHttpRequest 对象要请求的 HTTP 头信息，该 HTTP 请求头信息为固定写法	可以指定 XMLHttpRequest 对象的 send() 方发中的 data 参数的值，即该请求需要携带的具体数据。多个键/值对使用“&”连接

需要主要的是，采用 GET 方式发生请求时，通常会将需要携带的参数附加在 URL

路径后一起发送， xmlHttpRequest.send() 方法不能传递参数，data 参数设置为 null 即

可：而采用 POST 方式发送请求时，则可以在 xmlHttpRequest.send() 方法中指定传递的

参数值。

上机练习1——实现检查注册用户的邮箱是否存在

需求说明

（1）在用户注册页面（如图 6.6 所示），当 "注册邮

箱" 文本框失去焦点时，发送请求到服务器，判断用户的

注册邮箱是否存在。如果已经存在则提示 “该邮箱已

被注册”。

（2）分别使用 GET、POST 两种方式发送请求。

任务1 使用原生 JavaScript 发送 Ajax 请求

6.1.1 认识 Ajax

6.1.2 认识 XMLHttpRequest

1.创建 XMLHttpRequest 对象

.2. XMLHttprequest 对象的常用属性和方法

6.1.3 发送 Ajax GET 请求并处理响应

6.1.4 发送 Ajax POST 请求并处理响应