Ajax的原理，以及如何实现

Ajax是什么

全称（Async Javascript and XML）即异步的JavaScript和XML

是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，与服务器交换数据，并且更新部分网页

Ajax的原理

简单地来说通过XMLHttpRequest对象向服务器发起异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

如何实现

• 封装一个Ajax请求，传入参数

• 创建XMLHttpRequest对象

• 将请求的方式转换为大写并判断是get请求还是post请求

• 如果是get请求，调用open函数，传入请求的方式以及请求的地址

• 再调用send函数，发起请求

• 如果是post请求和get的请求一样，多了一个 设置content-type的属性，这个是固定的

• 最后监听返回的数据，并判断请求的参数是否等于4，以及响应的参数是否等于200，将响应回来的数据进行处理后返回

实现代码

function ajax(options) {
            // 1.创建xhr对象
            var xhr = new XMLHttpRequest()
            // 2.判断是get请求还是post请求 发起请求
            if (options.method.toUpperCase() === 'GET') {
                // GET请求 调用open函数发 传入请求方式以及请求地址
                xhr.open(options.method, options.url)
                // 调用send，发送请求
                xhr.send()
            } else {
                // POST请求 调用open函数 传入请求方式以及请求地址
                xhr.open(options.method, options.url)
                // 设置content-Type属性
                xhr.setRequestHeader(
                    'Content-Type',
                    'application/x-www-form-urlencoded'
                )
                // 调用send，发送请求
                xhr.send()
            }
            // 3.监听返回的数据
            xhr.onreadystatechange=function() {
                // 4.判断请求的状态以及响应的状态
                if(xhr.readyState===4&&xhr.status===200) {
                    // 5.将响应回来的数据进行处理后返回
                   options.success && options.success(JSON.parse(xhr.response))
                }
            }
        }

封装后的使用方式

ajax({
     type: 'post',
     dataType: 'json',
     data: {},
     url: 'https://xxxx',
     success: function(text,xml){//请求成功后的回调函数
         console.log(text)
     },
     fail: function(status){请求失败后的回调函数
         console.log(status)
     }
})