ajax簡介
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
AJAX = 異步 JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容,必須重載整個網(wǎng)頁頁面。
下面步入正題
前兩天xz問我知不知道ajax怎么實現(xiàn)跨域調(diào)用,因為沒聽過這個概念,所以也知道怎么實現(xiàn)。xz說ajax跨域調(diào)用有幾種方式,一種是iframe的方式,通過設(shè)置document.domain來實現(xiàn),一種則是通過設(shè)置jsonp來實現(xiàn)。這兩天查了一下資料,也寫了幾個demo,下面?zhèn)渫幌隆?/p>
我在本地建了三個站點,并設(shè)置了host文件模擬跨子域和跨全域
coolkissbh.com
blog.coolkissbh.com
coolkiss.com
一 、ajax 跨域調(diào)用會有什么問題
coolkissbh.com下頁面使用jquery的$.get調(diào)用blog.coolkissbh.com頁面
跨域請求,IE 7和8下報 access denied錯誤
IE 6.0 則彈出 this page is accessing information that is not under its control. this poses a security risk.do you want to continue?提示框
firefox 沒報錯,但是不會做出請求
二、ajax跨域?qū)崿F(xiàn)方法
1、跨子域?qū)崿F(xiàn)ajax
要求:實現(xiàn)coolkissbh.com的頁面 異步請求 blog.coolkissbh.com下的頁面
實現(xiàn)方法:借助iframe,通過設(shè)置iframe的src屬性,嵌入blog.coolkissbh.com下的一個頁面,比如AjaxProxy.aspx,然后由該頁面去請求Ajax
AjaxProxy請求完畢后,通過parent對象把返回的數(shù)據(jù)回傳給coolkissbh.com的主頁面。因此,真正的異步請求還是發(fā)生在blog.coolkissbh.com的域名下
注意:通過這種方法實現(xiàn)的跨子域ajax請求,需要在coolkissbh.com的請求頁面以及AjaxProxy.aspx頁面中設(shè)置同樣的域名,也就是
document.domain = "coolkissbh.com";
注意:關(guān)于設(shè)置domain的問題,如果是跨全域,使用上面方法時候,firefox下會提示
Illegal document.domain value" code: "1009的錯誤,因此跨全域只能使用第二種方法
處理返回的數(shù)據(jù):
AjaxProxy.aspx將ajax返回的數(shù)據(jù)保存到一個全局變量中,coolkissbh.com通過setInterval定時去判斷iframe的頁面是否加載完成,如果加載完成,則獲取AjaxProxy.aspx的全局變量值。然后再做其它處理。
這里有個問題:我原來是打算在AjaxProxy.aspx的ajax請求完成后,調(diào)用parent的方法,同時將數(shù)據(jù)返回,但是在IE下,點擊第一次時候就會出現(xiàn)“permission denied”的錯誤,再次點擊就正常了。在firefox下就沒有問題,不知道是什么原因。
新聞熱點
疑難解答
圖片精選