原生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