摘要:獲取用戶信息姓名王小二年齡獲取用戶信息姓名年齡上面代碼通過動態(tài)添加元素,向服務器發(fā)出請求。注意,該請求的查詢字符串有一個參數(shù),用來指定回調(diào)函數(shù)的名字,這對于是必需的。服務器收到這個請求以后,會將數(shù)據(jù)放在回調(diào)函數(shù)的參數(shù)位置返回。
JSONP是服務器與客戶端跨源通信的常用方法。最大特點就是簡單適用,老式瀏覽器全部支持,服務器改造非常小。
它的基本思想是,網(wǎng)頁通過添加一個元素,向服務器請求JSON數(shù)據(jù),這種做法不受同源政策限制;服務器收到請求后,將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)里傳回來。
首先,網(wǎng)頁動態(tài)插入元素,由它向跨源網(wǎng)址發(fā)出請求。
function addScriptTag(src) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag("http://127.0.0.1:3000?callback=foo"); } function foo(data) { // 獲取用戶信息- 姓名:王小二 年齡:30 console.log("獲取用戶信息- 姓名:" + data.name + " 年齡:" + data.age); };
上面代碼通過動態(tài)添加元素,向服務器example.com發(fā)出請求。注意,該請求的查詢字符串有一個callback參數(shù),用來指定回調(diào)函數(shù)的名字,這對于JSONP是必需的。
服務器收到這個請求以后,會將數(shù)據(jù)放在回調(diào)函數(shù)的參數(shù)位置返回。
nodejs 服務端代碼為例:
const http = require("http"); const querystring = require("querystring"); http.createServer(function(req,res){ let params = querystring.parse(req.url.replace(//??/, "")); let data = {"name": "王小二", "age": 30}; res.writeHead(200, {"Content-Type":"application/json;charset=utf-8"}); res.end(params.callback + "("+JSON.stringify(data)+")"); }).listen(3000);
由于元素請求的腳本,直接作為代碼運行。這時,只要瀏覽器定義了foo函數(shù),該函數(shù)就會立即調(diào)用。作為參數(shù)的 JSON 數(shù)據(jù)被視為JavaScript對象,而不是字符串,因此避免了使用JSON.parse的步驟。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/99560.html
摘要:同源策略在中有一個很重要的安全性限制,被稱為同源策略。然而,當進行一些比較深入的前端編程的時候,不可避免地需要進行跨域操作,這時候同源策略就顯得過于苛刻。 JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。對于JSON大家應該是很了解了吧,不是很清楚的朋友可以去json.org上了解下,簡單易懂。 ...
摘要:因為同源策略的限制,我們不能在與外部服務器進行通信的時候使用。這個是跨域服務器取數(shù)據(jù)的接口,參數(shù)為回調(diào)函數(shù)的名字,返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務器。 一、同源策略 同源策略,它是由Netscape提出的一個著名的安全策略,現(xiàn)在所有的可支持javascript的瀏覽器都會使用這個策略。 為什么需要同源策略,這里舉個例子: 假設現(xiàn)在沒有同源策略,會發(fā)生什么事...
摘要:同源策略限制了我們無法通過原生的對象獲取到數(shù)據(jù)。的原理其實不復雜瀏覽器的同源策略把跨域請求都禁止了的標簽是例外,可以突破同源策略從其他來源獲取數(shù)據(jù)由上可得,我們可以通過標簽引入文件,然后通過一系列操作獲取數(shù)據(jù)。上面三點便是實現(xiàn)跨域的原理。 今天做頁面時,后臺給了個接口:https://a.a.com/a/a.json,我頁面的上線地址是:http://b.b.com。顯而易見,因為瀏覽...
摘要:同源策略,它是由提出的一個著名的安全策略,現(xiàn)在所有支持的瀏覽器都會使用這個策略。客戶端在對文件調(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進行處理和展現(xiàn)了,這種獲取遠程數(shù)據(jù)的方式看起來非常像,但其實并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數(shù)據(jù)交換方式,或者叫做數(shù)據(jù)描述格式。 JSON的優(yōu)點: 基于純文本,跨平臺傳遞極其簡單; Javas...
摘要:概述是一種跨域通信的手段,它的原理其實很簡單首先是利用標簽的屬性來實現(xiàn)跨域。可靠的實現(xiàn)添加回調(diào)函數(shù)拼接傳遞的是一個匿名的回調(diào)函數(shù),要執(zhí)行的話,暴露為一個全局方法出錯處理使用示例來源個人博客 1. 概述 jsonp是一種跨域通信的手段,它的原理其實很簡單: 首先是利用script標簽的src屬性來實現(xiàn)跨域。 通過將前端方法作為參數(shù)傳遞到服務器端,然后由服務器端注入?yún)?shù)之后再返回,實現(xiàn)服...
閱讀 1357·2021-11-22 15:25
閱讀 3350·2021-10-21 09:38
閱讀 1564·2021-10-19 13:21
閱讀 992·2021-09-06 15:00
閱讀 1674·2019-08-30 15:44
閱讀 2578·2019-08-29 15:40
閱讀 3432·2019-08-29 13:44
閱讀 2025·2019-08-26 16:56