1. 概述
AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
我们先来说概念中的JavaScript 和 XML
-
JavaScript 表明该技术和前端相关； -
XML 是指以此进行数据交换。
1.1 作用
AJAX 作用有以下两方面：
- 与服务器进行数据交换：通过 AJAX 可以给服务器发送请求，服务器将数据直接响应回给浏览器。如下图
我们先来看之前做功能的流程，如下图：
如上图，Servlet 调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式 和 JSTL 标签库进行数据的展示。
而我们学习了 AJAX 后，就可以使用 AJAX 和服务器进行通信，以达到使用 HTML AJAX 来替换 JSP 页面了。如下图，浏览器发送请求 servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…
上图所示的效果我们经常见到，在我们输入一些关键字（例如 奥运）后就会在下面联想出相关的内容，而联想出来的这部分数据肯定是存储在百度的服务器上，而我们并没有看出页面重新刷新，这就是 更新局部页面 的效果。再如下图：
我们在用户名的输入框输入用户名，当输入框一失去焦点，如果用户名已经被占用就会在下方展示提示的信息；在这整个过程中也没有页面的刷新，只是在局部展示出了提示信息，这就是 更新局部页面 的效果。
1.2 同步和异步
知道了局部刷新后，接下来我们再聊聊同步和异步:
- 同步发送请求过程如下
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
- 异步发送请求过程如下
浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。
2. 快速入门
2.1 服务端实现
在项目的创建com.north.web.servlet ，并在该包下创建名为 AjaxServlet 的 servlet
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 响应数据
response.getWriter().write("hello ajax~");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}2.2 客户端实现
在webapp 下创建名为 01-ajax-demo1.html 的页面，在该页面书写 ajax 代码
创建核心对象，不同的浏览器创建的对象是不同的
代码语言：javascript复制 var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}发送请求
代码语言：javascript复制//建立连接
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//发送请求
xhttp.send();获取响应
代码语言：javascript复制xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 通过 this.responseText 可以获取到服务端响应的数据
alert(this.responseText);
}
};完整代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<script>
//1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} //2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
xhttp.send(); //3. 获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
</body>
</html>2.3 测试
在浏览器地址栏输入http://localhost:8080/ajax-demo/01-ajax-demo1.html ，在 01-ajax-demo1.html 加载的时候就会发送 ajax 请求，效果如下
我们可以通过开发者模式 查看发送的 AJAX 请求。在浏览器上按 F12 快捷键
