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 + "<br />"
			}
			$("#test").html(cityOption);
		});
	}
	
};
createAjaxIframe.appIframe("iframe","http://css88.com/demo/iframe-domain/iframe.html");

?

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax跨域问题</title>
    <script type="text/javascript" src="" id="getAspx">
    </script>
    <script type="text/javascript">
        function get(url) {
            var obj = document.getElementById("getAspx");
            obj.src = url;
            (obj.readStatus == 200)
            {
                alert(responseVal);//如果成功，会弹出Dylan
            }
        }
        function query() {
            get(getDemo.aspx);
        }
    </script>
</head>
<body>
<input type="button" value="Ajax跨域测试" onclick="query();"/>
</body>
</html>

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跨域问题：

<html>
<head>
<title>JQuery学习</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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 + "<br/>email:" + Dylan.email).css("color","black");            
            oBtnTest.disabled = false;            
        });         
    });    
});    
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>

远程服务器端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.