DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript如何實現跨域請求
JavaScript如何實現跨域請求
編輯:關於JavaScript     

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

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

(1)首先要加載FlyJSONP的Javascript腳本,即:

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

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

(3)接下裡就是使用get方法或post方法請求數據了,具體實例代碼如下:

//FlyJSONP實現跨域GET
function getData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的實例,參數debug可設置為true或false
 FlyJSONP.get({
  url:'http://www.cxyblog.com/article.json',//目標請求的URL
  parameters:{//請求參數
   limit:5
  },
  success:function(data){//發送請求成功
   console.log(data);
  },
  error:function(errorMsg){//發送請求失敗
   console.log(errorMsg);
  }
 });
}
//FlyJSONP實現跨域POST
function postData(){
 FlyJSONP.init({debug:true});//初始化FlyJSONP的實例,參數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字符串,否則客戶端無法接收。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved