zoukankan      html  css  js  c++  java
  • JavaScript跨域问题

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

    首先是JQUERY的JSONP方法:

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

    var CheckUrl=function(){
         $.getJSON('http://www.xxx.com/Urlcheck/Url/CheckUrl?callback=?',
         function(json){
             if(json.Status==1){
              window.open(json.Url);
              }else{
             alert(json.Message);
              };
          }
        ); 
    }

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

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

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

    后台接收页面:

            public ActionResult CheckUrl()
            {
                //获取发出请求的远程主机的IP地址
                string ip=GetUserIp();
                //具体业务判断得到返回的对象
                ReStr rstr=UrlDecide.CheckUrl(ip);
                //组页面所需的json串
                string jsonStr = "{\"Status\": \"" + rstr.Status + "\",\"Message\": \"" + rstr.Message + "\",\"Url\": \"" + rstr.Url + "\"}"; 
                //得到最终返回的文本
                string parStr = Request.QueryString["callback"].ToString();
                //将文本以JavaScript的方式返回
                JavaScriptResult javaStr = JavaScript(parStr + "(" + jsonStr + ")");
                return javaStr;
            }
    

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

    看看返回的数据

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

    JavaScript方法:

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

    var CheckUrl=function(){ 
    
    	var s=document.createElement('SCRIPT');
    	s.src='http://www.xxx.com/Urlcheck/Url/CheckUrl?' + Math.random();
    	$("#script").append(s);
    } 
    function L(json)
    {
    	try{
    	   var dataObj=eval("("+json+")");
    	   if(dataObj.Status==1){
    				  window.open(dataObj.Url);
    				  }else{
    					  alert(dataObj.Message);
    					  };
    					  } 
    					  );
                      }
    	 $("#script").empty();
    	}
    	catch(err)
    	{}
    }
    

    HTML代码:

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

    后端代码:

           public ActionResult CheckUrl()
            {
                //获取发出请求的远程主机的IP地址
                string ip = GetUserIp();
                //具体业务判断得到返回的对象
                ReStr rstr = UrlDecide.CheckUrl(ip);
                //组页面所需的json串
                string jsonStr = "{\"Status\": \"" + rstr.Status + "\",\"Message\": \"" + rstr.Message + "\",\"Url\": \"" + rstr.Url + "\"}";
                //将文本以JavaScript的方式返回
                JavaScriptResult javaStr = JavaScript("L(" + jsonStr + ")");
                return javaStr;
            }
    

    看到这里应该就明白了JQUERY的JSONP方法了:)

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

  • 相关阅读:
    杨辉三角实现
    三种方式都能生成同样的列表
    Python 直接赋值、浅拷贝和深度拷贝解析
    Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
    教你玩转CSS 分组选择器和嵌套选择器
    教你玩转CSS padding(填充)
    教你玩转CSS 轮廓(outline)属性
    教你玩转CSS margin(外边距)
    教你玩转CSS border(边框)
    教你玩转CSS表格(table)
  • 原文地址:https://www.cnblogs.com/zhaojingjing/p/1940461.html
Copyright © 2011-2022 走看看