什么是AJAX
Ajax 是Asynchronous JavaScript And XML（异步的JavaScript 和 XML）。Ajax不是一种新技术，它的特点是：在不重新加载整个页面的情况下，于服务器交换数据并实现页面的局部刷新。
AJAX使用流程
-
创建XMLHttpRequest对象
-
向服务器发送ajax请求
-
处理服务器响应（服务器处理完请求并返回响应数据后，通过JavaScript对响应数据进行后续处理）
AJAX 实例
@WebServlet("/content") //@WebServlet注解相当于web.xml文件
public class IndexServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置Content-Type内容类型
response.setContentType("text/html; charset=UTF-8");
//浏览器打印输出
response.getWriter().println("<h1>发送Ajax请求后的响应数据!</h1>");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="divContent">使用Ajax修改文件内容</div>
<br>
<button id="btn" type="button">修改</button>
<script>
document.getElementById("btn").onclick = function() {
/* 1. 创建XmlHttpRequest对象 */
var xmlhttp;
if (window.XMLHttpRequest) {
//新版浏览器执行的代码
xmlhttp = new XMLHttpRequest();
} else {
//旧版IE浏览器执行的代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/* 2. 向服务器发送ajax请求 */
//创建http请求
xmlhttp.open("GET", "/content", true);
//发送请求到服务器
xmlhttp.send();
/* 3. 处理服务器响应 */
//监听ajax执行过程，捕捉ajax执行状态（这是ajax的核心事件，当ajax的状态发生变化时，就会触发这个时间）
xmlhttp.onreadystatechange = function(){
//请求被成功处理并且响应已被接收时执行
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//获取响应体的文本
var responseText = xmlhttp.responseText;
//对服务器响应结果进行后续渲染处理
document.getElementById("divContent").innerHTML = responseText;
}
};
};
</script>
</body>
</html>
AJAX 实例解析
创建XMLHttpRequest对象：
- XMLHttpRequest对象用于 在后台与服务器交换数据。这就是ajax可以在不刷新整个网页的情况下，向服务器获取数据对网页进行局部刷新。
向服务器发送ajax请求：
获取服务器响应数据：
服务器处理完ajax请求后，返回的响应数据，可以通过XMLHttpRequest对象的 responseText 或responseXML 属性
| 属性 | 描述 |
|---|---|
| responseText | 获取 字符串 形式的响应数据 |
| responseXML | 获取 XML 形式的响应数据 |
onreadystatechange事件：
XMLHttpRequest对象有三个重要属性
每当 readyState 改变时，就会触发 onreadystatechange 事件。onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。