【原創(chuàng)】Ajax的用法總結(jié)

一穴吹、什么是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();

}

公眾號原文

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末诸迟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子愕乎,更是在濱河造成了極大的恐慌阵苇,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件感论,死亡現(xiàn)場離奇詭異绅项,居然都是意外死亡,警方通過查閱死者的電腦和手機比肄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門快耿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人芳绩,你說我怎么就攤上這事掀亥。” “怎么了妥色?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵搪花,是天一觀的道長。 經(jīng)常有香客問我嘹害,道長鳍侣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任吼拥,我火速辦了婚禮倚聚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘凿可。我一直安慰自己惑折,他們只是感情好授账,可當(dāng)我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惨驶,像睡著了一般白热。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上粗卜,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天屋确,我揣著相機與錄音,去河邊找鬼续扔。 笑死攻臀,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的纱昧。 我是一名探鬼主播刨啸,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼识脆!你這毒婦竟也來了设联?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤灼捂,失蹤者是張志新(化名)和其女友劉穎离例,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悉稠,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡宫蛆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了偎球。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡辑甜,死狀恐怖衰絮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情磷醋,我是刑警寧澤猫牡,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站邓线,受9級特大地震影響淌友,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜骇陈,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一震庭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧你雌,春花似錦器联、人聲如沸二汛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肴颊。三九已至,卻和暖如春渣磷,著一層夾襖步出監(jiān)牢的瞬間婿着,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工醋界, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留竟宋,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓物独,卻偏偏與公主長得像袜硫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子挡篓,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容