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——異步基礎知識(一)