什么是跨域請求？
簡單的理解就是向不在同一個域名的服務器文件發(fā)出請求。這個還是用實際的例子來說明一下吧，比如baidu.com向cxyblog.com發(fā)送請求，這兩個域名是不同的，那么這就是跨域了，出于安全性的考慮，這樣是不允許的。另外需要注意的是不同子域名或者同域名不同端口之間或者相同域名不同協(xié)議等發(fā)送的請求也都算是跨域的，基本上可以為歸為下面幾類：
（1）http://www.baidu.com向http://www.cxyblog.com發(fā)送請求
（2）http://www.cxyblog.com向http://image.cxyblog.com發(fā)送請求
（3）http://www.baidu.com:8000向http://www.cxyblog.com發(fā)送請求
（4）http://www.cxyblog.com向https://www.cxyblog.com發(fā)送請求
（5）http://www.cxyblog.com向http://112.65.242.67發(fā)送請求（假設域名www.cxyblog.com所對應的IP是112.65.242.67）
以上五種情況都算是跨域請求。

什么時候會用到跨域請求？
有時候我們需要使用Javascript進行Ajax操作的時候會碰到這種跨域請求操作的問題。
為什么直接使用javascript不能實現(xiàn)跨域請求？
由于安全的原因，javacript同源策略的限制，瀏覽器不允許Javascript請求跨域的資源。
如何解決javascript不能實現(xiàn)跨域請求的問題？
本文用到的解決方法是使用FlyJSONP應用JSONP實現(xiàn)跨域請求。FlyJSONP是一個輕量級的JavaScript類庫，也被稱作JSON插件，壓縮后總大小約為3KB，不需要其他框架的支撐。
FlyJSONP官網地址：http://alotaiba.github.com/FlyJSONP/
那么該如何使用FlyJSONP類庫實現(xiàn)跨域請求呢？ 

（1）首先要加載FlyJSONP的Javascript腳本，即：

<script language="javascript" src="http://www.cxyblog.com/flyjsonp.min.js"></script> 

（2）然后要初始化FlyJSONP的實例，參數(shù)debug可設置為true或false，即：FlyJSONP.init({debug: true})，這個參數(shù)的意思就是是否打開調試信息，參數(shù)值為true或者false; 

（3）接下里就是使用get方法或post方法請求數(shù)據(jù)了，具體實例代碼如下：

//FlyJSONP實現(xiàn)跨域GET
function getData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的實例，參數(shù)debug可設置為true或false
 FlyJSONP.get({
  url:'http://www.cxyblog.com/article.json',//目標請求的URL
  parameters:{//請求參數(shù)
   limit:5
  },
  success:function(data){//發(fā)送請求成功
   console.log(data);
  },
  error:function(errorMsg){//發(fā)送請求失敗
   console.log(errorMsg);
  }
 });
}
//FlyJSONP實現(xiàn)跨域POST
function postData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的實例，參數(shù)debug可設置為true或false
 FlyJSONP.post({
  url:'http://www.cxyblog.com/article/new',
  parameters:{
   username:'cxyblog',
   api_key:'123456',
   title:'FlyJSONP',
   description:'test'
  },
  success:function(data){
   alert(data);
  }
 });
}

注意：服務端輸出給客戶端時，輸出的必須是json字符串，否則客戶端無法接收。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論