Ajax——異步基礎知識（一）
阿新 • • 發佈：2017-12-28
計算 註冊事件 nbsp ajax 傳遞 ica 默認 tput response
基礎概念
1、異步請求可以做到偷偷向服務器發送請求，而頁面卻不刷新
2、get異步請求傳遞參數是通過url追加鍵值對的方式
3、post異步請求比較特殊，需要設置請求的類型
User-Agent：瀏覽器的具體類型 如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0 Accept：瀏覽器支持哪些數據類型 如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9; Accept-Charset：瀏覽器采用的是哪種編碼 如：Accept-Charset: ISO-8859-1 Accept-Encoding：瀏覽器支持解碼的數據壓縮格式 如：Accept-Encoding: gzip, deflate Accept-Language：瀏覽器的語言環境 如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3 Host：請求的主機名，允許多個域名同處一個IP地址，即虛擬主機。Host:www.baidu.com Connection：表示是否需要持久連接。Keep-Alive/close，HTTP1.1默認是持久連接，它可以利用持久連接的優點，當頁面包含多個元素時（例如Applet，圖片），顯著地減少下載所需要的時間。要實現這一點，Servlet需要在應答中發送一個Content-Length頭，最簡單的實現方法是：先把內容寫入ByteArrayOutputStream，然後在正式寫出內容之前計算它的大小。如：Connection: Keep-Alive Content-Length：表示請求消息正文的長度。對於POST請求來說Content-Length必須出現。 Content-Type：WEB服務器告訴瀏覽器自己響應的對象的類型和字符集。例如：Content-Type: text/html; charset=‘gb2312‘ Content-Encoding：WEB服務器表明自己使用了什麽壓縮方法（gzip，deflate）壓縮響應中的對象。例如：Content-Encoding：gzip Content-Language：WEB服務器告訴瀏覽器自己響應的對象的語言。 Cookie：最常用的請求頭，瀏覽器每次都會將cookie發送到服務器上，允許服務器在客戶端存儲少量數據。 Referer：包含一個URL，用戶從該URL代表的頁面出發訪問當前請求的頁面。服務器能知道你是從哪個頁面過來的。Referer: http://www.baidu.com/
readyState：存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化
0: 請求未初始化 1: 服務器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status：200: "OK"；404: 未找到頁面
get異步請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>發送異步請求</button>
<br>
<input type="text">
<script>
var btn = document.getElementsByTagName("button")[0];
var inp = document.getElementsByTagName("input")[0];
btn.onclick = function () {
var ajax = new XMLHttpRequest();//創建異步對象
ajax.open(‘get‘, ‘01.php‘);//請求方法，參數1請求類型，參數2請求地址
ajax.send();//發送請求
//註冊事件，有數據返回才會觸發事件
ajax.onreadystatechange = function (ev) {
if (ajax.readyState == 4 && ajax.status == 200) {
inp.value = ajax.responseText;
} else {
console.log("失敗");
}
}
}
</script>
</body>
</html>
post提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>發送異步請求</button>
<br>
<input type="text">
<input type="text">
<script>
var btn = document.getElementsByTagName("button")[0];
var inp1 = document.getElementsByTagName("input")[0];
var inp2 = document.getElementsByTagName("input")[1];
btn.onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open(‘post‘, ‘02.php‘);
//如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(‘name=jack&age=13‘);//發送參數
ajax.onreadystatechange = function (ev) {
if (ajax.readyState == 4 && ajax.status == 200) {
var msg = ajax.responseText;
var arr=msg.split(‘|‘);//分割字符串
inp1.value = arr[0];
inp2.value = arr[1];
}
}
}
</script>
</body>
</html>
Ajax——異步基礎知識（一）