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);    //3

　　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);
    }