Java Web基础：第二十讲 Ajax概述

最新推荐文章于 2025-08-08 15:43:57 发布

老李-大连

最新推荐文章于 2025-08-08 15:43:57 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax java xmlhttprequest web javascript 服务器

本文链接：https://blog.youkuaiyun.com/JavaEETeacher/article/details/6483657

本文介绍了AJAX技术的基础概念，详细阐述了其核心组件XMLHttpRequest的工作流程，并解释了AJAX如何改变传统的客户端与服务器交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文内容摘自：《Java Web开发教程——入门与提高篇（JSP+Servlet）》

AJAX 是Asynchronous JavaScript and XML 的缩写，涉及JavaScript 脚本、XHTML 和CSS 、DOM 、XML 和XSTL 等技术。

l XHTML 与CSS 实现数据信息的统一化和标准化显示；

l 使用DOM 实现浏览器端丰富的动态显示效果以及与服务器的交互；

l 使用XML 和XSTL 进行浏览器和服务器端数据信息交换和处理；

l 使用XMLHttpRequest 对象进行浏览器和服务器端异步数据读取；

l 使用JavaScript 脚本实现对所有数据进一步处理。

AJAX 的核心工作过程如下：

1. 对象初始化，主要是创建XMLHttpRequest 对象，XMLHttpRequest 对象是AJAX 技术中非常核心的一个对象，负责请求的设置、发送。

2. 发送请求，设置响应方法、请求所需要的数据，然后发送请求。

3. 服务器接收请求并进行处理，通常由Servlet 接收请求，然后调用相应的业务方法来处理，之后对用户响应。

4. 客户端接响应，接收到响应之后调用之前设置的响应方法。

5. 响应方法根据响应数据修改客户端页面内容。

采用AJAX 技术之后，客户端与服务器端的交互过程发送了变化。在没有采用AJAX 技术之前，用户通过设置<form> 表单的action 属性，然后通过提交按钮来提交请求，或者在JavaScript 代码中通过表单的submit 方法来提交。AJAX 基本上就是在Web 表单和服务器之间增加了 JavaScript 技术和 XMLHttpRequest 对象。当用户填写表单时，数据发送给一些 JavaScript 代码然后通过XMLHttpRequest 对象发送，而不是直接发送给服务器。在这个过程中，用户屏幕上的表单不会闪烁、消失或延迟。JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后，服务器将数据返回，会调用请求时候定义的接收方法，该方法对这些数据进行处理，可以更新表单数据，让人感觉应用程序是在本地执行的，表单没有提交，页面只是局部刷新。响应代码还可以对接收到的数据执行某种计算，或者再次发送请求。

处理代码主要采用JavaScript 技术，而与服务器的交互主要是通过XMLHttpRequest 对象完成的。

XMLHttpRequest 对象的属性以及作用如表4.2 所示。

表4.2 XMLHttpRequest 属性

属性	作用
Onreadystatechange	状态改变的事件触发器
readyState	对象状态 0 表示未初始化 1 表示读取中 2 表示已读取 3 表示交互中 4 表示完成
responseText	服务器进程返回数据的文本，表示为一个字符串
responseXML	服务器进程返回数据的兼容DOM 的XML 文档对象
Status	服务器返回的状态码，如：404 （文件未找到）。200 （成功）。
statusText	服务器返回的状态文本信息（OK 或者Not Found 等）

XMLHttpRequest 对象的主要方法及作用如表4.3 所示。

表4.3 XMLHttpRequest 对象的方法

方法	功能
abort()	停止当前请求
getAllResponseHeaders()	把HTTP 请求的所有响应首部作为键/ 值对返回
getResponseHeader(“headerLabel”)	返回指定首部的字符串的值
open(“method”,”URL””[,asyncFlag[,”username”[,”password”]]]	连接对服务器的访问。其中method 参数可以使用GET 、POST 及PUT ，URL 参数既可以使用绝对地址，也可以使用相对地址，asyncFlag 参数用于指定在进行调用时是采用同步方式还是异步方式，默认值是true ，即采用异步方式。如果参数值为false ，则采用同步方式实现和服务器的交互，即等待服务器返回响应，username 指定连接时候的用户名，password 指出密码。
send(content)	向服务器发送请求，可以使用的参数包括DOM 对象、字符串等等。
setRequestHeader(“label”, “value”)	设置header 并和请求一起发送，即指定首部设置为提供的值，注意在设置首部前必须先使用open() 方法。第一个参数为首部的名称，第二个参数为首部中的值。