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ù),