原生ajax

ajax的实现原理

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后

⽤ JavaScript 来操作 DOM ⽽更新⻚⾯

实现步骤

1. 创建一个ajax对象（XMLHttpRequest）

2. 连接到服务器

3. 发送请求

4. 接收返回值

示例代码：

function ajax(url, success) {
    // 1. 准备一个电话(创建一个ajax对象)
    var xhr = new XMLHttpRequest()
    // 2.拨号（连接到服务器）
    xhr.open('get', url, true);
    // 3.说出你的需求(发送请求)
    xhr.send();
    // 4.对方的反馈（接收返回值）
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) { // 请求完成
            if(xhr.status === 200) { // 成功
                success && success(xhr.responseText) // responseText: 响应文本（服务器返回的数据）
            } else { // 失败了
                console.log('失败了');
            }
        }
    }
}

ajax('data.json', function(data) {
    console.log(data);
})

HTTP常见状态码

2**开头 （请求成功）表示成功处理了请求的状态代码

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。

3** 开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

4**开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法

404 （未找到） 服务器找不到请求的网页。

5**开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。

505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

同源和跨域

什么是同源策略

同协议、同地址、同端口，被称为同源。

前段解决跨域的方法

        1.jsonp

　　2.iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

　　3.代理：如vue-cli项目中的config/index.js文件中的proxyTable设置所要跨域访问的地址