ajax和axios使用和方法

心里最崇拜的那个人，不必变成那个人，而是用那个人的精神和方法，去变成你自己
----本文来自拉勾大前端

Ajax

• AJAX就是浏览器提供的一套API,可以通过javascript调用，从而实现代码控制请求与响应，通过javascript进行网络编程

  // jQuery 中的 Ajax 方法
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    type: "GET",
    dataType: "json",
    data: {"id": 1},
    success: function (data) {
      // 使用请求成功的数据
      console.log(data);
    }
  })
  

ajax请求

• 创建XMLHttpRequest类型的对象
• 准备发送，打开与网址之间的连接
• 执行发送动作
• 指定xhr状态变化事件处理函数

  // 1.创建一个 XMLHttpRequest 类型的对象  --- 相当于打开了一个浏览器
  var xhr = new XMLHttpRequest();
  // 2.打开一个与网址之间的连接  --- 相当于在地址栏输入网址
  xhr.open("GET","https://jsonplaceholder.typicode.com/users");
  // 3.通过连接发送一次请求 --- 相当于点击回车或者超链接
  xhr.send(null);
  // 4.指定 xhr 状态变化事件处理函数   --- 相当于处理网页呈现后的操作
  xhr.onreadystatechange = function () {
    // 通过判断 xhr 的 readyState ，确定此次请求是否完成
    if (this.readyState === 4) {
      console.log(this.responseText)
    }
  }
  

原生Ajax详解

• readyState属性：readyState属性返回一个XMLHttpRequest代理当前所处的状态，由于readystatechange事件是在xhr对象状态变化时触发
  • 0：代理XHR被创建，但尚未调用open()方法
  • 1：open()方法已经被调用，建立了连接
  • 2：send()方法已经被调用，并且已经可以获取状态行和响应头
  • 3：响应体下载中，responseText属性可能已经包含部分数据
  • 4: 响应体下载完成，可以直接使用responseText

// 1.创建一个 XMLHttpRequest 类型的对象 
var xhr = null;
// 兼容写法
if (window.XMLHttpRequest) {
  // 标准浏览器
  xhr = new XMLHttpRequest();
} else {
  // IE 6 浏览器
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.open() 方法开启请求
// xhr.open("GET","https://jsonplaceholder.typicode.com/users?id=1");
xhr.open("POST","https://jsonplaceholder.typicode.com/users");
// 设置请求头
// 一般 get 方法不需要设置，而 post 方法必须设置
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3.send() 方法发送一次请求
// 如果是 get 方法请求，不需要再 send 中传参数，它如果想传参数，直接写在网址上
// xhr.send(null);
xhr.send("name=harry&age=19");

xhr.onreadystatechange = function () {
  // 通过判断 xhr 的 readyState ，确定此次请求是否完成
  if (this.readyState === 4) {
    console.log(this.responseText)
  }
}

同步和异步

• xhr.open()方法第三个参数要求传入一个boolean值，作用就是设置此次请求时否采用异步方式执行
• 默认为true异步，如果需要同步执行可以通过传递false实现
• 如果采用同步方式执行，则代码会卡死在xhr.send()
• 建议：为了让这个事件可靠，在发送请求send()之前，一定是先注册readystatechange

数据格式

• XML数据类型（淘汰）
• JSON数据类型
  • JSON数据不需要存到变量中
  • 结束不需要写分号
  • JSON数据中属性名必须加引号
• 使用json对象的parse方法可以将字符串转换成对象格式

  //可以通过这种方法将获得的json数据转换成字符串
  var strObj = JSON.parse(str);
  console.log(strObj.name)
  

json-server

• 方便我们自己上传json数据，需要在本地搭建一个临时服务器
• json-server是一个Node模块，运行Express服务器，你可以指定一个json文件作为api的数据源
• 网址:https://github.com/typicode/json-server
• 命令行输入：json-server --watch 文件名.json

原生Ajax--GET请求

var xhr =new XMLHttpRequest();
//发送get请求
//在open中传参
xhr.open("GET","http://localhost:3000/posts?id=1");
xhr.send(null);
xhr.onreadystatechange = function(){
  if(this.readyState === 4){
    console.log(this.responseText);
  }
}

原生Ajax--POST请求

• post请求过程中，都是采用请求体承载需要提交的数据
• 需要设置请求头中的content-type，以便于服务端接收数据
• 需要提交到服务端的数据可以通过send方法的参数传递

  var xhr = new XMLHttpRequest();
  //POST请求
  xhr.open("POST","http://localhost:3000/posts");
  //post要设置请求头
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  //向服务器添加数据
  // xhr.send("age=19")
  xhr.send(JSON.stringify({
    "name": "dxa",
    "age": 18,
    "class": "lagou"
  }))
  // xhr.send({"age":19})
  xhr.onreadystatechange = function(){
    if(this.readyState === 4){
      console.log(this.responseText)
    }
  }
  

封装AJAX函数

// 封装自己的 Ajax 函数
/**
  * 参数1：{string}    method  请求方法
  * 参数2：{string}    url     请求地址
  * 参数3：{Object}    params  请求参数
  * 参数4：{function}  done    请求完成后执行的回调函数
*/ 
function ajax(method, url, params, done) {
  // 统一将方法中的字母转大写，便于后面判断
  method = method.toUpperCase();
  // 书写 IE 6 的兼容
  var xhr = window.XMLHttpRequest  
  ? new XMLHttpRequest() 
  : new ActiveXObject("Microsoft.XMLHTTP");
  // 将对象格式的参数转为 urlencoded的格式
  var pairs = [];
  for (var k in params) {
    pairs.push(k + "=" + params[k]);
  }
  var str = pairs.join("&");
  // 判断是否是 get 方法，需要更改 url 的值
  if (method === "GET") {
    url += "?" + str;
  }
  // 创建打开一个连接
  xhr.open(method, url);
  var data = null;
  // 如果是 post 方法，需要设置请求头，还有请求体
  if (method === "POST") {
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    data = str;
  }
  xhr.send(data);
  // 执行回调函数
  xhr.onreadystatechange = function () {
    if (this.readyState !== 4) return;
    // 执行外部传进来的回调函数即可
    // 需要用到响应体
    done(JSON.parse(this.responseText));
  }
}
// 调用函数
ajax("GET", "http://localhost:3000/users",{"id": 1},function (data) {
  console.log(data);
});
ajax("POST", "http://localhost:3000/users",{"name": "john","age": 19,"class": 2},function (data) {
  console.log(data);
});

jQuery中ajax

$.ajax()

• url: 请求地址
• type: 请求方法，默认为get
• dataType: 服务端响应数据类型
• contentType: 请求体内容类型，默认application/x-www-form-urlencoded
• data: 需要传递到服务端的数据
• timeout: 请求超时时间
• beforeSend: 请求发起之前触发
• success: 请求成功之后触发
• error: 请求失败触发,比如请求地址错误
• complete: 请求完成触发

  $.ajax({
    url: "http://localhost:3000/posts",
    type: "get",
    dataType: "json",
    // data: {"id": 1},
    beforeSend: function(xhr){
      console.log("before send");
    },
    success: function(data){
      console.log(data);
    },
    complete: function(xhr){
      console.log(xhr.status)
    }
  })
  

$.get()

• get请求的快捷方式
• $.get(url,data,callback)

  $.get("http://localhost:3000/posts",{},function(data){
    console.log(data)
  })
  

$.post()

• post请求的快捷方式,添加数据的方式

 $.post("http://localhost:3000/posts",{"name": "dxa"},function(data){
   console.log(data)
 })

其他数据类型

// put 请求，更改数据
$.ajax({
  url: "http://localhost:3000/comments/4",
  type: "put",
  dataType: "json",
  data: {"content": "good", "postId": 2},
  success: function (data) {
    console.log(data)
  }
})
// delete 请求，删除数据
$.ajax({
  url: "http://localhost:3000/comments/5",
  type: "delete",
  success: function (data) {
    console.log(data)
  }
})

Axios

• Axios是目前应用最为广泛的AJAX封装库
• 线上文件：https://unpkg.com/axios/dist/axios.min.js
• 参考文档：http://axios-js.com/zh-cn/docs/

Axios API

• 可以通过向axios()传递相关配置来创建请求
• axios(config) config为对象格式的配置选项
• axios(url,config) config可选

常用配置选项

• url 用于请求服务器的URL
• method 创建请求时使用的方法
• baseURL 传递相对URL前缀，将自动加在url前面
• headers 即将被发送的自定义请求头
• params 即将与请求一起发送的URL参数
• data 作为请求主体被发送的数据
• timeout 请求超时的毫秒数
• responseType 表示服务器响应的数据类型，默认json

  axios({
    url: "/posts",
    method: "get",
    baseURL: "http://localhost:3000",
    params: {
      id: 1
    }
  }).then(function(res){
    console.log(res.data)
  })
  

全局默认配置

• 可以指定将被用在各个请求的配置默认项
• 利用axios.defaults修改全局变量

  // 全局配置默认值
  axios.defaults.baseURL = "http://localhost:3000";
  

onload/onprogress

• xhr.onload事件：只在请求完成时触发
• xhr.onprogress事件： 只在请求进行中触发

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
xhr.onload = function () {
  console.log("load",this.readyState)
}
xhr.onprogress = function (e) {
  console.log("progress",this.readyState)
  // 在周期性请求过程中，接收到的数据的个数
  console.log(e.loaded);
  // 接收数据的总个数
  console.log(e.total);
}
xhr.send(null);

response属性

• 以对象的形式表述响应体，其类型取决于responseType的值
• responseType要在调用open()初始化请求之后