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 仅仅为了在本地存储数据而生