即异步的JavaScript和XML，是一种前端的动态请求方式；
通过AJAX可以给服务器发送请求，并接收服务器响应的数据；
即通过AJAX可以将服务器返回的数据传给浏览器，而html、javaScript做不到从服务器获取数据，如服务器查询了数据，无法通过javaScript将数据交给浏览器；
以前做法：
数据从Servlet 查询出来，在Servlet中将数据存入request域，再转发到jsp 去展示数据！
用JSP原因：
只用HTML无法获取服务端返回的数据！所以用jsp；而AJAX可以获取服务端的数据了，所以替代了jsp！
现在做法：
使用AJAX和服务器通信，使用AJAX+HTML 来替换JSP；
可以【在不重新加载整个页面的情况下】，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户是否可用校验等等；
例：搜索联想
同步：
客户端浏览器请求服务端，服务器此时要处理，处理这段时间客户端必须等待，等服务器给客户端做出响应，等客户端收到响应后才能继续访问！
异步：
如果客户端发送的是异步请求，那么客户端不用等待服务器端的响应，而可以继续执行其他操作；’
如：“提交注册”就是同步请求，点击后浏览器会刷新等待；
而发送异步请求后，浏览器并不会刷新等待，而是悄悄发送请求给浏览器，用户可以继续做其他操作；
异步回调： 指的是在发起一个异步任务的同时指定一个函数,在异步任务完成时会自动的调用这个函数；
分两端， 在服务端写接收请求并响应数据的代码，在HTML写请求客户端的代码，由AJAX去接收servlet发来的数据；
后端：编写AjaxServlet，使用response输出要给前端的数据
前端：
创建核心对象 XMLHttpRequest 对象，用于和服务器交换数据；
向服务器发送请求；
open()方法打开请求，GET即方式，url 是servlet 全路径 ，(第三个参数是同步true，异步false，默认异步)
为什么是全路径：因为浏览器和Servlet将来不在一个服务器部署，是前后端分开部署的，所以要全类名！
获取服务器响应数据
使用xmlhttp 绑定事件属性onreadystatechange，判断是否已经完成响应，则执行回调函数function；
完成响应判断：就绪状态是4（请求发送完响应已收到）且HTTP响应报文的响应状态码是200 即成功，则获取响应数据；
readyState状态码：
需求：当用户名框失去焦点（onblur事件）时，检验用户名是否存在于数据库中；
思路：
前端：
1.在前端页面的onblur事件属性绑定函数，
2.当onblur事件发生，使用AJAX发送请求并携带username数据；
3.前端获取响应，执行回调函数 ；
后端：
1.获取username
2.调用Service查询数
3.响应标记！（标记的含义和前端协调好）
从request获取前端输入的用户名username，然后返回响应到response；
注意：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="login.html">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>验证码</td>
<td class="inputs">
<input name="checkCode" type="text" id="checkCode">
<img src="imgs/a.jpg">
<a href="#" id="changeImg">看不清？</a>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
注意：
Axios是一个基于promise的网络请求库，作用于node.js和浏览器中；
是对原生AJAX的封装，简化书写；
{ JavaScript对象 }.then设置回调函数，即servlet发的响应被前端收到后会执行的方法！
GET和POST方式区别：
GET的参数要传入url中；而POST的参数要单独放在data中；
需求：后端获取输入参数，并返回 “hello Axios”
1.接收参数
2.设置响应到response
1.先将axios文件放入js文件夹，再将axios的JavaScript文件（源码）引入；
2.将script代码写到 { JavaScript对象 } 内：
注意：
GET方式： 参数放在url后面
POST方式： 参数放在请求体中，即 data
注意：
1. 有两个data，一个是请求方式为POST时发送给servlet的参数，第二个是response返回来的数据；
2. 这里的data数据并不是来自于表单 而是写死的，如果发送表单数据则需要将表单数据先转换为 JSON，再通过AJAX发送给servlet ！
效果：
访问axios-demo.html：
即servlet收到了请求并返回hello Axios，客户端AJAX收到响应后执行回调函数，中将这句话alert ！
为了方便，axios已经为所有请求方式提供了别名：
改进上例：
GET：
POST：
