1.什么是Ajax
异步的js和xml，它能使用js访问服务器，而且是异步访问。
异步刷新技术，用来在当前页面内响应不同的请求内容。
服务器给客户端的响应一般是整个页面，一个html完整页面！但在Ajax中因为是局部刷新，
那么服务器就不用再响应整个页面，而只是数据！
1、异步交互和同步交互
异步：
> 发送一个请求后，无序等待服务器的响应，然后就可以发第二个请求！
> 可以使用js接收服务器的响应，然后使用js来局部刷新！
同步：
> 发送一个请求，就要等待服务器的响应结束，然后才能发第二个请求！
中间这段时间就是卡
> 刷新的是整个页面！
2.为什么需要Ajax
需求：有时候我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户。
解决：
1、在后台服务器将多次响应内容重新拼接成一个jsp页面响应。
但是这样会造成很多响应内容被重复的响应，资源浪费
2、使用Ajax技术
3.Ajax的优缺点
优点：
异步刷新：增强用户体验
性能：因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了！
缺点：
> Ajax不能应用在所有场景!
> Ajax无端的增多了对服务器的访问次数，给服务器带来了压力！
-------------------------------------------------------------------------------------------------------------------------------------------------------------
Ajax发送异步请求（四步操作）
1、第一步（得到XMLHttpRequest）
ajax其实需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax
var xmlHttp = new XMLHttpRequest();
得到XMLHttpRequest
2、第二步（打开与服务器的连接）
xmlHttp.open();用来打开与服务器的连接，它需要三个参数
> 请求方式：get|post
> 请求的url：指定的服务器端资源 servlet
> 请求是否为异步：如果为true表示发送异步请求，否则...
xmlHttp.open("post","url",true);
3、第三步（发送请求）
xmlHttp.send(null); 如果不给可能会造成部分浏览器无法发送！
> 参数：就是请求体内容！如果是get请求，必须给出null
4、第四步（）
在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp对象一共有5个状态：
> 0状态：刚创建，还没有掉用open（）方法；
> 1状态：请求开始，调用了open（）方法，但还没有send（）方法；
> 2状态：调用完send（）方法了；
> 3状态：服务器已经开始响应，但不表示响应结束了！
> 4状态：服务器响应结束！（通常我们只关心这个状态）
得到xmlHttp对象的状态：
> var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
> var status = xmlHttp.status;//例如200、404、500
得到服务器的响应内容
> var content = xmlHttp.reaquestText; //得到服务器的响应的文本格式内容
> var content = xmlHttp.requestXML; //得到服务器的响应的xml响应的内容，它是Document对象！
xmlHttp.onreaystatechange = function(){//xmlHttp的5中状态的都会调用本方法
if(xmlHttp.readystate == 4 && xmlHttp.status == 200){//双重判断，判断是否状态为4、200
//获取服务器的响应内容
var text = xmlHtt.requestText;
}
}
<!-- jsp页面 -->
<script type="text/javascript">
window.onload = function(){//文档加载完毕后执行
var btn = document.getElementById("btn");
btn.onclick = function(){//给按钮的点击事件注册监听
/**
ajax的四步操作
*/
//1、得到XMLHttpRequest
var xmlHttp = new XMLHttpRequest;
//2、服务器连接
xmlHttp.open("post","Test01Servlet",true);
//3、发送请求
xmlHttp.send(null);
//4、xmlHttp对象的事件注册监听器 onreadystatechange
xmlHttp.onreadystatechange = function(){
//双重判断：xmlHttp的状态为4（服务器响应结束），服务器响应状态为200（响应成功）
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应内容
var text = xmlHttp.responseText;
//获取元素
var h1 = document.getElementById("h1");
//将servlet请求的内容赋值给h1
h1.innerHTML = text+"11";
}
};
};
};
</script>
...............................
<button id="btn">按钮</button>
<h1 id="h1"></h1>
-----------------------------------------
// servlet层
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("hello");
response.getWriter().print("ajax");
}
用户注册小案例
<body>
<form action="" method="post">
用户名：<input type="text" name="uname" id="uid"/><span id="sid"></span><br/>
密 码：<input type="password" name="upass" id="pid"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
<script tyype="text/javascript">
window.onload = function(){
//获取文本框，给它的失去焦点事件注册监听
var uname = document.getElementById("uid");
uname.onblur = function(){
/**
Ajax四部操作
*/
//1、创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
//2、与服务器连接
xmlHttp.open("post","Test02Servlet",true);
//3、设置请头：Content-Type
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3、发送请求,给出请求体
var un = document.getElementById("uid").value;//文本数据
xmlHttp.send("uname=" + un);
//4、xmlHttp对象注册监听器 onreadystatechange
xmlHttp.onreadystatechange = function(){
//双重判断：xmlHttp的状态为4（服务器响应结束），服务器响应转台为200（响应成功）
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取服务器的响应内容，判断是否为1
var text = xmlHttp.responseText;
//获取元素
var sp = document.getElementById("sid");
if("1" == text){
sp.innerHTML="正确";
}else{
sp.innerHTML="错误";
}
}
}
}
};
****************************************************************************
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
/**
* 1.获取参数uname
* 2.判断是否为true
* 3.如果是：响应1
* 3.如果不是：响应0
*/
String uname = request.getParameter("uname");
if("laowei".equals(uname)){
response.getWriter().print("1");
}else{
response.getWriter().print("0");
}
}
来源：CSDN
作者：魏亚贤
链接：https://blog.csdn.net/qq_41904304/article/details/103773791