json : 类数组转数组+ajax请求数据

类数组转数组

• 类数组:
  • arguments: 用来接收实参的
  • HTMLcollection: 获取元素集合
• 类数组转数组
  • Array.prototype.slice.call(arguments) --> 完全兼容
  • HTMLcollection 不兼容
• 浏览器异常捕获
  • 工作中：不用finally，因为无论成功或失败，finally都会执行
  • 使用场景：解决 -> 报错后，程序无法执行的问题
  • 如果在try...catch...中还希望阻断程序执行：throw new Error(‘报错’);

try{
    //标准浏览器
}catch(e){
    // IE浏览器
}fanally{
    // 无论是否成功都能执行
}

JSON

• window.JSON 有两个属性
  • JSON.parse(): 把JSON格式的字符串转为JSON对象
  • JSON.stringify(): 把JSON对象转为JSON格式的字符串

如何判断浏览器是否兼容

• try...catch...
• 属性判断：window.JSON
• in: 'json' in window

DOM映射：指的是HTML页面结构和获取到的元素之间，存在一一对应的关系

排序 3 步骤

1. 类数组转数组
2. sort排序
3. 把排好序的数组，重新朝如页面

ajax请求数据 4 步骤

1. 创建一个对象
   • var xml = new XMLHttpRequest()
2. 打开地址
   • xml.open('GET','请求地址','是否异步')
3. 响应请求

xml.onreadystatechange=function(){
    if(xml.readyState === 4 && /^2\d{2}$/.test(xml.status)){
        var data = xml.responseText();
    }
}

4. 发送请求
   • xml.send();

绑定数据，常用的有两种

• 字符串拼接: 简单、快捷
  • 缺点：如果页面中，有的元素身上有事件，那么，通过字符串拼接之后，所有的事件都没了(可以忽略)

---

makeArray() : 类数组转数组

• 浏览器异常捕获

makeArray:function(arg){
    var ary = [];
    try{
        ary = Array.prototype.slice.call(arg);
        /* 或者写成
        * ary = [].slice.call(arg);
        */
        
    }catch(e){
        for(var i=0;i<arg.length;i++){
            ary.push(ary[i]);
        }
    }
    return ary;
}

JSON格式的字符串转JSON对象

• "json" in window -> true
• JSON.parse()
• JSON.stringify()

jsonParse:function(jsonStr){
    return 'json' in window ? JSON.parse(jsonStr) : eval('('+jsonStr+')')
}

排序 3 步走

1. 类数组转数组
2. sort排序
3. 把排好序的数组，重新插入页面

求平均值

1. 类数组转数组
2. sort排序
3. 掐头去尾
4. (eval + join)+toFixed

// 求平均值：去掉一个最高分，去掉一个最低分，其他累加/个数
function average(){
    var ary = [];
    for(var i=0;i<arguments.length;i++){
        ary.push(arguments[i]);
    }
    ary.sort(function(a,b){
        return a-b;
    }
    ary.shift();
    ary.pop();
    return (eval(ary.join('+'))/ary.length).toFixed
}
var res = average(1.77777,8.77777,3.77777,9.7777,2.7777)

ajax数据请求

1. 创建对象
   • var xml = new XMLHttpRequest()
2. 打开地址
   • xml.open("GET","请求地址","是否异步")
3. 响应请求
   • 准备好了 xml.readyState === 4
   • 响应成功 /^2\d{2}$/.test(xml.status)
4. 发送请求 --- get请求
   • xml.send() / xml.send(null);

var xml = new XMLHttpRequest();
xml.open('GET','data.txt',false);
xml.onreadystatechange = function(){
    if(xml.readyState === 4 && /^2\d{2}$/.test(xml.status)){
        var data = utils.jsonParse(xml.responseText);
    }
}
xml.send();

http状态码

• 2XX：成功
• 3XX：重定向
• 4XX：请求错误
• 5XX：服务器的错误

绑定数据

1. 字符串拼接

function bind(){
    var str = '';
    for(var i=0; i<data.length; i++){
        str += '<li>\
            <a href="#">\
            <em>'+(i+1)+'</em>'+data[i].title+'</a>\
            </li>';
    }
    oUl.innerHTML=str;
}
bind();

2. 动态创建 --> 文档碎片

function bind(){
    var frg = document.createDocumentFragment();
    for(var i=0; i<data.length; i++){
        var oLi=document.createElement('li');
        oLi.innerHTML='<a href="#">\
            <em>'+(i+1)+'</em>'+data[i].title+'</a>';
        frg.appendChild(oLi);
    }
    oUl.appendChild(frg);
    frg = null;
}
bind()