ajax跨域访问和产生的原因

zha_zi

浏览: 590156 次
性别:
来自: 西安

最近访客更多访客>>

akingde

layhaokeai

sainery

一直走到黑

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

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.

分享到：

Future 模式详解（并发使用） | VC6不支持模板函数在cpp文件中的实现

2012-02-14 16:14
浏览 1627
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论