目录
1、ajax简述
1.1 什么是ajax？
1.2 ajax 优缺点
2、ajax原理
2.1 ajax引擎
2.2 ajax原理
2.3 ajax请求步骤及示例
2.4 ajax相关方法和属性介绍
2.4.1 相关方法
2.4.2 相关属性
3、ajax的jquery简单调用方式
3.1 语法
3.2 简单示例
ajax 就是异步的JavaScript和XML（Asynchronous JavaScript and XML），它不是一个新的编程语言，它只是以现有技术为基础，将现有技术整合起使用的新方法/新技术。它的作用就是在不重新加载整个页面的情况下，与后台服务器进行异步交互，并实现页面数据的局部刷新。
优点：
无需刷新页面就可以更新页面数据，用户体验好。 支持异步通信（可和后台服务器进行异步交互） 减轻服务器负担（每次只会提交部分数据，不会将整个页面都提交到服务器）缺点：
破坏了浏览器的回退机制（用户操作无法回到历史） 开发人员写代码时需要考虑浏览器的兼容性（Ajax使用了ajax引擎对象，引擎对象的支持取决于浏览器） 增加前端开发负担（前端开发需要做准备参数、调用后台接口、并将返回数据动态展示的操作）了解ajax原理之前先了解下ajax引擎，那么什么是ajax引擎？简单来说，ajax引擎就是一个JavaScript对象，用于和后台服务器进行数据交互，全写就是window.XMLHttpRequest对象（IE比较老的版本用的是ActiveXObject对象）。创建ajax引擎对象代码如下：
var xmlHttp; if (window.XMLHttpRequest) { // 现在主流浏览器基本上都支持此种方式 xmlHttp = new XMLHttpRequest(); } else { // 用于IE5,6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }简单来说，就是通过调用浏览器中的javascript对象（XMLHttpRequest）来和Web服务器进行异步/同步请求，并将请求的数据返回给用户接口的过程。下面就是一个简单的交互过程：
ajax的请求步骤可分为以下几步：
创建XMLHttpRequest对象。创建一个HTTP请求，并指定请求类型（GET/POST）、请求文件位置（URL）和是否异步标识（true/false）。设置请求头部信息（POST方式需要）。设置处理HTTP请求状态变化的函数。发送HTTP请求。获取服务器返回数据，并使用Javascript操作DOM树对页面进行局部刷新处理。 // 1、创建XMLHttpRequest对象 var xmlHttp; if (window.XMLHttpRequest) { // 现在主流浏览器基本上都支持此种方式 xmlHttp = new XMLHttpRequest(); } else { // 用于IE5,6 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } // 2、创建一个HTTP请求 xmlHttp.open("post", "http://127.0.0.1:8080/demo/helloTest", true); // 3、设置请求头部信息（POST方式需要）。 // xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 4、设置处理HTTP请求状态变化的函数 xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 6、处理返回数据 alert(xmlHttp.responseText); } } // 5、发送HTTP请求 xmlHttp.send(null);open(method,url,async)：用于规定请求的类型（GET/POST）、URL（文件位置）以及是否异步处理请求（true/false）。 send(string)：发送请求到服务器。 setRequestHeader(header,value)：向请求添加HTTP头（用于POST方式）。
xmlHttp.onreadystatechange = function() {}：存储函数，用于监听请求状态，每当readyState属性改变时，就会调用该函数。 readyState：存有XMLHttpRequest的状态。从0到4发生变化，状态如下：
0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪status：http状态码，200指请求成功，404指未找到页面。状态码说明如下：
1**：信息，服务器收到请求，需要请求者继续执行操作 2**：成功，操作被成功接收并处理 3**：重定向，需要进一步的操作以完成请求 4**：客户端错误，请求包含语法错误或无法完成请求 5**：服务器错误，服务器在处理请求的过程中发生了错误responseText：以字符串形式存储响应的数据。 responseXML：以XML形式存储响应的数据。
$.ajax({name:value, name:value, ... }); 部分参数说明如下：
async：布尔值，表示请求是否异步处理。默认是 true。 cache：布尔值，表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status)：请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 contentType：发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 data：规定要发送到服务器的数据。 dataType：预期的服务器响应的数据类型。 error(xhr,status,error)：如果请求失败要运行的函数。 success(result,status,xhr)：当请求成功时运行的函数。 timeout：设置本地的请求超时时间（以毫秒计）。 type：规定请求的类型（GET 或 POST）。 url：规定发送请求的 URL。默认是当前页面。前端jsp页面部分js代码：
<script type="text/javascript" src="<%=request.getContextPath()%>/jquery-3.4.1.min.js" ></script> <script type="text/javascript"> $(function(){ $.ajax({ type: "get", timeout: 5000, url: "http://127.0.0.1:8080/demo/hhTest", data: {"userNO" : "1911011", "userName" : "张三"}, dataType: "json", success: function(obj) { alert("server data：userNO="+obj.userNO+";userName="+obj.userName) }, error: function(ex) { if (ex.statusText == 'timeout') { alert("this is timeout error"); } else { alert("this is other error"); } }, complete: function() { alert("ajax callback complete"); } }); }); </script>后台部分java代码：
import com.alibaba.fastjson.JSONObject; @WebServlet("/hhTest") public class HhTest extends HttpServlet { private static final long serialVersionUID = 5705723197293311596L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String userNO = req.getParameter("userNO"); String userName = req.getParameter("userName"); JSONObject obj = new JSONObject(); obj.put("userNO", userNO); obj.put("userName", userName); resp.setCharacterEncoding("UTF-8"); resp.getWriter().print(obj); } }
