一穴吹、什么是Ajax
Ajax英文全稱為“ Asynchr JavsScript and XML”(異步的JavaScript和XML)接癌,是一種創(chuàng)建
交互式網(wǎng)頁的開發(fā)技術(shù)趁猴。
二杨伙、Ajax技術(shù)的核心
Ajax是一系列相關(guān)技術(shù)的融合淘衙,其核心包括XMLHttpRequest横浑、JavsScript和DOM技術(shù)剔桨,數(shù)據(jù)格式
的不同可能會用到Json或者XML的技術(shù)。
XMLHttpRequest是它的核心的內(nèi)容徙融,它能夠為頁面中的JavaScript腳本提供特定的通信方式洒缀,
從而使頁面的javascript腳本和服務(wù)器之間形成動態(tài)交互的效果,XMLHTTPRequest的最大的優(yōu)點
是頁面內(nèi)的javascript腳本可以不用刷新頁面欺冀,而直接和服務(wù)器發(fā)生交互树绩,從而實現(xiàn)頁面無刷新的效果蛇摸。
三杜顺、XMLHttpRequest方法屬性描述
1、方法描述
abort()停止當(dāng)前請求
getAllResponseHeaders()把HTTP請求的所有響應(yīng)首部作為鍵/值對返回
getResponseHeader("header")返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])建立對服務(wù)器的調(diào)用起宽。method參數(shù)可以是GET职车、POST或PUT瘫俊。
url參數(shù)可以是相對URL或絕對URL。這個方法還包括3個可選的參數(shù)悴灵,是否異步军援,用戶名,密碼
send(content)向服務(wù)器發(fā)送請求
setRequestHeader("header", "value")把指定首部設(shè)置為所提供的值称勋。在設(shè)置任何首部之前必須先調(diào)用open()胸哥。
設(shè)置header并和請求一起發(fā)送 ('post'方法一定要 )
XMLHttpRequest 對象屬性描述
2、方法描述
onreadystatechange狀態(tài)改變的事件觸發(fā)器赡鲜,每個狀態(tài)改變時都會觸發(fā)這個事件處理器空厌,通常會調(diào)用一個JavaScript函數(shù)
readyState請求的狀態(tài)。有5個可取值:0 = 未初始化银酬,1 = 正在加載嘲更,2 = 已加載,3 = 交互中揩瞪,4 = 完成
responseText服務(wù)器的響應(yīng)赋朦,返回數(shù)據(jù)的文本。
responseXML服務(wù)器的響應(yīng),返回數(shù)據(jù)的兼容DOM的XML文檔對象 宠哄,這個對象可以解析為一個DOM對象壹将。
responseBody服務(wù)器返回的主題(非文本格式)
responseStream服務(wù)器返回的數(shù)據(jù)流
status服務(wù)器的HTTP狀態(tài)碼(如:404 = "文件末找到" 、200 ="成功" 毛嫉,等等)
statusText服務(wù)器返回的狀態(tài)文本信息 诽俯,HTTP狀態(tài)碼的相應(yīng)文本(OK或Not Found(未找到)等等)
四、Ajax工作原理原理
AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個中間層承粤,使用戶操作與服務(wù)器相應(yīng)異步化暴区。并不是所有的用戶請求
都提交給服務(wù)器,像一些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給AJAX引擎自己來做辛臊,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由
AJAX引擎代為向服務(wù)器提交請求仙粱。如圖:
五、Ajax的優(yōu)點
1彻舰、減輕服務(wù)器的負(fù)擔(dān)缰盏,提升了網(wǎng)站的性能。
2淹遵、無刷新更新頁面,減少了用戶等待網(wǎng)站加載的時間负溪。
3透揣、用戶體驗更加友好,可以避免出現(xiàn)白屏的情況川抡。
4辐真、Ajax是基于標(biāo)準(zhǔn)化并且廣泛使用的技術(shù)幾乎所有的主流瀏覽器都支持該技術(shù),ye不需要單獨安裝插件崖堤。
5侍咱、Ajax可以使Web中的頁面和應(yīng)用分離,便于分工合作密幔。
六楔脯、Ajax缺點
1、對于移動設(shè)備不能很好的支持胯甩。
2昧廷、Ajax干掉了back按鈕,即對瀏覽器后退機制的破壞偎箫。
3、安全問題淹办。比如:跨站點腳步攻擊眉枕、SQL注入攻擊和基于credentials的安全漏洞等。
4、對搜索引擎的支持比較弱速挑。
5谤牡、破壞了程序的異常機制。至少從目前看來梗摇,像ajax.dll拓哟,ajaxpro.dll這些ajax框架是會破壞程序的異常機制的。
造成調(diào)試的困難伶授。
七断序、使用原則
1、Ajax適用場景
表單驅(qū)動的交互
深層次的樹的導(dǎo)航
快速的用戶與用戶間的交流響應(yīng)
類似投票糜烹、yes/no等無關(guān)痛癢的場景
對數(shù)據(jù)進行過濾和操縱相關(guān)數(shù)據(jù)的場景
普通的文本輸入提示和自動完成的場景
2违诗、Ajax不適用場景
部分簡單的表單
搜索
基本的導(dǎo)航
替換大量的文本
對呈現(xiàn)的操縱
八、原生AJAX寫法
var XHR=null;
if (window.XMLHttpRequest) {
// 非IE內(nèi)核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE內(nèi)核,這里早期IE的版本寫法不同,具體可以查詢下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", "ajaxServer.action");
XHR.onreadystatechange = function () {
// readyState值說明
// 0,初始化,XHR對象已經(jīng)創(chuàng)建,還未執(zhí)行open
// 1,載入,已經(jīng)調(diào)用open方法,但是還沒發(fā)送請求
// 2,載入完成,請求已經(jīng)發(fā)送完成
// 3,交互,可以接收到部分?jǐn)?shù)據(jù)
// status值說明
// 200:成功
// 404:沒有發(fā)現(xiàn)文件疮蹦、查詢或URl
// 500:服務(wù)器產(chǎn)生內(nèi)部錯誤
if (XHR.readyState == 4 && XHR.status == 200) {
// 這里可以對返回的內(nèi)容做處理
// 一般會返回JSON或XML數(shù)據(jù)格式
console.log(XHR.responseText);
// 主動釋放,JS本身也會回收的
XHR = null;
}
};
XHR.send();
}