ajax介绍
局部刷新技术，可以在不重新加载整个页面的情况下，针对局部的内容进行更新。
传统请求：浏览器会将服务器的响应显示的浏览器的页面中
ajax请求：浏览器只负责接受服务器给出的响应，但是浏览器不做任何处理。
ajax请求的应用场景：一个网站的所有请求都可以采用ajax请求。
原生js的ajax请求（理解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="js_ajax" onclick="js_ajax()"><br>
<span id="mySpan" style="color: red">此处用来显示服务器响应的数据</span>
</body>
<script>
function js_ajax() {
//创建ajax引擎对象
let request = new XMLHttpRequest();
//绑定onreadystatechange事件，作为响应成功时的回调函数
/**
*
* readystate:
* HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，
* 这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
status : http协议响应的状态码
200：表示ok
404： 表示 找不到资源
302：表示重定向的
responseText ： 服务器给出的响应体
*/
request.onreadystatechange=function () {
//响应成功的回调函数
if(request.readyState==4&&request.status==200){
//获取响应体
let responseText = request.responseText;
//dom操作
document.getElementById("mySpan").innerHTML=responseText;
}
}
//通过open方法设置请求的参数
/**
* method:请求的方式
* url:请求的地址
* async:是否异步，true表示异步
*
*/
request.open("get","demoServlet",true);
//通过send方法发送请求
request.send();
}
</script>
</html>
同步异步
同步：浏览器在还没有接受到服务器给出的响应时，浏览器处于卡死的状态。无法进行其他操作。 （java单线程）
异步：浏览器在还没有接收到服务器的响应时，浏览器的任何其他操作照样执行，不受任何影响。(ajax请求是子线程去发送的。)
企业开发：基本使用异步。
jquery的ajax
注意：需要引入jquery文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="jquery_get" onclick="jquery_get()"><br>
<input type="button" value="jquery_post" onclick="jquery_post()"><br>
<input type="button" value="jquery_ajax" onclick="jquery_ajax()"><br>
<span id="mySpan" style="color: red">此处用来显示服务器响应的数据</span>
</body>
<script src="js/jquery-2.1.0.js"></script>
<script>
function jquery_get() {
$.get("demoServlet",{"username":"zhangsan"},function (data) {
//将响应体设置到myspan中
document.getElementById("mySpan").innerHTML=data;
});
}
function jquery_post() {
$.post("demoServlet",{"username":"zhangsan"},function (data) {
//将响应体设置到myspan中
document.getElementById("mySpan").innerHTML=data;
});
}
function jquery_ajax() {
$.ajax({
url:"demoServlet",
data:{
"username":"lisi"
},
async:true,
type:"get",
success:function (res) {
//请求成功的回调函数，参数就是响应体
document.getElementById("mySpan").innerHTML=res;
}
});
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
this指代当前标签对象
-->
用户名: <input type="text" value="" name="username" onblur="validateUsername(this.value)">
<span id="myspan"></span>
</body>
<script src="js/jquery-2.1.0.js"></script>
<script>
function validateUsername(username) {
//document.getElementById("").value;
$.ajax({
url:"validateUsername",
data:{
"username":username
},
success:function (res) {
//console.log(typeof(res)+":"+res);
//这是请求成功的回调函数，res是响应体
let myspan = document.getElementById("myspan");
if(res=="true"){
//校验成功
//设置标签的文本值
myspan.innerHTML="用户名可用";
//修改css样式
myspan.style.color="green";
}else if(res=="false"){
//校验失败a
//设置标签的文本值
myspan.innerHTML="用户名已存在";
//修改css样式
myspan.style.color="red";
}
}
});
}
</script>
</html>