Ajax相关(原生ajax，jQuery中ajax，axios)

Posted 2020-11-26 itxcr

1. get和post请求

• 从服务端获取数据：get请求
  • 请求参数在地址栏中以urlencoded形式显示
  • 格式：username=xcr&userAge=18
  • 通过location.search可获取当前地址栏中 ? 及其后面的请求参数内容
  • 可发送 2kb左右的数据
  • 只能发送文本形式的数据
  • get请求可以被缓存，将地址保存，这个请求所携带的请求参数都将被保存
• 给服务端发送数据：post请求
  • post请求的参数在请求体中，不会在地址栏中体现，发送一些隐私数据时使用post请求发送，相对get请求来说安全一些，但不是绝对安全
  • 可发送数据理论上没有限制
    • 实际上会受服务端的限制
  • 可发送的数据类型不限，如果需要发送文件，只能使用post请求发送
  • post请求无法被缓存

2. jQuery中$.ajax的get和post请求发送的方式

$.ajax({
  type: ,  //请求方式
  url: ,   //请求的接口地址
  data: ,    //请求参数：data是一个对象
  success: function(res){
  //请求成功后执行的函数
  }
})

3. jQuery中的$.get和$.post的使用

$.get({
  url: 'http://localhost:8080/common/get',
  data: {
    username: 'xcr',
    userAge: 18,
    password: 123456,
    gender: '男'
  },
  success: function(res) {
    console.log(res)
  }
});

$.post({
  url: 'http://localhost:8080/common/post',
  data: {
    username: 'xcr',
    userAge: 18,
    password: 123456,
    gender: '男'
  },
  success: function(res) {
    console.log(res);
  }
});

• 这两种书写方式是$.ajax的快捷方式

• 在发送简单请求时会使用如下方式

  $.get('http://localhost:8080/common/get',
        function(res) {
            console.log(res);
  })
  

4. FormData对象的使用

• 用来对表单数据进行处理的一种方式，可自己随意添加数据

// 创建一个FormData对象，参数为DOM对象形式的form标签
var fd = new FormData($('#form')[0]);
// fd中包含了form中所有数据
// 如果想查看数据，可使用get方式指定查看 
// fd.get(表单元素的name)
// 添加表单元素以外的数据
// fd.append('参数名',’参数值);
fd.append('Subject', 'vue');
// 通过ajax将fd发送给服务端
// 要使用post形式发送
$.ajax({
  type: 'post',
  url: 'http://localhost:8080/common/post',
  data: fd,
  // 使用jQuery发送FormData对象，必须设置以下属性，让jQuery不处理fd这个对象
  contentType: false,
  processData: false,
  success: function(res) {
    console.log(res);
  }
})

• 通过FormData进行文件上传

  //设置input[type=file]的name属性值必须跟接口一致
  //请求发送
  $.ajax({
    type: 'post',
    url:'http://localhost:8080/formData/upload',
    data: new FormData($('#form')[0]),
    contentType: false,
    processData: false,
    success: function(res) {
      console.log(res);
    }
  })

5. 原生ajax的使用方式

// 初始化一个请求，调用xhr.open();
var xhr = new XMLHttpRequest();
// get请求需要在url后自行拼接get请求的参数，使用？连接
// 形式为urlencoded：'名1=值1&名2=值2';
xhr.open('get', '请求地址');
// 发送请求 调用xhr.send()；异步任务
xhr.send();
// 响应处理部分
// 通过事件来检测ajax的进行状态,readyState是xhr的属性，用来表示ajax操作的状态, readyState属性的值是数值类型
// 0  初始化阶段,1  建立了连接,2  请求已经发送, 3  下载中, 4  下载完毕
// 必须确保readyState属性的值为4，才可以使用响应体的数据
// 原生js不会自动识别服务端响应的JSON格式的数据，需要手动转换
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    console.log(xhr.responseText);
    // 将json格式字符串转换为js数据
    console.log(JSON.parse(xhr.responseText));
  }
}

5.1 原生Ajax的get请求操作方式

var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:8080/common/get?username=xcr');
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    console.log(xhr.responseText);
    console.log(JSON.parse(xhr.responseText));
    console.log(xhr.getAllResponseHeaders());
    console.log(xhr.getResponseHeader('Content-Type'));
   }
};

5.2 原生post请求的发送方式

// 初始化
var xhr = new XMLHttpRequest();
// 建立连接  调用open()参数1：请求方式 参数2： 请求的url地址
xhr.open('post', '请求地址');
// 发送请求： 调用send() 请求参数传入到send()的参数中，参数格式为urlencoded
// 由于post请求参数不在url中传递，需要给服务器发送一些额外的数据，即请求头
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('username=xcr&userAge=18');
// 进行响应的相关处理
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) {
    // indexOf() 方法对大小写敏感！如果要检索的字符串值没有出现，则该方法返回 -1。
    // 如果indexOf()的值不返回-1，则说明判断的子串存在，就要做JSON.parse转换
    if(xhr.getResponseHeader('Content-Type').indexOf('json') !== 1) {
      console.log(JSON.parse(xhr.responseText));
    } else {
        console.log(xhr.responseText);
    }  
  }
}

6. 检测服务端响应的内容类型

• 服务端的响应信息中除了有主要的数据外，还有一些额外信息，称为Response Headers响应头

• 获取响应头的信息，可使用以下方法

  //获取所有响应头信息
  xhr.getAllResponseHeaders();
  //常用，获取某个响应头的信息
  xhr.getResponseHeader('传入某个具体的响应头的名称')
  

• 可以通过判断Content-Type中是否是json的内容类型，从而设置对应的转换操作

7. 封装ajax相关函数

• 封装数据处理函数