|
一、window.name
1、 服务器返回
| 代码如下 |
复制代码 |
|
<script>window.name=’{“id”:”3″, “name”:”leisure”}’;</script>
|
2、定义一个iframe，添加onload事件 <iframe id=”iframe1″ onload=”iLoad”><iframe>
| 代码如下 |
复制代码 |
<script type=”text/javascript”>
var load = false;
function iLoad() {
if(load == false) {
// 同域处理，请求后会再次重新加载iframe
document.getElementById(‘iframe1′).contentWindow.location = ‘/’;
load = true;
} else {
// 获取window.name的内容，注意必须进行同域处理后方可访问！
var data = document.getElementById(‘iframe1′).contentWindow.name;
alert(data); // {“id”:”3″, “name”:”leisure”}
load = false;
}
}
</script> |
3、定义一个form，设置form的target为iframe的id，然后提交form
| 代码如下 |
复制代码 |
|
<form action=”url” method=”POST” target=”iframe1″>
<button type=”submit” value=”submit” />
</form>
|
二、JSONP
服务器返回
| 代码如下 |
复制代码 |
|
callback({“id”: “3″, “name”: “leisure”});
<script type=”text/javascript”>
function callback(data) {
alert(data);
}
</script>
<script type=”text/javascript” src=”http://www.example.com.cn/product.jsp?id=5&jsonp=callback”></script>
|
例
PHP页面返回的JSONP格式应该是这样的：
| 代码如下 |
复制代码 |
<?php
echo $_GET["callback"].'
(
{
title: "The Principles of Beautiful Web Design, 2nd Edition",
url: "http://www.sitepoint.com/books/design2/",
author: "Jason Beaird",
publisher: "SitePoint",
price: {
currency: "USD",
amount: 39.95
}
}
);
'
?>
|
而静态HTML发起请求的代码可以参考下面：
| 代码如下 |
复制代码 |
|
<script language="javascript" src="你的网址/zt/access_count/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="你的网址/zt/access_count/js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
insert_vote();
})
function insert_vote(){
var j = null;
$.ajax({
type:'get',
url:'你的网址/zt/access_count/jsonp.php',
dataType:'jsonp',
jsonp:"callback",
data:{"a":"insert", "type":"aa", "time":"bb", "id":"dd", "allowVote":"cc"},
async: false,
success:function(data){
j = data;
//alert("1");
alert(j.title);
}
})
}
function init(){
$.ajax({
dataType: 'jsonp',
data: 'id=10',
jsonp: 'jsonp_callback',
url: '你的网址/zt/access_count/jsonp.php',
success: function ()
{
// do stuff
alert(jsonp.respond);
},
});
}
function init2(){
$.ajax({
async:false,
url: '你的网址/zt/access_count/jsonp.php', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
data: 'id=10', //请求数据
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了
},
success: function(json) {
//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数
alert(json.respond.title);
if(json.actionErrors.length!=0)
{
alert(json.actionErrors);
}
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(xhr){
//jsonp 方式此方法不被触发
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});
}
</script>
|
通用方法：
| 代码如下 |
复制代码 |
|
// 初始化数据，同一个cookie一分钟的访问量都算一次
function init_count(pageType, id){
var j = null;
$.ajax({
type: "get", //使用get方法访问后台
dataType: "jsonp", //返回json格式的数据
jsonp:"callback",
url: "http://app2.zhnews.net/zt/access_count/manage.php", //要访问的后台地址
data:{"opp":"main", "pageType":pageType, "id":id},
async: false,
success: function(data){
//alert(data.total);
//$('#pc_1').html(msg.total);
$.each(data, function(i, v){
var tmp = v.record.split(":");
var month_view = tmp[tmp.length - 1];
$("label[id=pc_"+v.page_id+"]").html(v.total);
$("label[id=pcm_"+v.page_id+"]").html(v.week);
})
}
})
}
|
三、jQuery.getJSON
JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象
首先我们来定义接口的规范，就像这样：
http://你的网址/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是请求条件，callback是回调函数名称。
在页面文件中，我们使用JQuery的支持：
服务器返回 json格式数据 test({“id”: “3″, “name”: “leisure”});
test函数名为callback参数中定义
| 代码如下 |
复制代码 |
|
$.getJSON(url + “?callback=?”, data, function(data) {
}
|
例
| 代码如下 |
复制代码 |
|
//JQuery JSONP Support
var url = "http://你的网址/api/suggest.php?symbol=IBM&callback=?";
jQuery.getJSON(url, function(data){ alert("Symbol:" + data.symbol + ", Price:" + data.price); });
|
注意callback=?这个参数必须带上，jquery会自动生成一个函数名替换这个问号！jQuery.getJSON实际上是用了JSONP方式实现。
四、flash跨域服务器添加crossdomain.xml
| 代码如下 |
复制代码 |
|
http://www.example.com.cn/crossdomain.xml
<?xml version=”1.0″?>
<cross-domain-policy>
<allow-access-from domain=”*.another.com.cn” />
</cross-domain-policy>
|
|
