AJAX（异步的 JavaScript 和 XML）
ajax
异步刷新（局部刷新），可以给后台发请求
四种发请求的方式：
- 地址栏（可以发get请求）
- a标签（可以发get请求）
- form表单（可以发post请求）
- Location.href或window.open( )（可以发get请求）
异步：整个页面不会全部刷新，只有某个局部在刷新
比如：验证用户名是否存在
刷新：
一、原生JS的ajax
<body>
<p>
账号：<input type="text" id="user name"><span id="msg"></span>
</p>
<input type="button" onclick="valid()" value="验证">
<script>
// 发送get请求
function valid(){
let username = document.querySelector("#username").value;
let msg = document.querySelector("#msg");
//当失去焦点时，向后台发请求（使用JS原生的ajax）
let xhr = new XMLHttpRequest();
//设置请求的方式和url地址
//第一个参数是get或者post请求，第二个参数是要把请求发到哪
//发送GET请求
xhr.open("GET","valid.do?username=" + username);
//发送
//括号里的参数是请求体
xhr.send(null);
//发送POST请求
xhr.open("POST","valid.do");
//POST请求需要设置一下请求头信息
//Content-type：发送的请求的内容的类型
//application/x-www-form-urlencoded：文档流
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
//发请求
xhr.send("username="+username + "&password=123456");
//后台给出响应
//指定xhr状态变化的处理函数
xhr.onreadystatechange = function (){
//如果响应码是4，可以正常接收后台的响应
if(this.readyState === 4){
//通过xhr的responseText可以获取到对应的响应体
// console.log(this.responseText);
switch (this.responseText){
case "1":
msg.innerHTML = "用户名可用";
break;
case "0":
msg.innerHTML = "用户名已存在";
}
}
}
}
</script>
</body>
注意1：使用ajax发送请求，页面是不可以通过后台跳转页面
如果需要跳页面，也是通过我们前端的JS来跳转，不可以通过serlvet跳转
注意2：ajax和form表单不能同时使用
ajax：不跳页面
form：一定跳走
请求体：post请求才有请求体
ajax发起请求，后台给出的响应会回到ajax的响应处理函数
readyState响应码
0：xhr被创建成功，但是open方法未调用
1：open方法被调用，建立了连接
**2：**send方法被调用，可以获取状态行和响应头
**3：**可以拿到响应体，响应体加载中
**4：**响应体下载完成，可以直接使用responseText。代表请求可以正常发送，响应能够正常接收。
二、JQuery的ajax
json串
json串的格式：键值对
三、Vue的ajax
axios
对原生ajax的一个封装
ES6语法、Promise语法
axios如果发送get请求：
这个请求中如果有参数，那还是一个默认的以文档流的形式发送，和之前的任何一种请求方式没有任何区别。
axios如果发送post请求：
会把post请求的请求体转成json串，然后再发给后台。
发get请求和post请求的场景
get请求：后台没有对应的对象来封装，不能有私密数据。
post请求：后台都是有对象跟着的。
封装对象的前提：
json串中的数据的key和对象的属性名要一致。
set方法的名字要对应上，跟属性名无关。