网站地图    收藏   

主页 > 前端 > javascript >

Javascript跨域请求常用方法总结

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 在js中常用的跨域请求包括有四种,分别为:window.name、JSONP、jQuery.getJSON、flash跨域这种方法,第一种是利用iframe,第二与三种使用的是json数据,最后一种是xml文件操作,下面我来简单介...

一、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&amp;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>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论