为了面试而面试 -- 阶段一

Q1： IE和标准DOM事件模型的不同

IE内核浏览器事件模型是冒泡型事件，没有捕获事件

target.attachEvent('onclick',function(){
        alert("我是button");
});

标准DOM事件浏览器（事件捕获，目标阶段，事件冒泡）

target.addEventListener('click',function(){
        alert("我是button");
}, true);

Q2：事件对象处理兼容性（兼容所有浏览器）

事件源、键盘值、坐标位置：

function getTarget(event) {
    var e = event || window.event;
    var target = e.target || e.srcElement; //获取事件源
    var keycode = e.keyCode || e.which;    //获取键盘值
    var pageX = e.pageX || e.x;            //获取坐标位置
    var pageY = e.pageY || e.y;
}

阻止事件冒泡：

function stopBubble(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;    //兼容IE
    }
}

阻止默认事件：

function stopDefault(e) {
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;    //兼容IE
    }
}

Q3：同步/异步

同步：发送数据后，等待接收方发回响应后才发送下一个数据包；

异步：发送数据后，不等待接收方发回响应，接着发送下一个数据的通信方式

Q4：Ajax工作原理：（页面无刷新请求数据操作）

基本工作原理：

相当于在用户和服务器之间加了一个层
异步请求不会阻塞客户端的操作
客户端通过浏览器的内置对象XMLHttpRequest来发送异步请求

通过XMLHttpRequest 对象向服务器发送异步请求，从服务器获得数据，然后通过JavaScript操作DOM，从而更新页面。

XMLHttpRequest 对象的三种常用属性：

onreadystatechange : 存有处理服务器响应的函数
readyState ：存有服务器响应的状态信息
reponseText : 取回由服务器返回的数据

XMLHttpRequest 对象的两种方法：

open(method, url, asynch)
send() :请求服务器

GET()请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #result{
            background-color: skyblue;
            font-size: 30px;
            color: white;
        }
    </style>
</head>
<body>
<p id="result">用于展示结果</p>
<button id="request">点我请求后台的数据</button>
<script>
    //点击按钮后向后台发起请求
    document.getElementById("request").onclick = function () {
        var getRequest = new XMLHttpRequest();//创建请求对象
        getRequest.open("GET", "http://192.168.1.101:8080/MineTest/first.do", true);//链接服务器
        getRequest.send();//发送请求
        getRequest.onreadystatechange = function () {
            if (getRequest.readyState === 4) {//请求已完成，且响应已就绪
                if (getRequest.status === 200) {//请求成功
                    var resultStr = getRequest.responseText//获取结果
                    var resultObj = JSON.parse(resultStr);//解析数据
                    //将返回的结果展示到P标签中
                    document.getElementById("result").innerHTML =
                        "名称 : " + resultObj.name + "</br>" +
                        "年龄 : " + resultObj.age + "</br>" +
                        "性别 : " + resultObj.sex;
                }
                else {
                    alert("错误码 : " + getRequest.status);
                }
            }
        }
    }
</script>
</body>
</html>

POST() 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 输入提交的内容 -->
<label>请输入数字1 : </label>
<input type="number" id="num1">
</br>
<label>请输入数字2 : </label>
<input type="number" id="num2">
</br>
<!-- 按钮用来请求后台的数据 -->
<button id="request">点我请求后台的数据</button>
<!-- 设置一些操作 -->
<script>
    //点击按钮后向后台发起请求
    document.getElementById("request").onclick = function () {
        var getRequest = new XMLHttpRequest();//创建请求对象
        getRequest.open("POST", "http://192.168.1.101:8080/MineTest/sum.do", true);//链接服务器
        var postStr = "num1=" + document.getElementById("num1").value +
            "&num2=" + document.getElementById("num2").value;
        getRequest.setRequestHeader("contentType", "text/html;charset=uft-8");//设置编码格式
        getRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//表单类型
        getRequest.send(postStr);//发送请求
        getRequest.onreadystatechange = function () {
            if (getRequest.readyState === 4) {//请求已完成，且响应已就绪
                if (getRequest.status === 200) {//请求成功
                    var resultStr = getRequest.responseText//获取结果
                    alert("返回结果 : " + resultStr);
                }
                else {
                    alert("错误码 : " + getRequest.status);
                }
            }
        }
    }
</script>
</body>
</html>

Q5：表单提交方式

get 限制form表单的数据集的值必须为ASCII字符

而post 支持整个ISO10646字符集

Q6： sort() 排序

根据字符编码的顺序

Q7: call() 和apply() 的区别

call() 的参数枚举传入

而apply() 的参数作为整个数组传入

Q8：html5有两种不同的对象存储数据

1. localStorage: 适用于长期存储数据，浏览器关闭后数据不会丢失

2. sessionStorage：存储的数据在浏览器关闭之后自动删除

Q9：web Storage 和cookie：

cookie的作用是与服务器进行交互，作为http规范的一部分存在

web Storage 仅仅为了在本地存储数据而生

为了面试而面试 -- 阶段一

猜你喜欢