ajax

ajax的工作原理


Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發(fā)異步請求,從服務器獲得數(shù)據(jù)固逗,然后用javascript來操作DOM而更新頁面沪斟。這其中最關鍵的一步就是從服務器獲得請求數(shù)據(jù)谭确。要清楚這個過程和原理,我們必須對XMLHttpRequest有所了解尉姨。

XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的吗冤,是一種支持異步請求的技術又厉。簡單的說,也就是javascript可以及時向服務器提出請求和處理響應椎瘟,而不阻塞用戶馋没。達到無刷新的效果。

jQuery框架中$.ajax()的常用參數(shù)

type

類型:String

默認值: "GET")降传。請求方式("POST"或"GET")篷朵,默認為"GET"。注意:其它HTTP請求方法婆排,如PUT和DELETE也可以使用声旺,但僅部分瀏覽器支持。

url

類型:String

默認值:當前頁地址段只。發(fā)送請求的地址腮猖。

success

類型:Function

請求成功后的回調函數(shù)。

參數(shù):由服務器返回赞枕,并根據(jù)dataType參數(shù)進行處理后的數(shù)據(jù)澈缺;描述狀態(tài)的字符串。

這是一個Ajax事件炕婶。


async

類型:Boolean

默認值: true姐赡。默認設置下,所有請求均為異步請求柠掂。如果需要發(fā)送同步請求项滑,請將此選項設置為false。

注意涯贞,同步請求將鎖住瀏覽器枪狂,用戶其它操作必須等待請求完成才可以執(zhí)行。

cache

類型:Boolean

默認值: true宋渔,dataType為script和jsonp時默認為false州疾。設置為false將不緩存此頁面。

jQuery 1.2新功能皇拣。


data

類型:String

發(fā)送到服務器的數(shù)據(jù)严蓖。將自動轉換為請求字符串格式。GET請求中將附加在URL后。查看processData選項說明以禁止此自動轉換谈飒。必須為Key/Value格式岂座。如果為數(shù)組,jQuery將自動為不同值對應同一個名稱杭措。如{foo:["bar1",

"bar2"]}轉換為'&foo=bar1&foo=bar2'费什。

dataType

類型:String

預期服務器返回的數(shù)據(jù)類型。如果不指定手素,jQuery將自動根據(jù)HTTP包MIME信息來智能判斷鸳址,比如XML MIME類型就被識別為XML。在1.4中泉懦,JSON就會生成一個JavaScript對象稿黍,而script則會執(zhí)行這個腳本。隨后服務器端返回的數(shù)據(jù)會根據(jù)這個值解析后崩哩,傳遞給回調函數(shù)巡球。可用值:

·"xml":返回XML文檔邓嘹,可用jQuery處理酣栈。

·"html":返回純文本HTML信息;包含的script標簽會在插入dom時執(zhí)行汹押。

·"script":返回純文本JavaScript代碼矿筝。不會自動緩存結果。除非設置了"cache"參數(shù)棚贾。注意:在遠程請求時(不在同一個域下)窖维,所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)

·"json":返回JSON數(shù)據(jù)妙痹。

·"jsonp": JSONP格式铸史。使用JSONP形式調用函數(shù)時,如"myurl?callback=?" jQuery將自動替換?為正確的函數(shù)名细诸,以執(zhí)行回調函數(shù)沛贪。

·"text":返回純文本字符串

error

類型:Function

默認值:自動判斷(xml或html)。請求失敗時調用此函數(shù)震贵。

有以下三個參數(shù):XMLHttpRequest對象、錯誤信息水评、(可選)捕獲的異常對象猩系。

如果發(fā)生了錯誤,錯誤信息(第二個參數(shù))除了得到null之外中燥,還可能是"timeout", "error",

"notmodified"和"parsererror"寇甸。

這是一個Ajax事件。

Ajax的最大的特點

Ajax可以實現(xiàn)異步通信效果,實現(xiàn)頁面局部刷新拿霉,帶來更好的用戶體驗吟秩;按需獲取數(shù)據(jù),節(jié)約帶寬資源

ajax的缺點

1绽淘、ajax不支持瀏覽器back按鈕涵防。

2、安全問題AJAX暴露了與服務器交互的細節(jié)沪铭。

3壮池、對搜索引擎的支持比較弱。

4杀怠、破壞了程序的異常機制

ajax請求的時候get和post方式的區(qū)別

get一般用來進行查詢操作椰憋,url地址有長度限制,請求的參數(shù)都暴露在url地址當中赔退,如果傳遞中文參數(shù)橙依,需要自己進行編碼操作,安全性較低硕旗。

post請求方式主要用來提交數(shù)據(jù)票编,沒有數(shù)據(jù)長度的限制,提交的數(shù)據(jù)內容存在于http請求體中卵渴,數(shù)據(jù)不會暴漏在url地址中慧域。

ajax的過程

1.創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調用對象

2.創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息

3.設置響應HTTP請求狀態(tài)變化的函數(shù)

4.發(fā)送HTTP請求

5.獲取異步調用返回的數(shù)據(jù)

6.使用JavaScript和DOM實現(xiàn)局部刷新

JavaScript的同源策略

同源策略是客戶端腳本(尤其是Javascript)的重要的安全度量標準浪读。它最早出自Netscape Navigator2.0昔榴,其目的是防止某個文檔或腳本從多個不同源裝載。所謂同源指的是:協(xié)議碘橘,域名互订,端口相同,同源策略是一種安全協(xié)議痘拆,指一段腳本只能讀取來自同一來源的窗口和文檔的屬性仰禽。


解決跨域問題

理解跨域的概念:協(xié)議、域名纺蛆、端口都相同才同域吐葵,否則都是跨域

出于安全考慮,服務器不允許ajax跨域獲取數(shù)據(jù)桥氏,但是可以跨域獲取文件內容温峭,所以基于這一點,可以動態(tài)創(chuàng)建script標簽字支,使用標簽的src屬性訪問js文件的形式獲取js腳本凤藏,并且這個js腳本中的內容是函數(shù)調用奸忽,該函數(shù)調用的參數(shù)是服務器返回的數(shù)據(jù),為了獲取這里的參數(shù)數(shù)據(jù)揖庄,需要事先在頁面中定義回調函數(shù)栗菜,在回調函數(shù)中處理服務器返回的數(shù)據(jù),

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蹄梢,一起剝皮案震驚了整個濱河市疙筹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌检号,老刑警劉巖腌歉,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異齐苛,居然都是意外死亡翘盖,警方通過查閱死者的電腦和手機惩猫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門淋淀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人群井,你說我怎么就攤上這事玛痊√保” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵擂煞,是天一觀的道長混弥。 經常有香客問我,道長对省,這世上最難降的妖魔是什么蝗拿? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮蒿涎,結果婚禮上哀托,老公的妹妹穿的比我還像新娘。我一直安慰自己劳秋,他們只是感情好仓手,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著玻淑,像睡著了一般嗽冒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上岁忘,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天辛慰,我揣著相機與錄音,去河邊找鬼干像。 笑死帅腌,一個胖子當著我的面吹牛,可吹牛的內容都是我干的麻汰。 我是一名探鬼主播速客,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼五鲫!你這毒婦竟也來了溺职?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤位喂,失蹤者是張志新(化名)和其女友劉穎浪耘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體塑崖,經...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡七冲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了规婆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片澜躺。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖抒蚜,靈堂內的尸體忽然破棺而出掘鄙,到底是詐尸還是另有隱情,我是刑警寧澤嗡髓,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布操漠,位于F島的核電站,受9級特大地震影響饿这,放射性物質發(fā)生泄漏浊伙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一蛹稍、第九天 我趴在偏房一處隱蔽的房頂上張望吧黄。 院中可真熱鬧,春花似錦唆姐、人聲如沸拗慨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赵抢。三九已至,卻和暖如春声功,著一層夾襖步出監(jiān)牢的瞬間烦却,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工先巴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留其爵,地道東北人冒冬。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像摩渺,于是被迫代替她去往敵國和親简烤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348

推薦閱讀更多精彩內容