本文详解JavaScript跨域问题 ,本文用了普通的写法,发出来和大家分享一下。
首先是JQUERY的JSONP方法:
假设有一个静态页面上的某些功能需要通过判断IP来授权访问,而这个网站是静态的没办法自己实现判断IP功能,这时候就可以用跨域来解决代码如下:
view sourceprint?
1 var CheckUrl=function(){
view sourceprint?
1 $.getJSON('http://www.xxx.com/Urlcheck/Url/CheckUrl?callback=?',
view sourceprint?
1 function(json){
view sourceprint?
1 if(json.Status==1){
view sourceprint?
1 window.open(json.Url);
view sourceprint?
1 }else{
view sourceprint?
1 alert(json.Message);
view sourceprint?
1
view sourceprint?
1 }
view sourceprint?
1
view sourceprint?
1 }
这个函数功能是用户点击某个链接,调用CheckUrl()用JQUERY的getJSON方法来访问,callback=?是一个与后台返回地址约定好的一个函数名称,接着往后看就明白了。
监视一下这个JSONP方法执行时候访问的地址就会看到是这样的
?callback=jsonp1295517950805&_=1295517963890
请注意callback=jsonp1295517950805 这个参数是jquery自动添加的,在写的时候写的只是?callback=?,
后台接收页面:
view sourceprint?
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 //将文本以的方式返回
12 JavaScriptResult javaStr = JavaScript(parStr + "(" + jsonStr + ")");
13 return javaStr;
14 }
要注意的一点就是返回内容的Content-Type,必须为text/javascript或者 application/javascript,这里MVC的ActionResult 比较方便的提供了JavaScript()方法,webform方式的话指定一下Response.ContentType属性也可以。
看看返回的数据
view sourceprint?
1 jsonp1295517950805({"Status": "1","Message": "可以访问","Url": ""})
JavaScript方法:
上面JQUERY的方法特别简单好用,可能用了但是不知道是怎么实现的,看完以下实现就明白JSONP的实现方式了
view sourceprint?
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代码:
view sourceprint?
1 <div id="script"></div>
后端代码:
view sourceprint?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方法了:)