日期:2014-05-16 浏览次数:21064 次
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>标签中的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的缘故。这种方法似乎有点“另类”,哈哈。
?
?
?
<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>