JavaScript跨域问题

遇到过几次此类问题，上一次用了JQUERY的JSONP，而这次用了普通的JS写法，其实两者是完全一样的，贴出来分享一下也便于以后自己查找

首先是JQUERY的JSONP方法：

假设有一个静态页面上的某些功能需要通过判断IP来授权访问，而这个网站是静态的没办法自己实现判断IP功能，这时候就可以用跨域来解决代码如下：

`1`	`var` `CheckUrl=function(){`

`1`	`$.getJSON('http://www.xxx.com/Urlcheck/Url/CheckUrl?callback=?',`

`1`	`function(json){`

`1`	`if(json.Status==1){`

`1`	`window.open(json.Url);`

1 }else{

`1`	`alert(json.Message);`

1

1 }

1

1 }

这个函数功能是用户点击某个链接，调用CheckUrl（）用JQUERY的getJSON方法来访问http://www.xxx.com/Urlcheck/Url/CheckUrl，callback=?是一个与后台返回地址约定好的一个函数名称，接着往后看就明白了。

监视一下这个JSONP方法执行时候访问的地址就会看到是这样的

http://www.xxx.com/Urlcheck/Url/CheckUrl?callback=jsonp1295517950805&_=1295517963890

请注意callback=jsonp1295517950805 这个参数是jquery自动添加的，在写的时候写的只是http://www.xxx.com/Urlcheck/Url/CheckUrl?callback=?,

后台接收页面：

01
public ActionResult CheckUrl() 

02
{ 

03
    //获取发出请求的远程主机的IP地址 

04
    string ip=GetUserIp(); 

05
    //具体业务判断得到返回的对象 

06
    ReStr rstr=UrlDecide.CheckUrl(ip); 

07
    //组页面所需的json串 

08
    string jsonStr = "{\"Status\": \"" + rstr.Status + "\",\"Message\": \"" + rstr.Message + "\",\"Url\": \"" + rstr.Url + "\"}";  

09
    //得到最终返回的文本 

10
    string parStr = Request.QueryString["callback"].ToString(); 

11
    //将文本以JavaScript的方式返回 

12
    JavaScriptResult javaStr = JavaScript(parStr + "(" + jsonStr + ")"); 

13
    return javaStr; 

14
}

要注意的一点就是返回内容的Content-Type，必须为text/javascript或者 application/javascript，这里MVC的ActionResult 比较方便的提供了JavaScript（）方法，webform方式的话指定一下Response.ContentType属性也可以。

看看返回的数据

`1`	`jsonp1295517950805({"Status":` `"1","Message":` `"可以访问","Url":` `"www.yyy.com"})`

JavaScript方法：

上面JQUERY的方法特别简单好用，可能用了但是不知道是怎么实现的，看完以下实现就明白JSONP的实现方式了

01
var CheckUrl=function(){  

02
  
03
    var s=document.createElement('SCRIPT'); 

04
    s.src='http://www.xxx.com/Urlcheck/Url/CheckUrl?' + Math.random(); 

05
    $("#script").append(s); 

06
}  

07
function L(json) 

08
{ 

09
    try{ 

10
       var dataObj=eval("("+json+")"); 

11
       if(dataObj.Status==1){ 

12
                  window.open(dataObj.Url); 

13
                  }else{ 

14
                      alert(dataObj.Message); 

15
                      }; 

16
                      }  

17
                      ); 

18
                  } 

19
     $("#script").empty(); 

20
    } 

21
    catch(err) 

22
    {} 

23
}

HTML代码：

`1`	`<div` `id="script"></div>`

后端代码：

01
public ActionResult CheckUrl() 

02
 { 

03
     //获取发出请求的远程主机的IP地址 

04
     string ip = GetUserIp(); 

05
     //具体业务判断得到返回的对象 

06
     ReStr rstr = UrlDecide.CheckUrl(ip); 

07
     //组页面所需的json串 

08
     string jsonStr = "{\"Status\": \"" + rstr.Status + "\",\"Message\": \"" + rstr.Message + "\",\"Url\": \"" + rstr.Url + "\"}"; 

09
     //将文本以JavaScript的方式返回 

10
     JavaScriptResult javaStr = JavaScript("L(" + jsonStr + ")"); 

11
     return javaStr; 

12
 }

看到这里应该就明白了JQUERY的JSONP方法了：）

刚开博客，发现写个简单的东西也挺费时间啊- -！

posted @ 2011-01-20 18:58 rob_2010 阅读(135) 评论(0) 收藏举报

刷新页面返回顶部

刚子

JavaScript跨域问题

公告