Ajax(异步无刷新技术)
1. 基本概念
1.1同步
定义:发送请求后,一直等待服务端的响应,获取到服务端响应,再执行其他的逻辑代码。
解释:同步就是我们去做一件事,做完后再去做下一件事,比如我们洗衣服,我们只有等洗衣机洗完甩干才能去晾衣服,这就是同步的概念。
1. 2异步
定义:发送请求后,不需要等待服务端的响应,继续按照顺序执行其他逻辑代码,监听到响应,自动调用指定的方法。
解释:异步是我们再做一件事的时候还可以做其他事情,不必等待上一件事的完成,就比如我们洗上衣服,我们可以去拖地做饭,当衣服洗完后我们再去处理衣服,这就是异步的概念
1.3无刷新
我们访问一个新的界面资源时这个界面加载完成后,我们进行DOM操作后会刷新整个界面,
而我们使用Ajax技术,比如我们进行的查看结果等操作,它把DOM操作返回的结果拼在了界面后面显示,不需要刷新整个界面,这样不仅速度快,而且不需要重新加载界面。
2.Ajax的基本使用
2.1 经典的四步走
- 创建Ajax请求对象
- 建立连接
- 发送连接
- 监听状态变化及结果处理
<script>
$(function () {
$("#a").click(function () {
//1.创建ajax请求对象,该对象可以向服务端发起请求
var xhr = new XMLHttpRequest();
console.log(xhr);
//2.开启连接
xhr.open("get", "testServlet");
console.log(xhr);
//3.发起请求
xhr.send();
//4.监听就绪状态的变化,就绪状态发生变化会被监听,自动调用指定的function
xhr.onreadystatechange = function (ev) {
console.log(xhr);
};
});
})
</script>
2.2 Ajax的就绪状态
Ajax既然是异步请求,那么我们如何去判断它是否完成了响应,可以返回结果了呢,这就需要它的就绪状态了。
在ajax对象中提供了一个监听机制 “onreadystatechange”,用来监听ajax的属性readyState的改变情况,一旦该值改变,就会触发监听中的函数的执行。
readyState的值表示的含义:
-
0:请求没有开启(在调用open()之前)
-
1:请求已经建立但是还没有发出(调用send()之前)
-
2:请求已经发出,服务器正在处理
-
3:请求已经处理,响应中有数据可用,但是服务器还没有完全响应完
-
4:响应已经完成,浏览器已经接收到全部的响应内容
对我们来说,我们应该关注的是readyState是4时候的情况。
2.3Ajax请求的响应状态
通过对ajax的就绪状态做判断,我们在就绪状态是4的情况下编写我们的对响应结果的处理逻辑代码,但是不是任何响应结果我们都要处理,因为服务器的响应也有状态码,比如:200、404、500等等。
所有我们在ajax中编写响应结果处理时,也必须考虑响应状态码
我们所需要做的就是在监听时判断它的就绪状态和响应状态
//4.监听就绪状态的变化,就绪状态发生变化会被监听,自动调用指定的function
xhr.onreadystatechange = function (ev) {
if(xhr.readyState==4 && xhr.status==200){
//console.log(xhr);
//获取响应的数据
var responseText = xhr.responseText;
console.log(responseText);
//完成页面的局部刷新
$("#pp").html(responseText);
$("#a").remove();
jQuery封装的Ajax
jQuery调用ajax的方法
格式:$.ajax( { } );
参数:
type:请求方式,GET/POST
url:请求地址
asunc:是否异步,默认是true是异步
data:发送到服务器的数据
datatype:语气服务器返回的数据类型
contentType:设置请求头
success:function()请求成功时调用此函数
error:请求失败时调用此函数