欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript如何實現(xiàn)跨域請求

 更新時間:2016年08月05日 09:21:40   作者:phper2016  
這篇文章主要為大家詳細介紹了JavaScript如何實現(xiàn)跨域請求,告訴大家什么是跨域請求?什么時候會用到跨域請求?感興趣的小伙伴們可以參考一下

什么是跨域請求?
簡單的理解就是向不在同一個域名的服務器文件發(fā)出請求。這個還是用實際的例子來說明一下吧,比如baidu.com向cxyblog.com發(fā)送請求,這兩個域名是不同的,那么這就是跨域了,出于安全性的考慮,這樣是不允許的。另外需要注意的是不同子域名或者同域名不同端口之間或者相同域名不同協(xié)議等發(fā)送的請求也都算是跨域的,基本上可以為歸為下面幾類:
(1)http://www.baidu.comhttp://www.cxyblog.com發(fā)送請求
(2)http://www.cxyblog.comhttp://image.cxyblog.com發(fā)送請求
(3)http://www.baidu.com:8000http://www.cxyblog.com發(fā)送請求
(4)http://www.cxyblog.comhttps://www.cxyblog.com發(fā)送請求
(5)http://www.cxyblog.comhttp://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官網(wǎng)地址: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字符串,否則客戶端無法接收。

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

相關文章

  • JavaScript實現(xiàn)頁面電子時鐘

    JavaScript實現(xiàn)頁面電子時鐘

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)頁面電子時鐘,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • TypeScript學習筆記之類型窄化篇

    TypeScript學習筆記之類型窄化篇

    目前用TypeScript的人越來越多,尤其是一些大廠,大的項目,github上面很多開源項目也都是ts語法編譯的,這篇文章主要給大家介紹了關于TypeScript學習筆記之類型窄化的相關資料,需要的朋友可以參考下
    2021-09-09
  • JavaScript時間復雜度和空間復雜度

    JavaScript時間復雜度和空間復雜度

    這篇文章主要介紹了JavaScript時間復雜度和空間復雜度,時間復雜度和空間復雜度是衡量一個算法是否優(yōu)秀的標準,通常我們比較兩個算法時會用預先估算和事后統(tǒng)計,下文詳細介紹,需要的朋友可以參考一下
    2022-07-07
  • javascript實現(xiàn)原生ajax的幾種方法介紹

    javascript實現(xiàn)原生ajax的幾種方法介紹

    項目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢?下面和大家分享幾種利用javascript實現(xiàn)原生ajax的方法
    2013-09-09
  • javascript實現(xiàn)信息增刪改查的方法

    javascript實現(xiàn)信息增刪改查的方法

    這篇文章主要介紹了javascript實現(xiàn)信息增刪改查的方法,實例分析了javascript操作頁面元素實現(xiàn)針對頁面信息的增刪改查功能,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • JavaScript中按位“異或”運算符使用介紹

    JavaScript中按位“異或”運算符使用介紹

    按位“異或”運算符 (^)是對兩個表達式執(zhí)行按位異或,下面為大家介紹下其具體的使用方法
    2014-03-03
  • js實現(xiàn)購物車加減以及價格計算功能

    js實現(xiàn)購物車加減以及價格計算功能

    這篇文章主要為大家詳細介紹了js實現(xiàn)購物車加減以及價格計算功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • RequireJS多頁面應用實例分析

    RequireJS多頁面應用實例分析

    這篇文章主要介紹了RequireJS多頁面應用實例分析的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • JavaScript實現(xiàn)異步任務循環(huán)順序執(zhí)行詳解

    JavaScript實現(xiàn)異步任務循環(huán)順序執(zhí)行詳解

    這篇文章主要為大家詳細介紹了JavaScript中實現(xiàn)異步任務循環(huán)順序執(zhí)行的方法,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下
    2023-03-03
  • JavaScript高級之閉包詳解

    JavaScript高級之閉包詳解

    這篇文章主要為大家介紹了JavaScript閉包,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12

最新評論