返回
软件
分类

减轻格局

日期: 2019-11-20 21:58 浏览次数 : 194

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

什么情况下才会出现跨域
假设域名是:
如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到的。
解决方式
一、window.name
1、 服务器返回

一、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

复制代码

复制代码 代码如下:

<script>window.name=’{“id”:”3″, “name”:”leisure”}’;</script>

<form action="url" method="POST" target="iframe1">
<button type="submit" value="submit" />
</form>

2、定义一个iframe,添加onload事件 <iframe id=”iframe1″ onload=”iLoad”><iframe>

二、JSONP
服务器返回 callback({"id": "3", "name": "leisure"});

 代码如下

复制代码 代码如下:

复制代码

<script type="text/javascript">
function callback(data) {
alert(data);
}
</script>
<script type="text/javascript" src=";

<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>

三、jQuery.getJSON
减轻格局。服务器返回 json格式数据 test({"id": "3", "name": "leisure"}); test函数名为callback参数中定义

3、定义一个form,设置form的target为iframe的id,然后提交form

复制代码 代码如下:

 代码如下

$.getJSON(url + "?callback=?", data, function(data) {
}

复制代码

注意callback=?这个参数必须带上,jquery会自动生成一个函数名替换这个问号!jQuery.getJSON实际上是用了JSONP方式实现。
四、flash跨域
服务器添加crossdomain.xml

<form action=”url” method=”POST” target=”iframe1″>
<button type=”submit” value=”submit” />
</form>

复制代码 代码如下:

二、JSONP

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*必赢备用网址 ,.another.com.cn" />
</cross-domain-policy>

服务器返回

? 假设域名是: 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞...

 代码如下

复制代码

 callback({“id”: “3″, “name”: “leisure”});
<script type=”text/javascript”>
function callback(data) {
alert(data);
}
</script>
<script type=”text/javascript” src=”;

PHP页面返回的JSONP格式应该是这样的:

 代码如下

复制代码

<?php
 echo $_GET["callback"].'
 (
    {
        title: "The Principles of Beautiful Web Design, 2nd Edition",
        url: "",
        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: "", //要访问的后台地址 
   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中的对象

首先我们来定义接口的规范,就像这样:

symbol是请求条件,callback是回调函数名称。

在页面文件中,我们使用JQuery的支持:

服务器返回 json格式数据 test({“id”: “3″, “name”: “leisure”});

test函数名为callback参数中定义

 代码如下

复制代码

$.getJSON(url + “?callback=?”, data, function(data) {
}

 代码如下

复制代码

//JQuery JSONP Support 
var url = ""; 
jQuery.getJSON(url, function(data){  alert("Symbol:" + data.symbol + ", Price:" + data.price);  });

注意callback=?这个参数必须带上,jquery会自动生成一个函数名替换这个问号!jQuery.getJSON实际上是用了JSONP方式实现。

四、flash跨域服务器添加crossdomain.xml

 代码如下

复制代码

<?xml version=”1.0″?>
<cross-domain-policy>
<allow-access-from domain=”*.another.com.cn” />
</cross-domain-policy>

...