版权声明：转载请联系作者本人！！！ https://blog.csdn.net/qq_41307491/article/details/82356535
1）ajax：
asynchronous javascript and xml：异步的js和xml
作用：能使用js异步访问服务器. （原本只是响应服务器，不能发送请求）
应用场景：
1）百度的搜索框
2）用户注册时（校验用户名是否被注册过）
3）分页
...
ajax的优缺点
优点：
1）异步交互：增强了用户的体验。
2）性能提升：服务器无需再响应整个页面，只响应部份内容。
缺点：
1）ajax不能应用在所有场景。
2）增多了对服务器的访问次数。
服务器给客户端的响应背景：
服务器给客户端的响应一般是一个完整的html页面。
但在ajax中因为是局部刷新，服务器只响应响应部分页面中的请求数据。
响应返回的三种数据格式
text：纯文本
xml：配置文件（可以表示多个对象）
json：它是js提供的数据交互格式，在ajax中最受欢迎！
2） 异步交互和同步交互
同步：
发出一个请求后，需要等待服务器的响应结束后，才能发第二个请求！
刷新的是整个页面！
异步：
可连续发送请求，无需等待服务器的响应
可以使用js接收服务器的响应，然后使用js来局部刷新！
jsp中的异步案例：使用js完成局部刷新案例
//jsp页面
//为<h1 id="h1"></h1>中添加内容
<script type="text/javascript">
window.onload = function(){ //在文档加载完成后马上执行
//得到btn元素---通过DOM对象的getElementById方法
var btn = document.getElementById("btn");
//给btn的click事件注册监听
btn.onclick = function(){ //在按钮被点击时执行
//获取h1元素
var h1= document.getElementById("h1");
//给h1添加内容
//.innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
h1.innerHTML = "Hello js";
}
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>3）通过ajax发送异步请求（四步操作）：与服务器间的数据响应交互
1. 第一步：得到XMLHttpRequest对象
三种方式：
1）var xmlHttp = new XMLHttpRequest(); 大多数浏览器都支持
2）IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
3）IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
ajax的核心：XMLHttpRequest对象。
创建XMLHttpRequest对象的函数
//依次使用三种得到方式
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("哥们儿，你用的是什么浏览器啊？");
throw e;
}
}
}
}2. 第二步（打开与服务器的连接）
xmlHttp.open("请求方式","URL",是否异步)：用来打开与服务器的连接。
参数（三个）：
1）请求方式：GET或POST
2）请求的URL：指定服务器端资源，例如；/day23_1/AServlet
3）请求是否为异步：如果为true表示发送异步请求，否则同步请求！
eg: xmlHttp.open("GET", "/day23_1/AServlet", true);
3. 第三步（发送请求）
xmlHttp.send(null)：如果不给可能会造成部份浏览器无法发送！
参数：就是请求体内容！如果是GET请求，必须给出null。
4. 第四步（注册监听器）
1)在xmlHttp对象的onreadystatechange事件上注册监听器：
2)双重判断状态，获取服务器响应内容
xmlHttp.onreadystatechange = function() {//xmlHttp的5种状态都会调用本方法
//双重判断：判断是否为4状态，而且还要判断是否为200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 获取服务器的响应内容
var text = xmlHttp.responseText;
}
};4）ajax发送请求的相关知识点
xmlHttp对象的三个方法:
1）得到xmlHttp对象的状态：
var state = xmlHttp.readyState; //可能是0、1、2、3、4
2）得到服务器响应的状态码
var status = xmlHttp.status;//例如为200(成功)、404、500
3）得到服务器响应的内容1
var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器的响应的xml格式的内容，它是Document对象！
xmlHttp对象的5个状态：
0状态：刚创建，还没有调用open()方法;
1状态：请求开始：调用了open()方法，但还没有调用send()方法
2状态：调用完了send()方法了；
3状态：服务器已经开始响应，但不表示响应结束了！
4状态：服务器响应结束。（重点关心此状态）