通過jsonp獲取json數據--實現AJAX跨域請求

zhoutk 發布于2019-08-22 10:48 / 959人閱讀

摘要：可通過進行解析，數據可使用進行傳輸。實例語法是對象表示法語法的子集數據在名稱值對中數據由逗號分隔花括號保存對象方括號保存數組。運行結果服務器返回的數據類型返回一個指定函數名為的回調函數，函數里面包裹的數據為格式。

AJAX（異步的 JavaScript 和 XML）是用于創建快速動態網頁的一種技術，它在不重新加載整個頁面的情況下，與服務器交換數據并更新部分網頁，ajax 使用XMLHttpRequest對象在后臺與服務器交換數據，XMLHttpRequest 是 AJAX 的基礎，它允許客戶端 JavaScript 通過 HTTP請求連接到遠程服務器。
但是，由于受到瀏覽器的限制，這種方法不可以進行跨域訪問，如果使用這種方法進行跨域訪問則會出現安全問題。不過，我們可以發現，在web頁面跨域調用 js文件時，不會受到瀏覽器的限制，所以我們可以利用將遠程服務器端的數據裝入js格式的文件，然后再用來供客戶端進行調用。
JSON（JavaScript 對象表示法）是一種輕量級的文本數據交換格式，它具有自我描述性，易于理解。JSON 可通過 JavaScript 進行解析，JSON 數據可使用 AJAX 進行傳輸。

JSON實例：

{
    "employees": [
    { "firstName":"Bill" , "lastName":"Gates" },
    { "firstName":"George" , "lastName":"Bush" },
    { "firstName":"Thomas" , "lastName":"Carter" }
    ]
    }

JSON 語法是 JavaScript 對象表示法語法的子集:
數據在名稱/值對中, 數據由逗號分隔 ,花括號保存對象, 方括號保存數組。
JSON的特性

純文本，易于跨平臺傳遞

Javascript原生支持，后臺語言幾乎全部支持

使用輕量級的文本數據交換格式，適合在互聯網中傳遞

比 XML 更小、更快，更易解析。

基于JSON的這些特性，可以通過使服務器動態生成JSON文件，然后將客戶端需要的數據裝入這個文件，再將該文件調回客戶端供客戶端使用。為了便于客戶端使用數據，逐漸形成了一種非正式傳輸協議JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來裝入JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

如何使用JSONP

一種簡單的方式就是使用jQuery來實現：




    
    test

type：請求類型，GET 或 POST,默認為 GET；
async:true（異步）或 false（同步）,默認情況下為true,同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行;
url:發送請求的地址(跨域請求時應為絕對地址);
dataType:指定服務器返回的數據類型;
jsonpCallback:自定義JSONP回調函數名稱;
success:請求成功后回調函數;
error:請求失敗時調用此方法。

運行結果：

服務器返回的數據類型：

返回一個指定函數名為message的回調函數，函數里面包裹的數據為JSON格式。

GPU云服務器云服務器 jsonp跨域請求 ajax jsonp跨域傳值 jsonp獲取json數據 js ajax跨域請求數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91293.html

再也不學AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用跨域請求資源時，同源策略又會成為開發者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實現使用技術跨域獲取資源，需要服務端和客戶端的協同合作。瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用AJAX跨域請求資源時，同源策略又會成為開發者的阻礙。在本文中，我們會簡單介紹需...

enda 2019-08-21 17:55 評論0 收藏0
JSONP跨域訪問API接口深入理解

摘要：說明關于跨域問題的解決方案多達七八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈自行百度或這里不會跟你說那么多種只說使用最多的一種你要非說用的不是最多的我不信哦你信好了哈哈你開心就好關于跨域瀏覽器的同源策略要了解什么是跨域你需要了說明關于跨域問題的解決方案多達七、八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈, ?！自行百度或 Google, 這里不會跟你...

tunny 2019-06-28 18:28 評論0 收藏0
原生JavaScript實現AJAX、JSONP

摘要：在這里講解一下用原生如何實現。當然，前面也說過，你可以給定固定回調函數名最后我已經將和請求合并在一起了，下載鏈接原文鏈接原生實現如有問題，歡迎在下方留言相信大多數前端開發者在需要與后端進行數據交互時，為了方便快捷，都會選擇JQuery中封裝的AJAX方法，但是有些時候，我們只需要JQuery的AJAX請求方法，而其他的功能用到的很少，這顯然是沒必要的。其實，原生JavaScript...

xcc3641 2019-08-20 14:06 評論0 收藏0
JSONP的一點筆記<修改中>

摘要：請求服務器數據并規定回調函數為上面代碼通過動態添加元素，向服務器發出請求。另外假設向服務發送的請求是這樣的在這種情況下，是表示請求的請求參數，而是應用程序的回調函數的名稱。清單調用回調服務注意，我們使用作為回調函數名，而非真實的函數名。同源策略同源策略(Same origin policy)，它是由Netscape提出的一個著名的安全策略。現在所有支持JavaScript的瀏覽器都...

姘存按 2019-08-20 17:22 評論0 收藏0