AJAX请求、跨域、setInterval与setTimeout
Opened this issue · 0 comments
AJAX请求
- 创建XMLHttpRequest对象;
- open(请求类型，请求的URL，是否异步发送请求)方法 启动一个http请求；
- 设置响应HTTP请求状态变化的函数；
- send() 方法 发送请求；
- 获取响应数据（判断XHR对象的readyState状态属性 or 触发load事件）；
- JS操作DOM将数据渲染到页面；
var xhr = new XMLHttpRequest();
xhr.open("get","https://api.github.com",true);
xhr.send(null);
// load事件为XMLHttpRequest2 中接收到完整的响应数据时触发
// XMLHttpRequest中为readystatechange事件中 判断readyState属性为4，即为已接收到全部响应。
xhr.onload = function(){
if((xhr.status >=200 && xhr.status < 300) || (xhr.status == 304)){
console.log(xhr.responseText);
}else{
console.log("Request was unsuccessful: " + xhr.status);
}
}
同源策略：XHR对象只能访问 相同的域，相同的端口，相同的协议 的资源。
跨域
跨域解决方案：
-
CORS（Cross-Origin Resource Sharing，跨域源资源共享），IE8通过XDomainRequest对象支持CORS，其他浏览器通过XHR对象原生支持CORS。
CORS跨域源资源共享需要客户端和服务器共同支持，原理是通过自定义的HTTP头部让客户端与服务器沟通，而目前各大浏览器都实现了对CORS的原生支持。即，当跨域请求时，浏览器会自动在HTTP头部加上自定义字段，比如Origin头部。也就是说要实现CORS，需要在服务器端进行设置。服务器端返回Access-Control-Allow-Origin字段。CORS请求分为简单请求、非简单请求（多一次http请求），默认CORS跨源请求都不带cookie，如果需要带cookie，则需要设置Access-Control-Allow-Cendentials:true。
阮一峰CORS -
JSONP（JSON with padding）
原理：利用<script>标签没有跨域限制的特点，客户端将<script>脚本的src设置为服务器的请求地址。服务器会返回一段js代码，并在本地执行，形如：callback({"name":"Nicholas"});，一个带参数的函数，这个参数就是需要请求的json数据。这个函数名是服务器端根据客户端发过去的数据动态设置的（原理是字符串拼接）。而这个函数会事先在本地声明如何处理json数据。
优点：简单易用；支持浏览器与服务器双向通信；
缺点：不安全，由于JSONP是从其他域中加载代码执行；难以确定请求是否失败；只支持GET请求；
网络上的解释 -
其他方法：如html5中postMessage方法，window.name，document.domain
setTimeout与setInterval区别
- setTimeout()是设定一个定时器，当定时器到时后，环境会把回调函数放到事件循环中。如果此时事件队列中有多个事件，那么该回调就会等待，所以setTimeout定时器的精度可能不高，只能确保回调函数不会在指定的时间间隔之前运行。
- setInterval()是设定间隔定时器，假如间隔为1秒。就是从当前开始，每隔1秒将回调函数加入到事件循环中。并不是意味着函数执行的时间间隔为1秒。所以setIntervel具有累积效应，若某个操作特别耗时，超过了时间间隔，那么加入到事件队列中的事件就会被累积起来，然后会在很短的时间内被连续触发，这样就有可能造成性能问题，比如集中触发ajax请求。
- 结论：最好使用setTimeout超时调用来模拟setInterval间隔调用。
- HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。