笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

AJAX常用库

JQ中的ajax

www.w3school.com.cn/jquery/jque…

$ajax方法

语法：$ajax( 配置参数对象 )

常用配置参数

url：请求地址
type：请求方法，默认get
dataType：服务器响应数据类型，常用json
contentType：请求体的内容，默认application/x-www-form-urlencoded，一般不需要设置
data：需要传递给服务器端的数据（传递对象即可），get通过url传递，post通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功后触发（响应状态码200），jq会把数据转换成对象格式
error：请求失败触发
complete：请求完成触发（不管成功与否）

$.ajax({
  url: 'http://localhost:3000/students',
  type: 'get',
  dataType: 'json',
  data: {
    id: 1
  },
  success: function (data) {
    console.log(data)
  }
})

$.get()方法

直接使用get方法请求数据

常用语法：$.get( 地址，数据对象，回调函数 )

语法中还有其他参数，可以参考文档

$.get('http://localhost:3000/students', {
  id: 1
}, function (data) {
  console.log(data)
})

$.post()方法

直接使用post方法请求数据

常用语法：$.post( 地址，数据对象，回调函数 )

语法中还有其他参数，可以参考文档

$.post('http://localhost:3000/students', {
  name: "zs",
  age: 19,
  sex: 1
}, function (data) {
  console.log(data)
})

其他请求类型

put-更改
delete-删除

两种请求没有单独的方法，在jq中只能使用$.ajax方法

$.ajax({
  // 直接把要修改的项的id写在url上
  url: 'http://localhost:3000/students/1',
  type: 'put',
  dataType: 'json',
  data: {
    // data里面写修改后的内容，注意 这里不知是要写修改的内容，没有修改的内容也要写
    name: "cwn",
    age: 20,
    sex: 1
  },
  success: function (data) {
    console.log(data)
  }
})

$.ajax({
  // 同样把要删除的项写在url上即可
  url: 'http://localhost:3000/students/3',
  // 直接写delete
  type: 'delete'
  //后面不需要写别的了
})

其他ajax方法

www.w3school.com.cn/jquery/jque…

很少使用，可以在手册上自学

Axios库

官网地址：www.axios-js.com/

应用最广泛的ajax封装库，在html可以使用在线地址建议使用<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>因为官网的连接好像有点问题

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

暴露了一个全局的axios变量，可以调用上面的方法

// 体验get，直接传入地址即可
axios.get('http://localhost:3000/students')
// 访问成功执行这个函数，参数是一个对象，里面的data才是我们想要的数据
  .then(function (response) {
    console.log(response)
    console.log(response.data)
  })
  // 访问失败执行这个函数。参数是错误信息
  .catch(function (error) {
    console.log(error)
  })

Axis API

axios可以单独作为方法来调用，直接传入参数创建请求

语法：axios( 配置选项对象 )/( url，配置选项对象（可选） )

常用配置项

url：请求地址，必须
method：创建请求时使用的方法
baseURL：相对URL前缀，自动添加在url前面，url每次就不需要写全
headers：即将被发送的自定义请求头，默认json方式
params：与请求头一起发送的参数，可防止直接写在url上面的后缀
data：post发送的数据，严格对应请求头，如果请求头是url需要使用字符串
timeout：超时时间，0表示无超时时间
responseType：服务器响应数据类型，默认json

axios({
  // 请求地址，因为后面有了baseURL这里就不需要写全
    url: 'students',
    // 请求方法
    method: 'post',
    // 请求地址前缀，会和url进行拼接
    baseURL: 'http://localhost:3000/',
    // 设置请求头，这里设置成url格式，默认json格式
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    // post中用不到，这里的数据会拼接到URL上
    // params:{id:1},
    // 请求发送的数据数据，因为上面设置了请求头是url格式，所以这里必须写成字符串
    data: 'name=lili&age=20&sex=1',
    // 超时时间0表示没有超时时间
    timeout: 0,
    // 返回数据格式，默认就是json
    responseType: 'json'
  })
  // 访问成功回调函数方法
  .then(function (ser) {
    console.log(ser.data)
  })

全局设置默认项

指定全局的axios配置项的默认值，以后再想设置相同值的时候就不需要设置了

最常用的两个默认值

axios.defaults.baseURL = ................
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

axios方法参数

axios的另一种调用方法，可以不填写配置项，只填写url地址即可，这时候配置项全部使用默认，方法默认get

// 体验get，直接传入地址即可
axios('http://localhost:3000/students')
// 访问成功执行这个函数，参数是一个对象，里面的data才是我们想要的数据
  .then(function (response) {
    console.log(response)
    console.log(response.data)
  })
  // 访问失败执行这个函数。参数是错误信息
  .catch(function (error) {
    console.log(error)
  })

如果还想配置一些配置项可以写在第二个参数里面

axios拦截器

在请求或者响应被then和catch处理前拦截它们先进行一些处理

// 拦截器，在请求之前设置配置项
axios.interceptors.request.use(function (config) {
  // 设置配置项
  config.baseURL = 'http://localhost:3000'
  // 输出配置项，后面的axios会直接使用这个配置项
  return config
})
// 拦截器，在响应之后then之前处理数据
axios.interceptors.response.use(function (res) {
  // 输出response
  return res.data
})
// axios访问
axios('/students')
  .then(function (res) {
    // 前面拦截了数据并输出了data，这里直接使用参数即可
    console.log(res)
  })

快速请求方法

axios.get( url地址，参数配置-可选 )
axios.post( url地址，添加的数据对象，参数配置-可选 )
axios.delete( url地址，参数配置-可选 )
axios.put( url地址，修改的数据对象，参数配置-可选 )

XHR-2.0的onload和onprogress事件

ES5中对XMLHttpRequest类进行了全面升级，更易用强大

xhr.onload事件：在请求完成时触发
- 有了onload事件就不需要再监听xhr的readyState变化
xhr.onprogress事件：在请求进行中触发
- 触发时间为readyState数值为3的时候
- xhr.onprogress事件有一个事件源，事件源有两个属性
  - e.loaded：当前已经接受的数据的个数
  - e.total：需要接收数据的总个数

XHR-2.0的response和responseType属性

XHR-respenseType属性

我们可以在open和send之间设置xhr的respenseType属性值，属性值代表数据获取成功后返回的数据类型（原始获取的数据会被转换成respenseType值的类型）

例如我们设置respenseType:json，程序就会返回一个json的对象给我们

XHR-respense属性

respenseType属性返回的值会存在XHR-respense属性中，我们使用的时候直接调用XHR-respense属性即可，就不需要再调用this.responseText了

AJAX常用库-jquery和Axios