ajax的请求和封装

一、什么是Ajax

Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某某些数据进行更新。而不使用Ajax的页面如果需要更新内容，则必须重载整个网页页面。

二、Ajax的使用

//创建一个Ajax对象
var xhr = new XMLHttpRequest();

//配置请求信息
xhr.open( "GET" , "./01_data.php" , true );

接下来就是信息的发送，使用send()方法来完成的。

//发送请求
xhr.send();

一个最基本的Ajax请求就是以上三个步骤，但是只有以上三个步骤我们是拿不到服务器返回给我们的响应。如果想要拿到响应，必须满足两个条件：本次HTTP请求是成功的，也就是HTTP的状态码为200-299之间HTTP状态码为xhr.status；另外，Ajax也有自己的状态码用来表示本次请求中的各个阶段。Ajax状态码为readyState

在 Ajax 对象中有一个事件，叫做readyStateChang事件，这个事件是专门用来监听Ajax对象readyState值改变的的行，也就是说只要readyStat的值发生变化了，那么就会触发该事件，所以我们就在这个事件中来监听Ajax的 readyState是不是到4了。

Ajax中还有一个response，就是用来记录服务端给我们的响应体内容的

xhr.onreadyStateChange = function () {
  // 每次 readyState 改变的时候都会触发该事件
  // 我们就在这里判断 readyState 的值是不是到 4
  // 并且 http 的状态码是不是 200 ~ 299
  if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
    //如果请求成功，我们就可以获取服务端给我们响应的内容了
    // 我们在这里直接打印 xhr.responseText 来查看服务端给我们返回的内容
    console.log(xhr.responseText)      
  }
}

三、Ajax的封装

接下来我们就来封装一个Ajax函数以方便我们的使用

let axios = (function () {
    let  BaseUrl = 'http://localhost:8888/api'
    function ajax_get({ url, query }) {
        return new Promise((resolve, reject) => {
            if (!url) {
                return alert('你没有传递url')
            }
            let str = ''
            if (query) {
                str = '?'
                for (let key in query) {
                    str += `${key}=${query[key]}&`
                }
                str = str.slice(0, -1)
            }

            let xhr = new XMLHttpRequest()
            xhr.open('get', query ? BaseUrl+url + str : BaseUrl+url)
             // 设置请求头 携带token
            xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
            xhr.send()
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(JSON.parse(xhr.response))
                    } else {
                        reject(JSON.parse(xhr.response))
                    }
                }
            }
        })

    }


    function ajax_post({ url, query }) {
        return new Promise((resolve, reject) => {
            if (!url) {
                return alert('你没有传递地址')
            }
          

            let xhr = new XMLHttpRequest()
            xhr.open('post', BaseUrl+url)
            xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
            // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('content-type','application/json')
            xhr.send(query ?JSON.stringify(query) : null)
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(JSON.parse(xhr.response))
                    } else {
                        reject(JSON.parse(xhr.response))
                    }
                }
            }
        })
    }

    
    function ajax_put({ url, query }) {
        return new Promise((resolve, reject) => {
            if (!url) {
                return alert('你没有传递地址')
            }
           

            let xhr = new XMLHttpRequest()
            xhr.open('put', BaseUrl+url)
            xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
            // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.setRequestHeader('content-type','application/json')
            xhr.send(query ?JSON.stringify(query) : null)
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(JSON.parse(xhr.response))
                    } else {
                        reject(JSON.parse(xhr.response))
                    }
                }
            }
        })
    }


    function ajax_upload({ url, query }) {
        return new Promise((resolve, reject) => {
            if (!url) {
                return alert('你没有传递地址')
            }
            let xhr = new XMLHttpRequest()
            xhr.open('post', BaseUrl+url)
            xhr.setRequestHeader('authorization',cookie.getItem('token') || null)
            xhr.send(query)
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        resolve(JSON.parse(xhr.response))
                    } else {
                        reject(JSON.parse(xhr.response))
                    }
                }
            }
        })
    }
    let options = {
        get: ajax_get,
        post: ajax_post,
        put:ajax_put,
        upload:ajax_upload
    }
    return options
})()