使用原生ajax发送请求

ajax全称Asynchronous Javascript And XML(异步JavaScript 和 XML)。

先了解一下XMLHttpResquest，简称xhr，是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。 在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。 通过XMLHttpRequest可以在不刷新页面的情况下请求特定的URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

xhr基本使用

      //1.创建xhr对象
      var xhr = new XMLHttpRequest()
      //2.调用open('请求方法','请求url网址')
      xhr.open('GET', 'https://juejin.cn/')

      //3.监听loadend事件,无论请求成功与否都接收响应结果
      xhr.addEventListener('loadend', () => {
        //返回的结果是json字符串模式，需要转换一下
        const data = JSON.parse(xhr.response)
        console.log(data)
      })
      //4.调用send()函数，发起Ajax请求
      xhr.send()

1.使用xhr发起GET请求

    //1.创建xhr对象 
    var xhr = new XMLHttpRequest() 
    //2.调用open() 
    xhr.open('GET','https://juejin.cn/')  
    //3.调用send()函数，发起Ajax请求
    xhr.send() 
    //4.监听onreadystatechange事件 
    xhr.onreadystatechange = function(){ 
        //监听xhr对象的请求状态readyState,与服务器响应的状态status
        if (xhr.readyState === 4 && xhr.status === 200) { 
        //打印服务器响应回来的数据 JSON格式
        console.log(xhr.responseText) 
        } 
    }

2.使用xhr发送POST请求

    //1.创建xhr对象
    var xhr = new XMLHttpRequest()
    //2.调用open()
    xhr.open('POST','https://juejin.cn/')
    //3.设置Content-Type属性（固定写法）
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    //4.调用send()，同时将数据以查询字符串的形式，提交给服务器
    xhr.send('bookname=水浒传&author=施耐庵')
    //5.监听onreadystatechange事件
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
        }
    }

axios内部采用XMLHttpRequest与服务器交互