AJAX和AXIOS

AJAX：是网页中使用XMLHttpRequest（简写xhr）对象和服务器进行数据交互的方式。可以实现异步通信的效果，页面局部刷新。有三种请求方式，get请求，post请求，ajax请求。

xhr发起GET请求步骤：
 // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }
xhr发起POST请求步骤：
// 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3. 设置 Content-Type 属性
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数（在这里添加参数）
    xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
    // 5. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }

AXIOS：是网络数据请求的一个库，相对XMLHttpRequest对象，axios更简单易用，更专业。相比JQ，axios更加轻量化，只专注于网络数据请求。
axios 发起 get 请求的语法：
具体的请求示例如下：
axios.get( url , { params: { /*参数*/ } } ).then(callback)
axios.get( url?a=1&b=2 ).then(callback)

document.querySelector('#btn1').addEventListener('click',function(){
     var url = 'http://www.liulongbin.top:3006/api/get'
     var obj = {name:'zs',age:'20'}
     axios.get(url,{params:obj}).then(function(res){
       console.log(res.data);
     })
   })
axios 发起 post 请求的语法：
具体的请求示例如下：
axios.post( url , { /*参数*/ }).then(callback)
axios.post( url , '键值对字符串').then(callback)

document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var obj = { address: '北京', location: '顺义区' }
      axios.post(url, obj).then(function (res) {
        console.log(res.data)
      })
    })

直接使用axios发起请求：
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数*/ }
 

这篇好文章是转载于：学新通技术网