1.Ajax
- 异步刷新(局部刷新)，前端技术。给后台发请求
- 异步：整个页面不会全部刷新，只有某个局部在刷新。
- 例如：验证用户名是否存在
- 刷新：
- 请求体
- post请求才有请求体
- Ajax发起请求，后台给出的响应会回到Ajax的响应处理函数中
2. JS原生的Ajax
2.1 readyState状态码
- 0--------------xhr被创建成功，open方法未调用
- 1--------------open被调用，建立的连接
- 2--------------send被调用，可以获取状态行和响应头
- 3--------------可以拿到响应体，响应体加载中
- 4--------------响应体下载完成，可以直接使用responseText
2.2 GET请求
// 向后台发请求
// 使用ajax
let xhr=new XMLHttpRequest();
// 设置请求的方式和URL
xhr.open("GET","hello?username="+user);
// 发请求
xhr.send(null);
// 指定xhr的状态处理函数
xhr.onreadystatechange=function () {
if (this.readyState === 4){
// 通过xhr的responseText获取到对应的响应体
span.innerText=xhr.responseText;
}
};
2.3 POST请求
// 向后台发请求
// 使用ajax
let xhr=new XMLHttpRequest();
// 发送POST请求
xhr.open("POST","hello");
// 设置请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发请求,设置请求体
xhr.send("username="+user);
// 指定xhr的状态处理函数
xhr.onreadystatechange=function () {
if (this.readyState === 4){
// 通过xhr的responseText获取到对应的响应体
span.innerText=xhr.responseText;
}
};
3. JQuery的Ajax
3.1发送GET请求
$.get("hello?username=" + user, function (data) {
alert(data)
});
3.2发送POST请求
$.post("hello","username=" + user, function (data) {
alert(data)
});
4.Vue的Ajax（aixos）
对原生的Ajax的一个封装
ES6的：Promise语法
4.1GET请求
- aixos发送GET请求，这个请求中如果有参数，还是一个默认的以文档流的形式发送，和之前的任何一种请求方式没有任何区别。
get:function(){
axios.get("wea?city="+this.city).then(function (response) {
app1.msg2=response.data;
});
},
4.2POST请求
- aixos发送POST请求，这个请求中如果有参数，会把请求体转成json串，然后发给后台
post:function(){
axios.post("wea",{"city":this.city}).then(function (response) {
app1.msg2=response.data;
})
},
【封装对象的前提：json串中的数据的key和对象的属性名要一致】
注意点
- 使用Ajax发送请求，页面是不可以通过后台来跳转的-----如果需要跳页面也是通过前端的js来跳转，不可能通过servlet来跳转
- Ajax和form表单不能同时使用
- Ajax：不跳页面
- form表单：一定会跳页面
4中发请求的方式
- 地址栏
- a标签
- form表单
- windows.open和location.href
