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

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

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

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

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

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

//FlyJSONP實(shí)現(xiàn)跨域GET
function getData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的實(shí)例，參數(shù)debug可設(shè)置為true或false
 FlyJSONP.get({
  url:'http://www.cxyblog.com/article.json',//目標(biāo)請(qǐng)求的URL
  parameters:{//請(qǐng)求參數(shù)
   limit:5
  },
  success:function(data){//發(fā)送請(qǐng)求成功
   console.log(data);
  },
  error:function(errorMsg){//發(fā)送請(qǐng)求失敗
   console.log(errorMsg);
  }
 });
}
//FlyJSONP實(shí)現(xiàn)跨域POST
function postData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的實(shí)例，參數(shù)debug可設(shè)置為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);
  }
 });
}

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論