ajax簡(jiǎn)介

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。

AJAX = 異步 JavaScript和XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）。

AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。

通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

下面步入正題

前兩天xz問(wèn)我知不知道ajax怎么實(shí)現(xiàn)跨域調(diào)用，因?yàn)闆](méi)聽(tīng)過(guò)這個(gè)概念，所以也知道怎么實(shí)現(xiàn)。xz說(shuō)ajax跨域調(diào)用有幾種方式，一種是iframe的方式，通過(guò)設(shè)置document.domain來(lái)實(shí)現(xiàn)，一種則是通過(guò)設(shè)置jsonp來(lái)實(shí)現(xiàn)。這兩天查了一下資料，也寫了幾個(gè)demo，下面?zhèn)渫幌隆?/p>

我在本地建了三個(gè)站點(diǎn),并設(shè)置了host文件模擬跨子域和跨全域

coolkissbh.com

blog.coolkissbh.com

coolkiss.com

一 、ajax 跨域調(diào)用會(huì)有什么問(wèn)題

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 沒(méi)報(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，通過(guò)設(shè)置iframe的src屬性，嵌入blog.coolkissbh.com下的一個(gè)頁(yè)面，比如AjaxProxy.aspx,然后由該頁(yè)面去請(qǐng)求Ajax

AjaxProxy請(qǐng)求完畢后，通過(guò)parent對(duì)象把返回的數(shù)據(jù)回傳給coolkissbh.com的主頁(yè)面。因此，真正的異步請(qǐng)求還是發(fā)生在blog.coolkissbh.com的域名下

注意：通過(guò)這種方法實(shí)現(xiàn)的跨子域ajax請(qǐng)求，需要在coolkissbh.com的請(qǐng)求頁(yè)面以及AjaxProxy.aspx頁(yè)面中設(shè)置同樣的域名，也就是
document.domain = "coolkissbh.com";

注意：關(guān)于設(shè)置domain的問(wèn)題，如果是跨全域，使用上面方法時(shí)候，firefox下會(huì)提示
Illegal document.domain value" code: "1009的錯(cuò)誤，因此跨全域只能使用第二種方法

處理返回的數(shù)據(jù)：

AjaxProxy.aspx將ajax返回的數(shù)據(jù)保存到一個(gè)全局變量中，coolkissbh.com通過(guò)setInterval定時(shí)去判斷iframe的頁(yè)面是否加載完成，如果加載完成，則獲取AjaxProxy.aspx的全局變量值。然后再做其它處理。

這里有個(gè)問(wèn)題：我原來(lái)是打算在AjaxProxy.aspx的ajax請(qǐng)求完成后，調(diào)用parent的方法，同時(shí)將數(shù)據(jù)返回，但是在IE下，點(diǎn)擊第一次時(shí)候就會(huì)出現(xiàn)“permission denied”的錯(cuò)誤,再次點(diǎn)擊就正常了。在firefox下就沒(méi)有問(wèn)題，不知道是什么原因。

2，跨全域?qū)崿F(xiàn)ajax

要求：實(shí)現(xiàn)coolkissbh.com的頁(yè)面異步請(qǐng)求coolkiss.com下的頁(yè)面

實(shí)現(xiàn)方法：上面提到跨全域不能通過(guò)設(shè)置domain方法來(lái)實(shí)現(xiàn)。但是可以使用script標(biāo)簽來(lái)實(shí)現(xiàn)，通過(guò)設(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èn)題，但是就無(wú)法像jquery那樣獲取ajax調(diào)用的各個(gè)狀態(tài)

3，通過(guò)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();
}
}
}

callback=? 其中？會(huì)自動(dòng)替換為function(data)函數(shù)。

以上所述是小編給大家介紹的Ajax 跨域如何實(shí)現(xiàn)的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

最新評(píng)論