Ajax =
Asynchronous JavaScript and XML即為異步的 JavaScript 和 XML，它并不是新的編程語言，而是一種使用現(xiàn)有標準的新方法歹撒，最大的優(yōu)點在于不需要重新更新整個頁面的情況下蹲坷，可以與服務(wù)器交換數(shù)據(jù)并更新部分的網(wǎng)頁內(nèi)容。
Ajax 的工作原理
Ajax 的一個實例
?在瀏覽器上實現(xiàn)ajax主要依靠XMLHttpRequest來實現(xiàn)办绝， 而XMLHttpRequest對象用戶和服務(wù)器交換數(shù)據(jù)
// define callback
function suc (text) {
var t = document.getElementById('resp-text');
t.value = 'ajax response success'
}
function fail (code) {
var t document.getElementById('tesp-text');
t.value = 'Error code: ' + code
}
// new XMLHttpRequest
var request = new XMLHttpRequest();
// run callback when state changed
request.onreadystatechange = function () {
if (request.readyState === 4) { // ajax has responced
if (resquest.status === 200) { // judged result by response code
return suc(request.responceText); // get responce text
} else {
return fail(request.status);
}
} else {
// http request keeping...
}
}
// all thing Readiness, just do it
request.open('GET', '/api/categories');
request.send();
alert('request has send, please wait...')
?
AJAX是基于現(xiàn)有的Internet標準次舌，主要應(yīng)用了
- XMLHttpRequest對象熄攘，（異步的與服務(wù)器交互數(shù)據(jù)）
- Javascript/Dom，（信息顯示/交互）
- CSS彼念，（給數(shù)據(jù)定義樣式）
- XML 作為數(shù)據(jù)轉(zhuǎn)換的格式
?
AJAX 實現(xiàn)過程
??XMLHttpRequest（xhr）是ajax的基礎(chǔ)挪圾，現(xiàn)在所有的瀏覽器都支持xhr對象，他用于在與服務(wù)器做數(shù)據(jù)交換逐沙，這意味著哲思，在不重新載入整個頁面的情況下，對網(wǎng)頁的某部分進行更新吩案。
??現(xiàn)代瀏覽器(ie5,ie6除外)均內(nèi)建了XMLHttpRequest棚赔，因此我們new一個即可
創(chuàng)建xhr
variable = new XMLHttpRequest()
IE5和IE6則使用
ActiveXObject("Microsoft.XMLHTTP")
所以新建xhr如下所示
var xmlhttp
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest()
} else {
xmlhttp = new ActiveXObject('Microsoft XMLHTTP')
}
將xhr的數(shù)據(jù)發(fā)送到服務(wù)器，我們使用open()和send()方法
xmlhttp.open(method, url, async);
xmlhttp.send(str); // get 無參數(shù)
open()函數(shù)接受三個參數(shù)徘郭，請求方法靠益，文件在服務(wù)器上的位置，aysnc請求true（異步）false（同步）
send()接口接受1或0個參數(shù)残揉，get請求不帶參數(shù)胧后，post表示發(fā)送給服務(wù)器的參數(shù)
?
xhr的第一個參數(shù)：method
什么時候用GET， 什么時候用POST
與post相比冲甘，get更簡單也更快绩卤，并且在大部分情況下都是適用的途样，但一下情況更適合適用post
- 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
- 與服務(wù)器發(fā)生大量數(shù)據(jù)交互（實驗過get攜帶800k以上數(shù)據(jù)時就會發(fā)生異常江醇，post不限制）
- 發(fā)送包含未知字符的用戶輸入時，（get參數(shù)在url上何暇，有可能被轉(zhuǎn)義或編碼等）
實踐一下 - get
xmlhttp.open('GET', '/try/ajax/get.html', true)
xmlhttp.send()
??我們知道瀏覽器有緩存機制陶夜，第一次請求后在發(fā)起相同請求時，得到的可能是緩存的結(jié)果裆站。 緩存是因為瀏覽器在向服務(wù)發(fā)起請求時檢查資源是否被修改条辟，未發(fā)生修改則不重新下載黔夭，但這往往會因為檢查問題無法獲取最新的資源，造成困擾羽嫡。為了避免這種情況本姥，qingxiang請向url上傳遞一個唯一的id（通常是隨機數(shù)）
xmlhttp.open('GET', '/try/ajax/get.html?rand=' + Math.random(), true)
xmlhttp.send()
實踐一下 - post
xmlhttp.open('POST', 'try/ajax/post.html', true)
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send({ 'rand=' + Math.random() + '&version=1.0.0'})
post方式一般需要增加請求頭，表示發(fā)送給服務(wù)端參數(shù)的數(shù)據(jù)格式類型杭棵，如果是json/application,則send的參數(shù)就是json格式
?
xhr的第二個參數(shù)： url
??很直觀的參數(shù)：資源路徑婚惫；就是請求服務(wù)器資源的位置，可以是任何類型的文件魂爪。我們不僅能用url訪問一個網(wǎng)站先舷，還能用絕對路徑方式訪問到各個具體文件
xhr的第三個參數(shù)： async
?ajax的核心就是異步，true表示允許異步滓侍，false則使用同步請求蒋川。
如果xhr要使用ajax時，第三個參數(shù)必須置為true
Ajax的異步撩笆，是解決程序因等待某個較大的腳本文件或請求的執(zhí)行完成而導致程序阻塞的跨越性進步捺球，通過ajax，javascript能夠無需等待服務(wù)的響應(yīng)夕冲，而再等待服務(wù)響應(yīng)的時候執(zhí)行其他腳本懒构，當響應(yīng)就緒后再對其進行處理。
onreadystatechange 事件規(guī)定了事件在就緒狀態(tài)時執(zhí)行的函數(shù)
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('respText') = xmlhttp.responseText
}
}
xmlhttp.open('GET', '/try/ajax/demo.html', true)
xmlhttp.send()
xhr的服務(wù)響應(yīng)
?XMLHttpResponse對象有兩個響應(yīng)屬性耘擂，responseText（以字符串形式接收響應(yīng)） 或 responseXML（以xml形式接收響應(yīng)）胆剧，使用哪個決定于服務(wù)器給返回的數(shù)據(jù)類型是哪一種。常用responseText
Ajax的onreadystatechange事件
?該事件是ajaHx處理業(yè)務(wù)邏輯的核心事件醉冤，當請求被發(fā)送到服務(wù)器時秩霍，服務(wù)器需要執(zhí)行一些基于響應(yīng)的任務(wù)，每當readyState改變時蚁阳，就會觸發(fā) onreadystatechange事件铃绒，readyState存有XMLHttpResponse的狀態(tài)信息
XMLHttpResponse 的三個基本且重要的基本屬性，
- onreadystatechange用于存儲函數(shù)（函數(shù)名）螺捐，當readyState改變時觸發(fā)該函數(shù)
- readyState 存儲xhr的狀態(tài)颠悬，從0-4發(fā)生變化； 0： 請求未初始化定血； 1： 服務(wù)器已建立鏈接赔癌； 2： 請求已接收； 3：請求處理中澜沟； 4： 請求已完成灾票，且響應(yīng)已就緒。
- status 請求的狀態(tài)茫虽； 200： 成功返回刊苍； 404： 未找到頁面...
從上面可以看出既们，當readyState為4時且status為200時，就已經(jīng)表示請求已經(jīng)完正什，響應(yīng)準備就緒啥纸，這時我們就可以處理后續(xù)的操作。
注意：onreadystatechange一共被觸發(fā)5次婴氮，我們需要規(guī)定條件語句來執(zhí)行我們想要執(zhí)行的操作脾拆。
使用回調(diào)函數(shù)
?回調(diào)函數(shù)是一種以參數(shù)的形式傳遞個另一個函數(shù)的函數(shù)。如果我們需要創(chuàng)建多個AJAX任務(wù)莹妒，為提高代碼的復用性并降低耦合名船，我們需要為XMLHttpRequest對象編寫一個標準的函數(shù)，并為每個ajax調(diào)用該函數(shù)旨怠。
??該函數(shù)調(diào)用應(yīng)該包含URL以及發(fā)生 onreadystatechange 事件時執(zhí)行的任務(wù)（根據(jù)需求調(diào)用相應(yīng)的邏輯）`
function myFunction(){
loadXMLDoc('/try/ajax/ajax_info.txt', function(){
if (xmlhttp.readyState==4 && xmlhttp.status == 200){
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
})
}
