Ajax 技术在 JavaWeb 应用中随处可见，比如购物车中根据商品数量及时更新等应用，那么我们今天就来说说 Ajax 的一些小应用！
Ajax 技术也就是允许浏览器与服务器通信而无需刷新当前页面，数据在客户端和服务端独立传输，而不是以前客户端向服务端发送一个请求，服务器返回整个页面，如此反复。完成 Ajax 请求就需要使用 XMLHttpRequest 类的方法，下面我们先开始介绍 XMLHttpReqest 的 API
一、XMLHttpRequest API
1.1 XMLHttpRequest 方法
1. open("method", "url") -- -- 建立对服务器的调用，Method 参数可以是 get，也可以是 post，url 可以是相对的也可以是绝对的（准备发送请求）
2. send("content") -- -- 向服务器发送请求（发送的内容）
3. setRequestHeader(“header”, "value") -- -- 把指定的首部设置为所提供的值，在设置任何首部之前必须先调用 open() 方法
1.2 XMLHttpRequest 属性
1. OnReadystateChange -- -- 每个状态改变都会触发这个时间处理器，通常是 JS 函数（改事件由服务器触发）
1.2.1 Ajax 执行过程中，服务器会通知客户端当前的通信状态，依靠 readyState 属性实现，改变 readryState 属性是服务器对客户端连接操作的一种方式，每次 readyState 属性改变都会触发 onReadyStateChange 事件
2. readyState -- -- 请求的状态，有 5 个可取值 0（未初始化）， 1（正在加载）， 2（已经加载）， 3（交互中）， 4（已经完成）
3. responseText -- -- 服务器的响应，表示为一个串
4. responseXML -- -- 服务器的响应，表示为XML 可以解析为 DOM 对象
5. status -- -- 服务器的 Http 状态码（200 对应 ok，404 对应 notFound）
二、Ajax 小案例（使用 JS 实现）
使用 Ajax 实现如下案例，分别用三种数据传输格式（Html、XML、JSON）
2.1 案例演示
2.2 Html 传输格式
由于返回的数据格式为 html 所以利用函数 innerHtml 插入标签内即可。
htmlTest.jsp 代码如下
1 <%-- 2 ??Created by IntelliJ IDEA. 3 ??User: yin‘zhao 4 ??Date: 2017/12/04 5 ??Time: 23:23 6 ??To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html>10 <head>11 ????<title>HtmlPage</title>12 ????<script type="text/javascript">13 ????????window.onload = function () {14 // ???????????获取 a 标签15 ????????????var aTags = document.getElementsByTagName("a");16 // ???????????为每一个 a 标签添加点击事件17 ????????????for (var i = 0; i < aTags.length; i++) {18 ????????????????aTags[i].onclick = function () {19 // ???????????????????新建 XMLHttpRequest 对象20 ????????????????????var request = new XMLHttpRequest();21 // ???????????????????定义传输方法为 GET22 ????????????????????var method = "GET";23 // ???????????????????定义 URL24 ????????????????????var url = this.href + "?time=" + new Date();25 // ???????????????????发送请求26 ????????????????????request.open(method, url);27 // ???????????????????不需要传输数据，设置传输内容为 null28 ????????????????????request.send(null);29 // ???????????????????处理响应30 ????????????????????request.onreadystatechange = function () {31 // ???????????????????????如果响应已经完成32 ????????????????????????if (request.readyState == 4) {33 // ???????????????????????????如果服务器状态码正确34 ????????????????????????????if (request.status == 200 || request.status == 304) {35 // ???????????????????????????????那么就将响应字段加入预先定义好的 Html 中36 ????????????????????????????????document.getElementById("htmlTest").innerHTML = request.responseText;37 ????????????????????????????}38 ????????????????????????}39 ????????????????????}40 // ???????????????????超链接点击事件返回 false，取消其默认事件的触发41 ????????????????????return false;42 ????????????????}43 ????????????}44 ????????}45 ????</script>46 </head>47 <body>48 <ul>49 ????<li><a href="yy.html">YY Page</a></li><br>50 ????<li><a href="SSPage.html">SS Page</a></li><br>51 ????<li><a href="YYSSPage.html">YS Page</a></li><br>52 </ul>53 <div id="htmlTest"></div>54 </body>55 </html>各超链接所对应的页面（SSPage.jsp、yy.html、YYSSPage.html）
1 <h3>SS</h3>2 <b>ssPage please go to</b>
1 <h3>YY</h3>2 <b>yyPage please go to</b>
1 <h3>YS</h3>2 <b>ysPage please go to</b>
2.3 XML 传输格式
传输格式为 XML 需要在 jsp 页面中解析为 XML 获取标签内容然后加入页面
xmlTest.jsp
1 <%-- 2 ??Created by IntelliJ IDEA. 3 ??User: yin‘zhao 4 ??Date: 2017/12/05 5 ??Time: 8:41 6 ??To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html>10 <head>11 ????<title>XMLPage</title>12 ????<script type="text/javascript">13 ????????window.onload = function () {14 ????????????var aTag = document.getElementsByTagName("a");15 ????????????for (var i = 0; i < aTag.length; i++) {16 ????????????????aTag[i].onclick = function () {17 ????????????????????var url = this.href + "?time=" + new Date();18 ????????????????????var method = "GET";19 ????????????????????var request = new XMLHttpRequest();20 21 ????????????????????request.open(method, url);22 ????????????????????request.send(null);23 ????????????????????request.onreadystatechange = function () {24 ????????????????????????if (request.readyState == 4) {25 ????????????????????????????if (request.status == 200 || request.readyState == 304) {26 // ???????????????????????????????获得返回数据的 XML 格式27 ????????????????????????????????var result = request.responseXML;28 // ???????????????????????????????获得返回内容的 name 标签29 ????????????????????????????????var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;30 // ???????????????????????????????获得返回内容的 website 标签31 ????????????????????????????????var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;32 // ???????????????????????????????创建 h3 标签33 ????????????????????????????????var hNode = document.createElement("h3");34 // ???????????????????????????????将 website 内容加入到 h3 标签内35 ????????????????????????????????hNode.appendChild(document.createTextNode(name));36 37 ????????????????????????????????var bNode = document.createElement("b");38 ????????????????????????????????bNode.appendChild(document.createTextNode(website));39 40 ????????????????????????????????var divNode = document.getElementById("details");41 // ???????????????????????????????每次点击的时候首先将其内容清空，在加入对应的标签42 ????????????????????????????????divNode.innerHTML = "";43 ????????????????????????????????divNode.appendChild(hNode);44 ????????????????????????????????divNode.appendChild(bNode)45 ????????????????????????????}46 ????????????????????????}47 ????????????????????}48 ????????????????????return false;49 ????????????????}50 ????????????}51 ????????}52 ????</script>53 </head>54 <body>55 ??<ul>56 ??????<li><a href="yy.xml">YYPage</a></li><br><br>57 ??????<li><a href="ss.xml">SSPage</a></li><br><br>58 ??????<li><a href="ys.xml">YSPage</a></li><br><br>59 ??</ul>60 ??<div id="details"></div>61 </body>62 </html>各超链接所对应的 xml 文件（ss.xml、yy.xml、ys.xml）
1 <?xml version="1.0" encoding="UTF-8" ?>2 <details>3 <name>ss</name>4 <website>ss.com</website>5 </details>
1 <?xml version="1.0" encoding="UTF-8" ?>2 <details>3 ????<name>yy</name>4 ????<website>yy.com</website>5 </details>
1 <?xml version="1.0" encoding="UTF-8" ?>2 <details>3 ????<name>ys</name>4 ????<website>ys.com</website>5 </details>
2.4 JSON 传输格式
传输数据格式为 JSON 首先在页面需要将其转换为 JSON 格式
jsonTest.jsp
1 ????<%-- 2 ??????Created by IntelliJ IDEA. 3 ??????User: yin‘zhao 4 ??????Date: 2017/12/04 5 ??????Time: 23:23 6 ??????To change this template use File | Settings | File Templates. 7 ????--%> 8 ????<%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 ????<html>10 ????<head>11 ????????<title>JSONPage</title>12 ????????<script type="text/javascript">13 ????????????window.onload = function () {14 ????????????????var aTags = document.getElementsByTagName("a");15 16 ????????????????for (var i = 0; i < aTags.length; i++) {17 ????????????????????aTags[i].onclick = function () {18 ????????????????????????var request = new XMLHttpRequest();19 ????????????????????????var method = "GET";20 ????????????????????????var url = this.href + "?time=" + new Date();21 ????????????????????????request.open(method, url);22 ????????????????????????request.send(null);23 24 ????????????????????????request.onreadystatechange = function () {25 ????????????????????????????if (request.readyState == 4) {26 ????????????????????????????????if (request.status == 200 || request.status == 304) {27 ????????????????????????????????????var result = request.responseText;28 ????// ???????????????????????????????转换为 JSON 格式，将字符串29 ????????????????????????????????????var jsonCon = eval("(" + result + ")");30 ????// ???????????????????????????????获取 name 和 website 节点值31 ????????????????????????????????????var name = jsonCon.person.name;32 ????????????????????????????????????var website = jsonCon.person.website;33 ????// ???????????????????????????????创建新的 html 节点34 ????????????????????????????????????var hNode = document.createElement("h3");35 ????????????????????????????????????hNode.appendChild(document.createTextNode(name));36 ????????????????????????????????????var bNode = document.createElement("b");37 ????// ???????????????????????????????给新建的节点添加子节点，并为新的子节点添加内容38 ????????????????????????????????????bNode.appendChild(document.createTextNode(website));39 40 ????????????????????????????????????var divNode = document.getElementById("jsonTest");41 ????// ???????????????????????????????清空 div 节点中的内容42 ????????????????????????????????????divNode.innerHTML = "";43 ????// ???????????????????????????????添加子节点44 ????????????????????????????????????divNode.appendChild(hNode);45 ????????????????????????????????????divNode.appendChild(bNode);46 ????????????????????????????????}47 ????????????????????????????}48 ????????????????????????}49 ????????????????????????return false;50 ????????????????????}51 ????????????????}52 ????????????}53 ????????</script>54 ????</head>55 ????<body>56 ????<ul>57 ????????<li><a href="yy.json">YY Page</a></li><br>58 ????????<li><a href="ss.json">SS Page</a></li><br>59 ????????<li><a href="ys.json">YS Page</a></li><br>60 ????</ul>61 ????<div id="jsonTest"></div>62 ????</body>63 ????</html>各超链接所对应的 json 文件
1 {2 ??"person":{3 ????"name":"ss",4 ????"website":"ss.com"5 ??}6 } 1 {2 ??"person":{3 ????"name":"ys",4 ????"website":"ys.com"5 ??}6 } { ?"person": { ???"name": "yy", ???"website": "yy.com" ?}}2.5 各种传输格式的优缺点
2.5.1 优点
1. Html 传输格式不需要 js 解析 html 代码，可读性好，html 代码和 innerHtml 属性搭配效率高
2. XML 是一种通用的传输格式，不必把数据强加到已经定义好的格式中，而为数据自定义合适的标记，且利用 DOM 可以完全掌握文档
3. JSON 和 XML 相似但相比起来更加轻巧
2.5.2 缺点
1. 若需要使用 Ajax 更新一篇文档的多个部分则 html 不合适
2. 当浏览器接收到较长的 XML 文档时 DOM 解析可能会很复杂
3. JSON 的语法严谨，代码不宜读
2.5.3 适用场景
1. 若 application 不需要与其他程序共享数据时使用 HTML
2. 如果数据需要重用 JSON 在性能和大小方面有优势
3. 当远程程序未知时 XML 文档是首选
三、案例再实现（使用 JQuery 实现）
案例效果如上，只是实现方式为 JQuery
3.1 JQuery 中 Ajax 的 API
1. load(url) -- -- 任何 HTML 节点都可以使用 load 方法加载 Ajax，它可以载入远程的 HTML 代码并插入 HTML 中，若需要使用部分内容则可以使用选择器（在定义 URL 的时候使用选择器）
2. load 方法的传递方式根据 load 方法是否传递参数而定，若没有传递参数那么就是 get 请求方式，若有则为 post 请求方式
3. 对于必须在完成加载才可以继续的操作，load() 方法提供了回调函数，该函数有三个参数，代表请求返回内容的 data，代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
4. $.get(url, args, function) -- -- 使用 get 方式进行异步请求，data 代表返回的内容可以是 XML、Html、JSON 等数据格式；args 为 JSON 格式的传递参数；响应结束时触发回调函数，其响应结果在函数参数中
5. $.getJSON() -- -- 对于 JSON 传输格式直接使用该方法，参数和 $.get() 方法一样
3.2 HTML 数据传递格式
htmlTest.jsp
1 <%-- 2 ??Created by IntelliJ IDEA. 3 ??User: yin‘zhao 4 ??Date: 2017/12/04 5 ??Time: 23:23 6 ??To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html>10 <head>11 ????<title>HtmlPage</title>12 ????<script type="text/javascript" src="../jquery-1.7.2.js"></script>13 ????<script type="text/javascript">14 ????????$(function () {15 ????????????$("a").click(function () {16 // ???????????????使用选择器，选择出 h3 标签部分17 ????????????????var url = this.href + " h3";18 // ???????????????参数19 ????????????????var args = {"time": new Date()};20 // ???????????????所有的 html 节点均可调用 load 方法将返回内容直接加入到目标标签内21 ????????????????$("#htmlTest").load(url, args);22 ????????????????return false;23 ????????????});24 ????????})25 ????</script>26 </head>27 <body>28 <ul>29 ????<li><a href="yy.html">YY Page</a></li><br>30 ????<li><a href="SSPage.html">SS Page</a></li><br>31 ????<li><a href="YYSSPage.html">YS Page</a></li><br>32 </ul>33 <div id="htmlTest"></div>34 </body>35 </html>3.3 XML 数据传输格式
xmlTest.jsp
1 <%-- 2 ??Created by IntelliJ IDEA. 3 ??User: yin‘zhao 4 ??Date: 2017/12/05 5 ??Time: 8:41 6 ??To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html>10 <head>11 ????<title>XMLPage</title>12 ????<script type="text/javascript" src="../jquery-1.7.2.js"></script>13 ????<script>14 ????????$(function () {15 ????????????$("a").click(function () {16 ????????????????var url = this.href;17 ????????????????var args = {"time": new Date()};18 19 ????????????????$.get(url, args, function (data) {20 // ???????????????????找到 name 节点属性值21 ????????????????????var name = $(data).find("name").text();22 ????????????????????var website = $(data).find("website").text();23 // ???????????????????首先清空在添加节点，然后加入新建的节点24 ????????????????????$("#details").empty().append("<h2>" + name + "</h2><b>" + website + "</b>");25 ????????????????});26 ????????????????return false;27 ????????????})28 ????????})29 ????</script>30 </head>31 <body>32 <ul>33 ????<li><a href="yy.xml">YYPage</a></li>34 ????<br><br>35 ????<li><a href="ss.xml">SSPage</a></li>36 ????<br><br>37 ????<li><a href="ys.xml">YSPage</a></li>38 ????<br><br>39 </ul>40 <div id="details"></div>41 </body>42 </html>3.4 JSON 数据传输格式
jsonTest.html
1 <%-- 2 ??Created by IntelliJ IDEA. 3 ??User: yin‘zhao 4 ??Date: 2017/12/04 5 ??Time: 23:23 6 ??To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html>10 <head>11 ????<title>JSONPage</title>12 ????<script type="text/javascript" src="../jquery-1.7.2.js"></script>13 ????<script type="text/javascript">14 ????????$(function () {15 ????????????$("a").click(function () {16 ????????????????var url = this.href;17 ????????????????var args = {"time": new Date()};18 19 ????????????????$.getJSON(url, args, function (data) {20 ????????????????????var name = data.person.name;21 ????????????????????var website = data.person.website;22 23 ????????????????????$("#jsonTest").empty().append("<h3>" + name + "</h3><b>" + website + "</b>");24 ????????????????})25 ????????????????return false;26 ????????????})27 ????????})28 ????</script>29 </head>30 <body>31 <ul>32 ????<li><a href="yy.json">YY Page</a></li><br>33 ????<li><a href="ss.json">SS Page</a></li><br>34 ????<li><a href="ys.json">YS Page</a></li><br>35 </ul>36 <div id="jsonTest"></div>37 </body>38 </html>以上这些就是我所知道有关 Ajax 的一些知识，我们可以利用以上知识实现三级联动，演示如下：
写的有不好的地方还望指出，谢谢！
Ajax 学习总结
原文地址：https://www.cnblogs.com/bgzyy/p/8109673.html