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);
}
上一篇:善用VS中的Code Snippet来提高开发效率


下一篇:JQ写法和js写法 方法函数化