Ajax 中怎么實(shí)現(xiàn)跨域,針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶提供了成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,成都網(wǎng)站設(shè)計(jì),1元廣告,成都做網(wǎng)站選創(chuàng)新互聯(lián),貼合企業(yè)需求,高性價(jià)比,滿足客戶不同層次的需求一站式服務(wù)歡迎致電。
一 、ajax 跨域調(diào)用會(huì)有什么問題
coolkissbh.com下頁(yè)面使用jquery的$.get調(diào)用blog.coolkissbh.com頁(yè)面
跨域請(qǐng)求,IE 7和8下報(bào) access denied錯(cuò)誤
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 沒報(bào)錯(cuò),但是不會(huì)做出請(qǐng)求
二、ajax跨域?qū)崿F(xiàn)方法
1、跨子域?qū)崿F(xiàn)ajax
要求:實(shí)現(xiàn)coolkissbh.com的頁(yè)面 異步請(qǐng)求 blog.coolkissbh.com下的頁(yè)面
實(shí)現(xiàn)方法:借助iframe,通過設(shè)置iframe的src屬性,嵌入blog.coolkissbh.com下的一個(gè)頁(yè)面,比如AjaxProxy.aspx,然后由該頁(yè)面去請(qǐng)求Ajax
AjaxProxy請(qǐng)求完畢后,通過parent對(duì)象把返回的數(shù)據(jù)回傳給coolkissbh.com的主頁(yè)面。因此,真正的異步請(qǐng)求還是發(fā)生在blog.coolkissbh.com的域名下
注意:通過這種方法實(shí)現(xiàn)的跨子域ajax請(qǐng)求,需要在coolkissbh.com的請(qǐng)求頁(yè)面以及AjaxProxy.aspx頁(yè)面中設(shè)置同樣的域名,也就是
document.domain = "coolkissbh.com";
注意:關(guān)于設(shè)置domain的問題,如果是跨全域,使用上面方法時(shí)候,firefox下會(huì)提示
Illegal document.domain value" code: "1009的錯(cuò)誤,因此跨全域只能使用第二種方法
處理返回的數(shù)據(jù):
AjaxProxy.aspx將ajax返回的數(shù)據(jù)保存到一個(gè)全局變量中,coolkissbh.com通過setInterval定時(shí)去判斷iframe的頁(yè)面是否加載完成,如果加載完成,則獲取AjaxProxy.aspx的全局變量值。然后再做其它處理。
這里有個(gè)問題:我原來是打算在AjaxProxy.aspx的ajax請(qǐng)求完成后,調(diào)用parent的方法,同時(shí)將數(shù)據(jù)返回,但是在IE下,點(diǎn)擊第一次時(shí)候就會(huì)出現(xiàn)“permission denied”的錯(cuò)誤,再次點(diǎn)擊就正常了。在firefox下就沒有問題,不知道是什么原因。
2,跨全域?qū)崿F(xiàn)ajax
要求:實(shí)現(xiàn)coolkissbh.com的頁(yè)面異步請(qǐng)求coolkiss.com下的頁(yè)面
實(shí)現(xiàn)方法:上面提到跨全域不能通過設(shè)置domain方法來實(shí)現(xiàn)。但是可以使用script標(biāo)簽來實(shí)現(xiàn),通過設(shè)置script標(biāo)簽的src屬性為coolkiss.com域名下的一個(gè)頁(yè)面,同時(shí)將callback函數(shù)傳到該頁(yè)面中,例如:
RequestAjax_CrossSite = function() { var obj = $("#crossSitePage"); obj.attr("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3"); } handleData3 = function(data) { $("#ResponseData").html(data); }
CrossSite.aspx返回一個(gè)字符串,將返回的數(shù)據(jù)回傳給callback,執(zhí)行回調(diào)函數(shù),實(shí)現(xiàn)ajax,例如:
Response.Clear();
Response.Write(string.Format("{0}('{1}')", Request["callback"], responseData));
Response.End();
注意:這種方法同樣可以用于處理跨子域ajax的問題,但是就無(wú)法像jquery那樣獲取ajax調(diào)用的各個(gè)狀態(tài)
3,通過jquery的jsonp實(shí)現(xiàn)跨域ajax,其實(shí)原理跟第二種方法是一樣的,支持跨全域和子域
jquery 1.2 后添加了對(duì)跨域ajax的調(diào)用,也就是$.getJSON 函數(shù)
調(diào)用方法如下:
下面是coolkissbh.com下的頁(yè)面
//使用jsonp實(shí)現(xiàn)跨全域 RequestAjax_JSONP = function() { var obj = $("#crossSitePage"); $.getJSON("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + Math.random(), function(data) { //alert(data); $("#ResponseData").html(data.content); }); }
coolkiss.com后臺(tái)處理代碼,將一個(gè)json對(duì)象傳遞給callback:
public partial class CrossSite : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { LoadData_JSONP(); } } protected void LoadData_JSONP() { string responseData = "{content:\"hello world from coolkiss.com\"}"; if (Request["callback"] != null && !string.IsNullOrEmpty(Request["callback"])) { Response.Clear(); Response.Write(string.Format("{0}({1})", Request["callback"], responseData)); Response.End(); } } }
關(guān)于Ajax 中怎么實(shí)現(xiàn)跨域問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。