js跨域相关

痛定思痛。 2022-06-17 23:59 259阅读 0赞

假设http://www.otherdomain.com/data.js 这个远程文件data.js内容如下：

[帮助][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      01 
    </div> 
    <div>
      02 
    </div> 
    <div>
      03 
    </div> 
    <div>
      04 
    </div> 
    <div>
      05 
    </div> 
    <div>
      06 
    </div> 
    <div>
      07 
    </div> 
    <div>
      08 
    </div> 
    <div>
      09 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>testData={ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"rool"</code> 
      <code>: [</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"desc"</code> 
      <code>:</code> 
      <code>"小鸟_描述"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"img"</code> 
      <code>:</code> 
      <code>"<a href="http://t2.qpic.cn/mblogpic/47962be47270d036517c/160" rel="nofollow">http://t2.qpic.cn/mblogpic/47962be47270d036517c/160</a>"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"link"</code> 
      <code>:</code> 
      <code>"2907109968"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"title"</code> 
      <code>:</code> 
      <code>"小鸟_标题"</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>],</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"blockid"</code> 
      <code>: 1,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"itemid"</code> 
      <code>: 1,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"opt"</code> 
      <code>: 0,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"pageid"</code> 
      <code>: 1,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"tot"</code> 
      <code>: 1,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"tplid"</code> 
      <code>: 0,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>"type"</code> 
      <code>:</code> 
      <code>"mod_list_pic"</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[帮助][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>jQuery.getScript(</code> 
      <code>"<a href="http://www.otherdomain.com/data.js" rel="nofollow">http://www.otherdomain.com/data.js</a>"</code> 
      <code>,</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>data = testData;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(data[</code> 
      <code>"rool"</code> 
      <code>][0][</code> 
      <code>"desc"</code> 
      <code>]);</code> 
      <code>//输出 “小鸟_描述”</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

说明：ajax不能[跨域][Link 2]问题，大家应该都清楚。但是script标签能够加载其他域的文件，所以我们可以利用这点，进行[跨域][Link 2]get操作。  
这种方案要求跨域文件返回的数据必须是合法的JSON格式或者如JS文件的格式。  
这种方式比较简单，只需要几行代码即可。如果不用[jquery][]的话，可以通过动态创建script标签，然后设置src值，不过得注意判断script内容加载是否完成。

当然，跨域的方法很多，这里说的只是其中一种。

在[ajax跨域][ajax]中常见的用法有getScript,getJSON和iframe,iframe三种方法.

**iframe方法：**

这个其实就是在网页中插入一个空白的iframe，并不显示内容。在提交FORM的时间target=iframeID，在页面执行完成后，输出js语句,parent.alert("完成");

这样就可以做到无刷新页面提交数据并返回结果。

**getScript方法**

这个是有点类似于动态加载JS文件，并执行其中的代码（变量），通常在这里是动态加载一个PHP等动态的URL，返回一段JS代码，并在其中设定变量。在加载完成后引用该变量的值，达到跨域传递的效果。

举例：

http://u.yanghengfei.com/demo/test.php 执行以后返回内容为：

var result = "提交成功！";

在www.yanghengfei.com下使用getScript跨域调用的代码为：

$.getScript("http://u.yanghengfei.com/demo/test.php", function()\{

alert(result); //注意这里直接使用了PHP返回结果中声明的变量。

\});

**getJSON方法**

getJSON与getScript类似，只不过远端要返回JSON格式的数据，还有一点不同就是，getJSON要增加一个参数来跨域实现：callback=?

如：

$.getJSON("http://u.yanghengfei.com/demo/test.php?callback=?", function(json)\{

alert(json.data); //注意这里直接使用json的数据了

\});

仅这样并不能完成调用，同样的远端的PHP文件中也要接收到callback的参数并输出才行。如：

<?php

exit($\_GET\['callback'\] ."(" .$JSON .")");

两端都增加一个callback参数就可以完成跨域了，其实原理跟getScript还是一样的。

在，$.getJSON()中，url参数,后面要加个，callback=?,至于callback，可以自定义其他的名称，在test.php文件中，改相应的名称，就ok啦！在输出的json 数据时，必须要加上$\_GET\['callback'\]和两个括号括起来JSON内容。

最近在开发Windows8 Metro App，使用JavaScript和HTML开发环境。所以操作数据绑定都是使用JSON格式数据。后台使用的是ASP.NET，因为项目相对较小，所有后台没有使用数据库，使用的XML来保存数据。前台需要请求后台返回JSON格式的数据，比如要求返回一个eventslist，后台操作XML的方法省略。主要讨论如何使用Hashtable和ArrayList，然后加上ASP.NET自带的JavaScriptSerializer来生成JSON数据，然后返回给前端使用。当然目前微软的ASP.MVC和ASP.NET Web API在处理JSON格式数据有很大的改进，特别是前端使用Ajax方式post一个json数据给服务器端，后台反序列化一个对象，就可以方便实现后台的相关业务逻辑。

代码如下：

ArrayList eventList = new ArrayList(); for (int i = 0; i < 3;i++ ) { Hashtable ht = new Hashtable(); ht.Add("eventid",i+1); ht.Add("eventname","圣诞节"); ht.Add("eventdate","2012-12-25"); ht.Add("eventlocation","公司会议中心"); eventList.Add(ht); } JavaScriptSerializer ser = new JavaScriptSerializer(); String jsonStr=ser.Serialize(eventList); Response.Write(jsonStr);

查看页面，可以看到返回的结果是JSON格式的数据。实际上是一个数组，数组里面每项是一个json对象。

[{ "eventdate":"2012-12-25","eventlocation":"公司会议中心","eventname":"圣诞节","eventid":1},{ "eventdate":"2012-12-25","eventlocation":"公司会议中心","eventname":"圣诞节","eventid":2},{ "eventdate":"2012-12-25","eventlocation":"公司会议中心","eventname":"圣诞节","eventid":3}]

我们可以通过这个网址验证生成的json是否正确。[http://jsonlint.com/][http_jsonlint.com]

但是我们需要注意的是，hashtable在存放数据时是无序的，所以数据并不是按照我们插入的先后顺序显示的。我们可能期望的数据格式是：

\{"eventid":1","eventname":"圣诞节",eventdate":"2012-12-25","eventlocation":"公司会议中心"\}

但是我们查看我们的结果不是这样的，但是数据返回给前端之后，还是要通过JSON.parse()方法转换为json对象，所以不按照特定的顺序，对我们开发不影响。

数据在HTTP协议上传输都是使用二级制流，所以数据到达客户端，需要通过JSON.parse()。我的项目是Windows8 Metro App，当然也可以是网页或者web 应用。

当然如果前端和后台的数据模型一致，还可以直接通过对象实例直接序列化一个json格式数据。

### 解决getJSON跨域登录Session丢失的问题 ###

2013/9/21 11:08:48  凡夫·俗子  博客园   [我要评论(0)][0]

*  摘要：最近在做项目中发现，我用下面的代码异步请求到login.ashx：varmemberUrl=rooturl+'member.ashx?r='+Math.random()+'&jsoncallback=?';//添加jsoncallback参数是为了解决跨域的问题//验证是否已经登录$.getJSON(memberUrl,\{type:"checklogin"\},function(data)\{if(data.status==1)\{//已经登录成功,显示用户信息$('\#userinfo')
 *  标签：[解决][Link 3] [问题][Link 4] [JSON][] [JS][]
 *

最近在做项目中[发现][Link 5]，我用下面的代码[异步][Link 6]请求到login.ashx：

第一次请求时登录成功，但当我刷新页面时，却又要再次登录，经过测试发现：在firefox浏览器下是正常的，但在IE下却每次需要再次登录，我打印出来sessionId，发现居然刷新后的sessionID已经改变了，需要查找资料终于找到解决办法：

问题根源:  
  [IE6][]/IE7支持的P3P(Platform for Privacy Preferences Project (P3P) specification)[协议][Link 7]默认阻止第三方无隐私安全声明的cookie，Firefox目前还不支持P3P安全特性，firefox中自然也不存 在此问题了。Mircosoft对此的具体描述可以参见 Privacy in Internet Explorer 6

解决办法是在login.ashx中输出P3P的主机头声明： 给个连接 百度文库

http://wenku.baidu.com/view/ea504514866fb84ae45c8d2c.html

代码如下：

public void ProcessRequest(HttpContext context)
    {
        string result = string.Empty;
        context.Response.ContentType = "application/Json";
    
        //业务处理，赋值result......
    
        //解决IE缓存问题
        context.Response.AddHeader("Cache-Control", "no-cache");
        context.Response.AddHeader("Pragma", "no-cache");
    
        //解决IE下SessionID丢失的问题
        context.Response.AddHeader("P3P", "CP=CAO PSA OUR"); //解决跨域问题
        string cb = context.Request["jsoncallback"];
        context.Response.Write(cb + "(" + result + ")");
    }

[Link 1]: http://www.ghugo.com/jquery-to-achieve-cross-domain-request-data-using-getscript/#
[Link 2]: http://www.ghugo.com/tag/%e8%b7%a8%e5%9f%9f/
[jquery]: http://www.ghugo.com/tag/jquery/
[ajax]: http://www.yanghengfei.com/tag/ajax%25E8%25B7%25A8%25E5%259F%259F/
[http_jsonlint.com]: http://jsonlint.com/
[0]: http://www.cxyclub.cn/n/26451/#pl
[Link 3]: http://www.cxyclub.cn/Tag/jiejue.html
[Link 4]: http://www.cxyclub.cn/Tag/wenti.html
[JSON]: http://www.cxyclub.cn/Tag/json.html
[JS]: http://www.cxyclub.cn/Tag/js.html
[Link 5]: http://www.cxyclub.cn/Tag/faxian.html
[Link 6]: http://www.cxyclub.cn/Tag/yibu.html
[IE6]: http://www.cxyclub.cn/Tag/ie6.html
[Link 7]: http://www.cxyclub.cn/Tag/xieyi.html