原生ajax

原生ajax四步

原理：

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

⽤ JavaScript 来操作 DOM ⽽更新⻚⾯

实现：

创建一个ajax对象（XMLHttpRequest）

连接到服务器

发送请求

接收返回值

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常见状态码

下面常见的http状态码：

100：这个状态码是告诉客户端应该继续发送请求，这个临时响应是用来通知客户端的，部分的请求服务器已经接受，但是客户端应继续发送求请求的剩余部分，如果请求已经完成，就忽略这个响应，而且服务器会在请求完成后向客户发送一个最终的结果

200：这个是最常见的http状态码，表示服务器已经成功接受请求，并将返回客户端所请求的最终结果

202：表示服务器已经接受了请求，但是还没有处理，而且这个请求最终会不会处理还不确定

204：服务器成功处理了请求，但没有返回任何实体内容 ，可能会返回新的头部元信息

301：客户端请求的网页已经永久移动到新的位置，当链接发生变化时，返回301代码告诉客户端链接的变化，客户端保存新的链接，并向新的链接发出请求，已返回请求结果

404：请求失败，客户端请求的资源没有找到或者是不存在

500：服务器遇到未知的错误，导致无法完成客户端当前的请求。

503：服务器由于临时的服务器过载或者是维护，无法解决当前的请求，以上http状态码是服务器经常返回的状态代码，用户只能通过浏览器的状态了解服务器是否正常运行，一般除了错误的状态码，都不会看到服务器的状态码的，新SEOer你们了解到了吗？内容编辑来自51特色购SEO优化人员，想了解更过状态码的知识可以加我好友，一起相互交流学习

 同源和跨域

同源

同源策略：同源指协议、域名、端口皆相同

使用同源策略的原因：出于安全考虑，主要时为了防止CSRF攻击【利用用户的登录专改发起恶意请求】

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

不受同源策略限制的：页面中的链接，重定向以及表单提交是不会受到同源策略限制的;跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域

什么是跨域：受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

跨域的几种方式：

• JSONP（JSON with Padding）
• CORS（跨域资源共享）
• postMessage
• document.domain