《DOM编程艺术》课堂交流区问题汇总（二）

本课程为网易云课堂 - - 前端开发工程师 - - 《DOM编程艺术》学习总结

样式操作

相关笔记推荐：前端微笔记-样式操作

问题一：如何实现浏览器兼容版的window.getComputedStyle

　　window.getComputedStyle能够获取元素的实际样式，但是低版本的ie8及以下不支持，如何在低版本的ie上兼容类似的功能。

解答：

function getComputedStyle(element){
        if(window.getComputedStyle){
            return window.getComputedStyle(element);        
        }
        else {
            return element.currentStyle;
        }

问题二：实现getStyle函数

　　getStyle函数用于获取元素的实际样式，语法如下：

var cssPropertyValue = getStyle (element, cssPropertyName)；

　　使用示例如下：

getStyle(element, "color") 返回element元素的显示颜色，如："rgb(0, 0, 0)" 

getStyle(element, "line-height") 返回element元素的实际行高，如："30px" 

　　请实现getStyle函数，要求浏览器兼容。

解答：

function getStyle(element,cssPropertyName){
        if(!window.getComputedStyle){
           return element.currentStyle[cssPropertyName];
         }else{
           return getComputedStyle(element)[cssPropertyName];
       }
    }

数据通信

相关笔记推荐：前端微笔记-《DOM编程艺术》-数据通信

问题一：Ajax请求GET方法的封装

　　方法

get(url, options, callback)

　　参数

    url    {String}    请求资源的url
    options    {Object}    请求的查询参数
    callback    {Function}    请求的回调函数，接收XMLHttpRequest对象的responseText属性作为参数

　　返回

void

　　举例

get(‘/information’, {name: ‘netease’, age: 18}, function (data) {
    console.log(data);
});

　　描述

方法get(url, options, callback) 是对Ajax请求GET方法的封装。请写出get方法的实现代码。

解答：

    function get(url, options, callback) {
            var xhr = new XMLHttpRequest();     //创建XHR对象
            // 处理返回数据
            xhr.onreadystatechange = function(callback) {
                if (xhr.readyState == 4) {      //浏览器结束请求
                    if ((xhr.status >= 200 && xhr.status <300) || xhr.status == 304) {  //status为200-300表示success，304为读取缓存
                        callback(xhr.responseText);     //执行返回的html、xml
                    }
                    else {
                        alert('Requeset was unsuccessful: ' + xhr.status);
                    }
                }
            }
            // 请求参数序列化，把对象转换为例如'name1=value1&name2=value2'的格式
            function serialize(data) {
                if (!data) {return '';}
                var pairs = [];
                for(var name in data){
                    if (!data.hasOwnProperty(name)) {continue;}     //判断对象自身是否有name属性
                    if (typeof data[name] === 'function') {continue;}   //如果对象的值是一个函数，忽略
                    var value = data[name].toString();
                    name = encodeURIComponent(name);    //把字符串作为URI 组件进行编码。将转义用于分隔 URI 各个部分的标点符号
                    value = encodeURIComponent(value);
                    pairs.push(name + '=' + value);
                }
                return pairs.join('&');
            }    
            xhr.open('get',URL,true);   //url+查询参数序列号结果
            //放在open后执行，表示文本内容的编码方式是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send(null);
        }
            // test
            get('/information', {name: 'netease', age: 18}, function (data) {
                console.log(data);
            });

问题二：Ajax请求POST方法的封装

　　post函数是对Ajax的POST请求的封装，语法如下：

 post(url, options, callback)

　　没有返回值，参数说明如下：

    url：请求资源的url，String类型
    options：请求的查询参数，Object类型
    callback：回调函数，接收XMLHttpRequest对象的responseText属性作为参数，Function类型

　　使用示例如下：

   post('/addUser', {name: 'jerry', age: 1}, function(data) {
        // 处理返回数据
    });

　　请写出post函数的实现代码，要求浏览器兼容。

解答：

    function PostAjax(url, options, callback){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                    callback(xhr.responseText,options);
               }else{
                    alert("Request was unsuccessful:"+xhr.status);
               }
            }
        }
        xhr.open("post",url+"?"+serialize(options),true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(null);
    }

    var url="http://study.163.com/webDev/hotcouresByCategory.htm";

    PostAjax(url,{"id":1002963026},function (data,options) {
            var ObjData=JSON.parse(data);
            for(key in ObjData){
                if(ObjData[key]["id"]==options.id){
                    console.log(ObjData[key]);
                }
            }
        });

    function serialize(data){
        if(!data) return "";
        var pairs=[];
        for(var name in data){
        if(!data.hasOwnProperty(name)) continue;
        if(typeof data[name]==="function") continue;
            var value=data[name].toString();
            name=encodeURIComponent(value);
            value=encodeURIComponent(value);
            pairs.push(name+"="+value);
        }
        return pairs.join("&");
    }

数据存储

问题：cookie的作用和弊端

　　用cookie作为浏览器端的存储有哪些作用？有哪些弊端，是否有替代的解决办法？

解答：

作用：

• 可以在客户端上保存用户数据，起到简单的缓存和用户身份识别等作用。

• 保存用户的登陆状态，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。

• 记录用户的行为。

弊端：

• 增加流量消耗，因为每次请求都会带上cookie信息

• 安全性隐患，cookie使用明文传输

• 大小限制：最大容量在4KB左右