淺談ajax
前幾天，跟一個比較資深的項目經(jīng)理聊了會，談到了面試，依舊老生常談的那些面試題，ajax、數(shù)據(jù)庫這些都是必問題，正好自己親戚家里有小孩畢業(yè)了，就順便整理了一些。
ajax是前后端數(shù)據(jù)交互的重要手段
前后端交互一定要是字符串的形式?。?！ 牢記
Ajax ：異步 JavaScript 和 XML，它并不是 JavaScript 的一種單一技術(shù)，而是利用了一系列交互式網(wǎng)頁應(yīng)用相關(guān)的技術(shù)所形成的結(jié)合體
由于ajax的多眾性，他的缺點和優(yōu)點都非常明顯。
優(yōu)點
1.不需要插件支持（一般瀏覽器且默認開啟 JavaScript 即可）；
2.實現(xiàn)無加載刷新頁面，用戶體驗極佳；
3.提升 Web 程序的性能（在傳遞數(shù)據(jù)方面做到按需發(fā)送，不必整體提交）；
4.減輕服務(wù)器和帶寬的負擔(dān)（將服務(wù)器的一些操作轉(zhuǎn)移到客戶端）；
缺點
1.不同版本的瀏覽器對 XMLHttpRequest 對象支持度不足(比如 IE5 之前)；
2.前進、后退的功能被破壞（因為 Ajax 永遠在當(dāng)前頁，不會記錄前后頁面）；
3.搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解 JS 引起變化數(shù)據(jù)
的內(nèi)容）；
AJAX的兼容問題：
ajax = new XMLHttpRequest();
ajax = new ActiveXObject("Microsoft.XMLHTTP");? ? //兼容IE5及
以下，可以忽視了
AJAX的緩存問題：
我們可以通過時間戳來輕易躲開瀏覽器的緩存
ajaxGet('?t='+ new Date().getTime(),fn)
ajax.readyState自身的四種狀態(tài)
0 －（未初始化）還沒有調(diào)用send()方法
1 －（載入）已調(diào)用send()方法，正在發(fā)送請求
2 －（載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 －（交互）正在解析響應(yīng)內(nèi)容
4 －（完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
當(dāng)創(chuàng)建了XMLHttpRequest對象后，要先設(shè)置onreadystatechange的回調(diào)函數(shù)。在回調(diào)函數(shù)中，通常我們只需通過readyState==4判斷請求是否完成，如果已完成，再根據(jù)status === 200判斷是否是一個成功的響應(yīng)。
XMLHttpRequest對象的open()方法有3個參數(shù)
第一個參數(shù)指定是GET還是POST
第二個參數(shù)指定URL地址
第三個參數(shù)指定是否使用異步，默認是true，所以不用寫。
注意
千萬不要把第三個參數(shù)指定為false，否則瀏覽器將停止響應(yīng)，直到ajax請求完成。
如果這個請求耗時10秒，那么10秒內(nèi)你會發(fā)現(xiàn)瀏覽器處于“假死”狀態(tài)。
最后調(diào)用send()方法才真正發(fā)送請求。GET請求不需要參數(shù)，POST請求需要把body部分以字符串或者FormData對象傳進去。
提示：GET請求具有以下的幾個特點：
· GET 請求可被緩存
· GET 請求保留在瀏覽器歷史記錄中
· GET 請求可被收藏為書簽
· GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用
· GET 請求有長度限制
· GET 請求只應(yīng)當(dāng)用于取回數(shù)據(jù)
POST請求的特點如下：
· POST 請求不會被緩存
· POST 請求不會保留在瀏覽器歷史記錄中
· POST 請求不能被收藏為書簽
· POST 請求對數(shù)據(jù)長度沒有要求
實現(xiàn)AJAX的詳細過程：
? ? 1.new XMLHttpRequest創(chuàng)建一個XHR對象:
? ? var AJAX=new XMLHttpRequest( );
? ? 2.使用open()方法初始化XMLHttpRequest對象,指定URL
? ? AJAX.open('get','data/test.json',true);
? ? 3.設(shè)置回調(diào)函數(shù)，當(dāng)響應(yīng)成功時調(diào)用:
? ? ajax.onreadystatechange = function(){
? ? ? ? if (ajax.readyState == 4 && ajax.status == 200){
? ? ? ? ? ? func_succ(ajax.responseText);
? ? ? ? }else if(ajax.readyState == 4 && ajax.status != 200){
? ? ? ? ? ? //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);
? ? ? ? }
? ? };
? 4. 使用send()方法發(fā)送請求
? ? ajax.send(null);
