1. AJAX（JavaScript Object Notation）
Asynchronous Javascript And XML (異步JavaScript和XML)
通過在後臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
2. AJAX的步驟：
- 創建Ajax對象
new XMLHttpRequest() - 填寫傳輸地址和傳輸內容
ajax.open("post"||"get",URL,是否異步) - 發送請求
ajax.send(); - 等待服務器相應
ajax.onload = fn(); - 服務器響應後執行後續動作
ajax.responseText
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
window.onload = function () {
// 1. 創建一個XMLHttpRequest對象 (需要考慮兼容性)
var xhr = null;
if (window.XMLHttpRequest){ //主流瀏覽器 (包括IE7、以後的版本)
xhr = new XMLHttpRequest();
}else { //IE6、 IE5
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
console.log("狀態A"+xhr.readyState);
// 2.設置請求方式以及請求地址 、 是否爲異步請求
//1>使用 get 請求
var url = './data.json';
xhr.open('get',url,true); //true 異步請求方式 false 同步
console.log("狀態B"+xhr.readyState);
//2>.使用 post 請求
// var url = "02_Ajax.php";
// xhr.open('post',url,true); //true 異步請求方式 false 同步
//如果post請求方式,必須要添加請求頭 (必須要寫在連接建立的狀態以後)
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// console.log("狀態B"+xhr.readyState);
// 3.發送請求
xhr.send();
console.log("狀態C"+xhr.readyState);
// var params = "username="+username+"&password="+password;
// xhr.send(params); //發送請求
// console.log("狀態C"+xhr.readyState);
// 4.回調函數
xhr.onreadystatechange = function () {
console.log("狀態D"+xhr.readyState);
// 1.請求有響應 2.響應是正確的,返回的數據是來自請求的URL
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
// var div = document.getElementById('div');
// div.innerHTML = xhr.responseText;
}
}
}
</script>
</html>3.get
- 通過url發送請求，會暴露用戶信息
- 因爲是用過url發送的，IE的url會將中文轉碼，所以在IE下中文需要使用
encodeURI轉碼 - 使用get傳輸數據會產生緩存，解決方法是在數據後面加隨機數或者時間戳
- 不同瀏覽器的url長度不同。
例子：
var ajax = new XMLHttpRequest();
ajax.open("get","../php/get.php?user=" +userName.value ,true );
ajax.send();
ajax.onload = function () {
span.innerHTML = ajax.responseText;
}4.post ,post與get的區別
- 通過send直接發送到服務器，理論上來說體積是無限大的（一般後端會做限制）
- 因爲是直接發送給服務器，所以不會被瀏覽器緩存，也不會暴露用戶的信息，相對get來說安全
- 因爲不通過瀏覽器發送，所以不用轉碼
必須在send之前設置一個請求頭(這個請求頭的內容是固定的)
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");字段的拼接要放進send中,open的第二個參數直接爲請地址不用拼接字段了
例子：
var ajax = new XMLHttpRequest();
ajax.open("post","../php/post.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("user="+this.value);
ajax.onload = function () {
span.innerHTML = ajax.responseText;
console.log(ajax.response);
}5. eval
eval可以計算某個字符串，並執行javascript代碼。
通過eval可以將一個長得像對象的字符串轉成對象。但是會注入病毒，所以儘量少用或者不用。
var json1 = "{'name':'難'}";
console.log(eval('('+ json1+')'))