js跨域相关

来源：互联网发布：免费域名注册视频编辑：程序博客网时间：2024/05/17 03:40

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

帮助
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
testData={
    "rool": [
        {
            "desc":"小鸟_描述",
            "img":"http://t2.qpic.cn/mblogpic/47962be47270d036517c/160",
            "link":"2907109968",
            "title":"小鸟_标题"
        }
    ],
    "blockid": 1,
    "itemid": 1,
    "opt": 0,
    "pageid": 1,
    "tot": 1,
    "tplid": 0,
    "type":"mod_list_pic"
};

帮助
1
2
3
4
jQuery.getScript("http://www.otherdomain.com/data.js",function(){
   vardata = testData;
   alert(data["rool"][0]["desc"]);//输出 “小鸟_描述”
});

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

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

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

但是我们需要注意的是，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)

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

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

var memberUrl = rooturl + 'member.ashx?r=' + Math.random() + '&jsoncallback=?';   //添加jsoncallback参数是为了解决跨域的问题//验证是否已经登录 $.getJSON(memberUrl, { type: "checklogin" }, function (data) {    if (data.status == 1) {  //已经登录成功,显示用户信息        $('#userinfo').html('欢迎您' + data.content + '&nbsp;&nbsp;' + successHtml);    } else {  //登录失败        $('#userinfo').html(waitHtml);    }});

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

问题根源:
IE6/IE7支持的P3P(Platform for Privacy Preferences Project (P3P) specification)协议默认阻止第三方无隐私安全声明的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 + ")");}