封装一个原生ajax请请求

在项目我们使用封装后库发送请求，忽略了原生ajax请求的优点，在我们封装ajax之前，先讲讲ajax的优缺点

ajax的优点

1. 无刷新更新数据：在不刷新整个页面的情况下维持与服务器通信

2. 异步与服务器通信：使用异步的方式与服务器通信，不打断用户的操作

3. 前端与后端负载均衡：将一些后端的工作移到前端，减少服务器与带宽的负担

4. 基于规范被广泛支持：不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。

5. 界面与应用分离：Ajax使得界面与应用分离，也就是数据与呈现分离

ajax的缺点

1. Ajax不支持Back与History功能，即对浏览器机制的破坏：在动态更新页面的情况下，用户无法回到前一页的页面状态，因为浏览器仅能记忆历史纪录中的静态页面

2. 安全问题：AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

3. 对搜索引擎支持较弱：如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。解决的办法：可以先用服务器渲染。

4. 破坏程序的异常处理机制

5. 违背URL与资源定位的初衷

6. 不能很好地支持移动设备

7. 客户端肥大，太多客户段代码造成开发上的成本

ajax应用场景

1. 动态加载数据，按需取得数据。（树形菜单，联动菜单...）

2. 改善用户体验。（输入前提示。带进度条文件上传）

3. 电子商务应用。（购物车，邮件订阅）

4. 访问第三方服务。（访问搜索服务，rss阅读器）

5. 数据的局部刷新

ajax封装一个请求

简单的封装一下get请求和post请求

const ajax = function() {
    this.get = function(url,param) {
        const xhr = new XMLHttpRequest()
        // param为原始数据类型
        xhr.open('get',url + '?param=' + param,true) // 第三个参数异步与否
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                fn(xhr.responseText)
            }
        }
        xhr.send()
    }
    this.post = function(url, data) {
        const xhr = new XMLHttpRequest()
        xhr.open('post', url, true)
        xhr.setRequestHeader('Content-type','application/json') // 决定传数据格式
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                fn(xhr.responseText)
            }
        }
        xhr.send(JSON.stringify(data))
    }
}