js--ajax非同步互動
一、什麼是Ajax
Ajax（Asynchronous JavaScript and XML的縮寫）是一種非同步請求資料的web開發技術，對於改善使用者的體驗和頁面效能很有幫助。簡單地說，在不需要重新重新整理頁面的情況下，Ajax 通過非同步請求載入後臺資料，並在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。
Ajax目的：提高使用者體驗，較少網路資料的傳輸量
二、Ajax原理是什麼
在解釋Ajax原理之前，我們不妨先舉個“領導想找小李彙報一下工作”例子，領導想找小李問點事，就委託祕書去叫小李，自己就接著做其他事情，直到祕書告訴他小李已經到了，最後小李跟領導彙報工作。
Ajax請求資料流程與“領導想找小李彙報一下工作”類似。其中最核心的依賴是瀏覽器提供的XMLHttpRequest物件，它扮演的角色相當於祕書，使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接著做其他事情，等收到XHR返回來的資料再渲染頁面。理解了Ajax的工作原理後，接下來我們探討下如何使用Ajax。
三、Ajax的使用
1.建立Ajax核心物件XMLHttpRequest(記得考慮相容性)
var xhr=null; if (window.XMLHttpRequest) {// 相容 IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); } else{// 相容 IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
2.向伺服器傳送請求
xhr.open(method,url,async); send(string);//post請求時才使用字串引數，否則不用帶引數。
method：請求的型別；GET 或 POST
url：檔案在伺服器上的位置
async：true（非同步）或 false（同步）
注意：post請求一定要設定請求頭的格式內容
xhr.open("POST","test.html",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("fname=Henry&lname=Ford"); //post請求引數放在send裡面，即請求體
3.伺服器響應處理（區分同步跟非同步兩種情況）
responseText 獲得字串形式的響應資料。
responseXML 獲得XML 形式的響應資料。
①同步處理
xhr.open("GET","info.txt",false); xhr.send(); document.getElementById("myDiv").innerHTML=xhr.responseText; //獲取資料直接顯示在頁面上
②非同步處理
相對來說比較複雜，要在請求狀態改變事件中處理。
xhr.onreadystatechange=function() { if (xhr.readyState==4 &&xhr.status==200) { document.getElementById("myDiv").innerHTML=xhr.responseText; } }
readyState
0-（未初始化）還沒有呼叫send()方法
1-（載入）已呼叫send()方法，正在傳送請求
2-（載入完成）send()方法執行完成，已經接收到全部響應內容
3-（互動）正在解析響應內容
4-（完成）響應內容解析完成，可以在客戶端呼叫了
status
③GET和POST請求資料區別
請求資料時的區別，詳情見下面兩張圖：
總而言之：
onreadystatechange響應事件
- GET請求的差數直接拼接在url上面
- POST請求的引數就不是放在url了，而是放在send裡面，即請求體
案例：
<html>
<head>
<script type="text/javascript">
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>請在下面的輸入框中鍵入字母（A - Z）：</h3>
<form action="">
姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建議：<span id="txtHint"></span></p>
</body>
</html>