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方法執行時候訪問的地址就會看到是這樣的

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

請注意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方法了：）

剛開部落格，發現寫個簡單的東西也挺費時間啊- -！