Ajax（异步无刷新技术）

Ajax（异步无刷新技术）

1. 基本概念

1.1同步

定义：发送请求后，一直等待服务端的响应，获取到服务端响应，再执行其他的逻辑代码。
解释：同步就是我们去做一件事，做完后再去做下一件事，比如我们洗衣服，我们只有等洗衣机洗完甩干才能去晾衣服，这就是同步的概念。

1. 2异步

定义：发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。
解释：异步是我们再做一件事的时候还可以做其他事情，不必等待上一件事的完成，就比如我们洗上衣服，我们可以去拖地做饭，当衣服洗完后我们再去处理衣服，这就是异步的概念

1.3无刷新

我们访问一个新的界面资源时这个界面加载完成后，我们进行DOM操作后会刷新整个界面，
而我们使用Ajax技术，比如我们进行的查看结果等操作，它把DOM操作返回的结果拼在了界面后面显示，不需要刷新整个界面，这样不仅速度快，而且不需要重新加载界面。

2.Ajax的基本使用

2.1 经典的四步走

1. 创建Ajax请求对象
2. 建立连接
3. 发送连接
4. 监听状态变化及结果处理

<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：请求失败时调用此函数

如果你有任何问题、意见或建议，都欢迎在评论中分享。让我们继续分享知识，共同成长，一起走向更加美好的未来。感谢你们的阅读，祝愿你们在未来的道路上一帆风顺！