js中的ajax

矫情吗；* 2022-12-02 15:06 169阅读 0赞

# js中的ajax #

### 一、简介 ###

**百科词条：**  
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。  
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

**个人理解：**  
ajax是异步的JavaScript和XML。用来进行异步请求。浏览器可以向服务器发送一个ajax请求，进行页面的局部刷新。异步概念就是请求可以理解为运行在浏览器后端的一个服务，不影响浏览器的正常工作

### 二、工作原理 ###

![在这里插入图片描述][20200831171318720.gif_pic_center]

### 三、ajax的使用 ###

**原生的ajax：**

1.  实例化XMLHttpRequest

var xhr = new XMLHttqRequest();

1.  初始化请求行

xhr.open(method,url,async);

1.  设置请求头

xhr.setRequestHeader(k,v)

**注**： 如果是get方式，无需设置Content-Type,因为Content-Type请求体中数据编码格式

1.  设置请求体，并且发送请求

xhr.send(data)

**注**：如果是get方式，无需设置data

1.  监听请求状态的改变，来获取结果

xhr.onreadystatechange = function(){
          if(xhr.readystate === 4){
            if(xhr.status === 200){
              // 获取结果
              xhr.response    // string -> json 、JSON.parse();
            }
          }
        }

扩展：  
1）.status  
响应状态  
200 ok  
404 not found  
500 服务接口出错  
401 未授权  
403 被拒绝，无权访问

2）.readystate：表示xhr的状态  
0 UNSENT 代理被创建，但尚未调用 open() 方法。  
1 OPENED open() 方法已经被调用。  
2 HEADERS\_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。  
3 LOADING 下载中； responseText 属性已经包含部分数据。  
4 DONE 下载操作已完成。

**jQuery封装的ajax：**

1.  底层接口

$.ajax({
        url:'', // 请求地址
        method: 'GET', // 请求方式
        data:{},
        success: function(a){
            // 成功的回调函数
        },
        error:function(err){
            // 失败的回调函数
        }
    })

1.  快捷方式

$.get(url,data,function(){})
        $.post(url,data,function(){})

1.  全局设置

ajaxSetup()

[20200831171318720.gif_pic_center]: /images/20221123/a0572e4455fa4411a267b63c40f3632c.png