JS框架设计读书笔记之-异步

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

setTimeout/setInterval

1. 如果回调执行时间大于间隔时间，真正的间隔时间会大一些。

2. 存在一个最小的时间间隔，即使seTimeout(fn,0)，在IE6-IE8中大概为15.6ms，后来精确到10ms，IE10为4ms，其他浏览器大概也是4ms。

3. 回调时间取0时，该函数会在能立即执行的时段触发。

4. 不写第二个参数，浏览器会自动配时间。

5. IE10与标准浏览器都支持额外参数，从第三个参数起，作为回调函数的参数传入。

setTimeout(function(a, b) {
console.log(a + b);
}, 0, 1, 2); //

6. setTimeout方法的时间参数若为极端值，浏览器处理会出现极大差异，某些浏览器会立即执行。(chrome填-9999立即执行了)

Ajax

Ajax核心就是XMLHttpRequest，IE5的时候，微软用ActiveXObject对象来加载数据，这个对象还能做很多其他事情，根据传入的参数来创建一个HTML页面什么的，在IE7的时候，隔离出XMLHttpRequest对象，但是这个对象不支持本地file协议，会出现拒绝访问。

发送请求 open(method,url,async,username,password)

method：用于定义请求http的方法，值包括get、post、put、delete等，有的浏览器还允许自定义方法，不过要求全是大写。

url：参数是请求的主体，一般浏览器都有同源安全策略，跨服请求将被拒绝。get请求时，参数会以querystring的形式放在问号后面。

async：是否异步，默认为true。如果为false，后续调用将被阻塞。

username/password：可选参数，没用过。

接收数据

早期有两种接收数据的属性。responseText对应解码后的字符串，默认为uft-8，responseXML对应一个XML文档。JSON格式兴起后，一般会调用JSON.parse(data)得到JSON数据。一般都是看后台给的文档，如果不给，只能通过getResponseHeader('Content-Type')查看。

创建一个异步请求主要分为下面几个步骤：

//创建异步对象
var xhr = new XMLHttpRequest();
//调用open方法准备开始连接
//get方法
xhr.open('get/post', 'url');
//如果是post请求
if ('post') {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
}
//发送请求
//get请求传入null
xhr.send('data');
//监听服务器返回的数据
xhr.onreadystatechange = function() {
if (xhr.status == 200 && xhr.readyState == 4) {
//返回数据为xhr.responseText
}
}

可以进行封装，并传入一个对象参数：

//接受url、method、fn、data四个参数
//其中data以对象形式传入
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var fn = obj.fn;
var Data = parseData(obj.data);
var xhr = new XMLHttpRequest();
if (method == 'get') {
url = url + "?" + Data;
Data = null;
}
xhr.open(method, url);
if (method == 'post') {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
}
xhr.send(Data);
xhr.onreadystatechange = function() {
if (xhr.status == 200 && xhr.readyState == 4) {
var result = xhr.responseText;
fn(result);
}
}
}
//{a:1,b:2} => a=1&b=2
function parseData(obj) {
var finalData = "";
for (key in obj) {
finalData += key + "=" + obj[key] + "&";
}
return finalData.slice(0, -1);
}