为什么ajax会出现跨域,ajax跨域访问跟产生的原因

ajax跨域访问和产生的原因

document.domain = "css88.com";

var createAjaxIframe={

appIframe: function(iframeId, iframeSrc){

var iframe = document.createElement("iframe");

iframe.src = iframeSrc// "http://css88.com/demo/domain/iframe.html";

iframe.id = iframeId;

iframe.style.display = "none";

if (iframe.attachEvent) {

iframe.attachEvent("onload", function(){

createAjaxIframe.domainAjax(iframeId);

});

}else {

iframe.onload = function(){

createAjaxIframe.domainAjax(iframeId);

};

}

document.body.appendChild(iframe);

},

domainAjax: function(iframeId){

var iframeDom = document.getElementById(iframeId).contentWindow.$;

iframeDom.getJSON("http://css88.com/demo/iframe-domain/city.html", function(date){

var cityOption = "";

for (i = 0; i < date.length; i++) {

cityOption += date[i].c_name + "--" + date[i].c_value + "
"

}

$("#test").html(cityOption);

});

}

};

createAjaxIframe.appIframe("iframe","http://css88.com/demo/iframe-domain/iframe.html");

使用＜script＞标签解决ajax跨域：

这个方法是利用＜script＞标签中的src来query一个aspx获得response，因为＜script＞标签的src属性不存在跨域的问题。

举个例子来让大家看得更清楚一点吧：

function get(url) {

var obj = document.getElementById("getAspx");

obj.src = url;

(obj.readStatus == 200)

{

alert(responseVal);//如果成功，会弹出Dylan

}

}

function query() {

get(getDemo.aspx);

}

getDemo.aspx后台代码：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace LearnJS

{

public partial class getDemo : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

Response.Write("var responseVal='Dylan'");

}

}

}

这个方法又叫做ajaj或者ajax without xmlHttprequest，把x换成了j，是因为使用了＜script＞标签而没有用到xml和xmlHttprequest的缘故。这种方法似乎有点“另类”，哈哈。

jquery解决ajax跨域问题：

$(document).ready(function(){

var oBtnTest = $("#btnTest");

oBtnTest.click(function(){

oBtnTest.disabled = true;

var oResult = $("#result");

oResult.html("loading").css("color","red");

jQuery.getScript("http://www.csdn.com/test/js.txt",

function(){

oResult.html("name:" + Dylan.name + "
email:" + Dylan.email).css("color","black");

oBtnTest.disabled = false;

});

});

});

BtnTest

远程服务器端js.txt中的内容为:var Dylan= {name:"Dylan",email:Dylan@163.com}

笔者感觉这种方式更加简洁。呵呵。当然，读者可以根据实际情况，任意选择实现方式。

为什么会产生跨域的问题主要原因是由于js在设计时的同源策略

javascript 同源策略：

同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator 2.0。

Mozilla 认为两个页面拥有相同的源，如果它们的协议、端口(如果指明了的话)和主机名都相同。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:

URL

结果

原因

http://store.company.com/dir2/other.html

成功

http://store.company.com/dir/inner/another.html

成功

https://store.company.com/secure.html

失败

协议不同

http://store.company.com:81/dir/etc.html

失败

端口不同

http://news.company.com/dir/other.html

失败

主机名不同

在同源策略中有一个例外，脚本可以设置 document.domain 的值为当前域的一个后缀，比如域store.company.com的后缀可以是company.com。如果这样做的话，短的域将作为后续同源检测的依据。例如，假设在 http://store.company.com/dir/other.html 中的一个脚本执行了下列语句：

document.domain = "company.com";

这条语句执行之后，页面将会成功地通过对 http://company.com/dir/page.html 的同源检测。而同理，company.com 不能设置 document.domain 为 othercompany.com.