ajax概念
ajax：异步刷新，前端技术，给后台发请求
异步：整个页面不会全部刷新只有某个局部在刷新。
四种发请求的方式：
1.form表单
2.a标签
3.地址栏
4.location.href.window.open
注意：
一、使用ajax发送请求，页面是不可以通过后台跳转的。如果需要跳转页面也是通过前端的JS来跳转，不可能是通过Servlet跳转二、ajax和form表单一定不能同时使用ajax：不跳页面form：一定要跳走两者相互冲突
请求体：post才有请求体
ajax发起请求给后台，后台的响应会回到ajax的响应处理函数中
readyState：
0：-----------xhr被创建成功，open方法未调用
1：-----------open被调用，未建立连接
2：-----------send被调用，可以获取状态行和响应头
3：-----------可以拿到响应体，响应体加载中
4：-----------响应体加载成功，可以直接使用resposeText
代表请求可以正常发送，响应可以正常接收
js中的ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
账号:<input type="text" onblur="valid()" id="username" name="username"><span id="span"></span>
</p>
<script>
function valid(){
let username = document.getElementById("username").value;
let span = document.getElementById("span");
//向后台发送请求
//使用ajax
//XMLHttpRequest是ajax的支持对象
let xhr = new XMLHttpRequest();
//设置请求方式和地址
//传参
xhr.open("GET","valid.do?username="+username);
//发地址
xhr.send(null);
//post请求传参
/**
* //发送post请求
* xhr.open("POST","valid.do");
* //设置请求头信息
* //Content-type：选择内容类型
* xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
* //传参
* xhr.send("username="+username);*/
//指定xhr的状态变化的处理函数
xhr.onreadystatechange = function (){
//正常接收后台响应
if (this.readyState === 4){
//通过xhr的responseText获取对应的响应体
switch (this.responseText){
case "1":
span.innerText="账号验证成功！";
break;
case "0":
span.innerText = "账号输入错误！"
}
}
}
}
</script>
</body>
</html>
JQuery中的ajax
共有三种发送请求的方式
一、发送get请求
//1.发送get请求
$.get("valid.do?username=" + username,function(data) {
// data就是后台回来的响应体
console.log(data);
if(data == "1") {
$("#msg").html("用户名可用...")
}
if(data == "0") {
$("#msg").html("用户名已存在...")
}
});
二、发送post请求
//2.发送post请求
$.post("valid.do","username=" + username,function (data) {
if(data == "1") {
$("#msg").html("用户名可用...")
}
if(data == "0") {
$("#msg").html("用户名已存在...")
}
});
三、完整写法，JQuery中的ajax
$.ajax({
url: "valid.do",
type: "post",
data: formData,
success : function(res) {
console.log(res);
},
error : function(res) {
console.log(res);
}
});
注意：这里的formData需要在jquery-3.0.0.min.js版本中才好使
formData： formData构建一个表单数据对象
formData是JS的内置对象，和JQuery无关，和Vue无关
firmData使用方法：
let formData = new FormData();
formData.append("username",username);
formData.append("password",password);
axios:对原生的ajax的一个封装，独立
特点：发送的get请求，如果带参，还是一个默认的一文档流发送，和之前的任何一种请求方式没有任何不同；
但是如果发送的是post请求，会把文档流转成json串再传送给后台；
而那个方法只认识文档流默认字符串，所以想要接收axios中的post请求需要用缓冲字符输入流；
BufferReader reader = request.getReader(); String line = reader.readLine;
注意：但也不一定
一、get请求，后台没有对应的对象来封装，不能有私密数据。比如分页查询。
二、post请求，后台往往都是有对象跟着的，数据数据之间有关系，能够封装成对象。
标签：username,01,王佳齐,xhr,ajax,第四组,data,post,请求 From： https://www.cnblogs.com/yiboxh-10000/p/16647505.html