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 僅僅爲了在本地存儲數據而生