文章目录：
2.AJAX - 创建 XMLHttpRequest 异步请求对象
5.AJAX - onreadystatechange 事件
1.什么是Ajax？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX不是新的编程语言，而是一种使用现有标准的新方法。
AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
AJAX = 异步 JavaScript 和 XML。
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX的工作原理如下图：👇👇👇
1.1 全局刷新
登录请求处理：index.jsp 发起登录请求--------LoginServlet--------result.jsp
发起请求 request 阶段：浏览器现在内存中是 index 页面的内容和数据：
服务器端应答结果阶段：sevlet 返回后把数据全部覆盖掉原来 index 页面内容， result.jsp 覆盖了全部的浏览器内存数据。整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等 。
全局刷新原理:
1) 必须由浏览器亲自向服务端发送请求协议包。2) 这个行为导致服务端直接将【响应包】发送到浏览器内存中
3) 这个行为导致浏览器内存中原有内容被覆盖掉
4) 这个行为导致浏览器在展示数据时候，只有响应数据可以展示
AJAX实现局部刷新的一种技术。浏览器在展示数据时，此时在窗口既可以看到本次的响应数据，同时又可以看到浏览器内存中原有数据。局部刷新原理:
1)不能由浏览器发送请求给服务端
2)浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
3) 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
4) 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有收到任何影响.
5) 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据
2.AJAX - 创建 XMLHttpRequest 异步请求对象
在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。全局刷新是同步行为，局部刷新是异步行为[浏览器数据没有全部更新]
这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest对象能够：
• 在不重新加载页面的情况下更新网页
• 在页面已加载后向服务器请求数据
• 在页面已加载后从服务器接收数据创建 XMLHttpRequest 对象的语法（xhr）：
var xmlhttp=new XMLHttpRequest();
AJAX中的核心对象就是 XMLHttpRequest。
3.AJAX - 向服务器发送请求请求
如需将请求发送到服务器，我们使用 XMLHttpRequest对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 |
描述 |
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。 · method：请求的类型；GET 或 POST · url：文件在服务器上的位置 · async：true（异步）或 false（同步） |
send(string) |
将请求发送到服务器。 · string：仅用于 POST 请求 |
异步 - True 或 False？
AJAX指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET","ajax_test.html",true);
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
· 在等待服务器响应时执行其他脚本
· 当响应就绪后对响应进行处理
4.AJAX - 服务器 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest对象的 responseText 或 responseXML 属性。
属性 |
描述 |
responseText |
获得字符串形式的响应数据。 |
responseXML |
获得 XML 形式的响应数据。 |
5.AJAX - onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触 onreadystatechange 事件。此事件可以指定一个处理函数 function。通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 |
描述 |
onreadystatechange |
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest() · 1: 服务器连接已建立，xmlHttp.open(请求方式，请求地址，true) · 2: 请求已接收，xmlHttp.send() · 3: 请求处理中，从服务端返回数据。XMLHttpRequest 内部处理 · 4: 请求已完成，且响应已就绪，此时才可以读取数据 |
status |
200: "OK" |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
6.AJAX的第一个例子（接收参数并计算bmi指数）
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency>
6.2 写一个Servlet接收并处理请求
package com.songzihao.controller; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * */ public class BmiServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("===接收了ajax的请求==="); //接收请求参数 String strName=request.getParameter("name"); String strW=request.getParameter("w"); String strH=request.getParameter("h"); //String转为Float Float w=Float.valueOf(strW); Float h=Float.valueOf(strH); //计算bmi Float bmi=w/(h*h); String info=""; if (bmi<18.5) { info="比较瘦"; }else if (bmi>=18.5 && bmi<24) { info="正常范围"; }else { info="比较胖"; } info=strName + "先生|女士，您的bmi是[" + bmi + "]，" + info; //使用HttpServletResponse对象输出数据，响应请求 response.setContentType("text/html;charset=utf-8"); PrintWriter pw=response.getWriter(); pw.println(info); pw.flush();//清空缓存 pw.close();//关闭 } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0"> <servlet> <servlet-name>BmiServlet</servlet-name> <servlet-class>com.songzihao.controller.BmiServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>BmiServlet</servlet-name> <url-pattern>/bmiServlet</url-pattern> </servlet-mapping> </web-app>
<%@ page contentType="text/html;charset=utf-8" language="java" %> <html> <head> <title>使用ajax计算bmi</title> <script type="text/javascript"> function doAjax() { alert("button click"); //使用XMLHttpRequest做ajax局部刷新 //1.创建异步对象 var xhr=new XMLHttpRequest(); //2.绑定事件 xhr.onreadystatechange = function () { console.log("===onreadystatechange===,属性readyState=" + xhr.readyState + ",status=" + xhr.status); if (xhr.readyState==4 && xhr.status==200) { //开发人员处理服务器返回的数据，更新dom对象 var data=xhr.responseText; document.getElementById("mydiv").innerHTML=data; } } //3.初始请求的参数 var pname=document.getElementById("name").value; var pw=document.getElementById("w").value; var ph=document.getElementById("h").value; var param="bmiServlet?name=" + pname + "&w=" + pw + "&h=" + ph; xhr.open("get",param,true); //4.发起请求 xhr.send(); } </script> </head> <body> <div align="center"> <p>ajax请求和form无关，有无form都可以</p> <table> <tr> <td>姓名：</td> <td><input type="text" id="name"></td> </tr> <tr> <td>体重：</td> <td><input type="text" id="w"></td> </tr> <tr> <td>身高：</td> <td><input type="text" id="h"></td> </tr> <tr> <td>操作：</td> <td><input type="button" value="ajax请求" onclick="doAjax()"></td> </tr> </table> <br/><br/> <div id="mydiv"> 等待更新数据 </div> </div> </body> </html>
