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中的内容为: 笔者感觉这种方式更加简洁。呵呵。当然，读者可以根据实际情况，任意选择实现方式。 为什么会产生跨域的问题主要原因是由于js在设计时的同源策略 javascript 同源策略：同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator 2.0。 Mozilla 认为两个页面拥有相同的源，如果它们的协议、端口（如果指明了的话）和主机名都相同。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:
在同源策略中有一个例外，脚本可以设置 document.domain = "company.com"; 这条语句执行之后，页面将会成功地通过对 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |