ajax技术知识总结

简述

ajax（Asynchronous JavaScript and XML）是一种异步的JavaScript和XML技术。可以使网页实现异步更新，即在不重新加载整个页面的情况下， 与服务端进行少量数据交换，对网页的某部分内容进行更新。

创建对象

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

XMLHttpRequest对象属性

XMLHttpRequest对象方法

请求

xhr.open('GET', 'http://127.0.0.1:3000/', true)

open()方法参数详解如下：

• method：请求的类型，值为GET或POST
• url：文件在服务器上的位置
• async：设置请求方式，true同步，false异步

GET请求速度较快，但以下场景建议使用POST请求：

• 向服务器发送大量的数据（POST请求没有长度限制）
• 发送用户输入的字符场景

响应

发送请求后，需要等待服务器处理并返回数据。

基本使用

// 1. 创建xhr对象
var xhr = new XMLHttpRequest();
// 2. 获取请求信息
xhr.open('GET', 'http://127.0.0.1:3000/', true)
// 3. 发送请求
xhr.send();

// 4. 获取响应结果
xhr.onreadystatechange = function () {
  // 只有当readyState为4，且status等于200 才是成功的响应结果
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 响应成功
    console.log('res', xhr.responseText);
  }
}

jQuery中的Ajax

浏览器提供的 XMLHttpRequest 用法比较复杂，所以jQuery对其进行了封装，提供一系列 Ajax 的函数，极大的降低了 Ajax 的使用难度。

$.get()

功能单一，只能发起 get 请求，从而将服务器上的资源请求到客户端上来使用。

$.get(url, [data], [callback])

参数详解

• url string，必选，要请求的资源地址
• data object，否，请求资源时携带的参数
• callback function，否，请求成功时的回调函数

$.post()

功能单一，只能发起 post 请求，从而向服务器提交数据。

$.post(url, [data], [callback])

参数详解

• url string，必选，提交数据的地址
• data object，否，要提交的数据
• callback function，否，请数据提交成功的回调函数

$.ajax()

功能综合，允许对 Ajax 请求进行更详细的配置。

$.ajax({
  type: '', // 请求的方式，例如 GET 或 POST
  url: '', // 请求的 URL 地址
  data: { }, // 请求携带的参数
  success: function(res) { } // 请求成功之后的回调函数
})

示例如下：

// $.get请求不携带参数的情况
$.get('https://api.thecatapi.com/v1/images/search', function (res) {
  console.log(res)
})
// $.get请求携带参数的情况
$.get('https://api.thecatapi.com/v1/images/search', { limit: 10 }, function (res) {
  console.log(res)
})

// $.ajax发送get请求
$.ajax({
  type: 'GET',
  url: 'https://api.thecatapi.com/v1/images/search',
  data: { limit: 10 },
  success: function (res) {
    console.log(res)
  }
})

// $.ajax发送post请求
$.ajax({
  type: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: 'foo',
    body: 'bar',
    userId: 1,
  },
  success: function (res) {
    console.log(res)
  }
})

axios

专注于网络数据请求的库。

优势：

1. 相比于原生的 XMLHttpRequest 对象，axios简单易用；
2. 相比于 JQuery，axios 更加轻量化，只专注于网络数据请求。

axios 发起 GET 请求

axios.get('url', { params: { 参数 } }).then( callback )

axios 发起 POST 请求

axios.post('url', { params: { 参数 } }).then( callback )

直接使用 axios 发起请求

post数据需要通过data属性提供

// 直接使用axios发送请求
// 1. 发送GET请求
axios({
  method: 'get',
  url: 'https://api.thecatapi.com/v1/images/search',
  params: {
    limit: 3,
  }
}).then(function (res) {
  console.log(res)
})

// 2. 发送post请求
axios({
  method: 'post',
  url: 'https://jsonplaceholder.typicode.com/posts',
  data: {
    title: '中国',
    body: 'bar',
    userId: 1,
  }
}).then(function (res) {
  console.log(res.data)
})