Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to master JSONP". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to master JSONP.

A normal request: JSON

When sending a request normally, curl example:

$curl https://shanyue.tech/api/user?id=100 {"id": 100, "name": "shanyue", "wechat": "xxxxx", "phone": "183xxxxxxxx"}

Send a request using fetch, for example:

Const data = await fetch ('https://shanyue.tech/api/user?id=100', {headers: {' content-type': 'application/json',}, method:' GET',}) .then (res = > res.json ())

After requesting the data, use a function to process the data

HandleData (data)

A JSONP request

JSONP, whose full name is JSON with Padding, appeared in order to solve cross-domain problems. Although it can only handle GET cross-domain, although now basically use CORS cross-domain, but still need to know it, after all, the interview will ask.

Curl example

$curl https://shanyue.tech/api/user?id=100&callback=padding padding ({"id": 100, "name": "shanyue", "wechat": "xxxxx", "phone": "183xxxxxxxx"})

It is clear at a glance how different a normal request is: there is an extra callback=padding, and the response data is surrounded by padding, which is JSONP

After requesting the data, how to deal with the data? At this time, padding is the function of dealing with data.

Window.padding = handleData

Implement a jsonp function here

Function jsonp_simple ({url, onData, params}) {const script = document.createElement ('script') / / 1. The default callback function is padding script.src = `${url}? ${stringify ({callback:' padding',... params})}` / / II. Use onData as the window.padding function to receive data window ['padding'] = onData document.body.appendChild (script)}

At this point, there will be a problem: the window.padding function will pollute the overall situation, what if multiple requests are sent?

Make the callback function name of jsonp as a random variable, as follows

Function jsonp ({url, onData, params}) {const script = document.createElement ('script') / / 1, to avoid global pollution Use a random function name const cbFnName = `JSONP_PADDING_$ {Math.random (). ToString (). Slice (2)} `/ 2, the default callback function is cbFnName script.src =` ${url}? ${stringify ({callback: cbFnName,... params})} `/ / 3. Use onData as the cbFnName callback function to receive data window [cbFnName] = onData Document.body.appendChild (script)} / / send JSONP request jsonp ({url: 'http://localhost:10010', params: {id: 10000}, onData (data) {console.log (' Data:', data)}})

Code appendix

The complete code can be found in the github warehouse of Shanyue blog: https://github.com/shfshanyue/blog/tree/master/code/jsonp/

The complete code of the JSONP implementation:

Function stringify (data) {const pairs = Object.entries (data) const qs = pairs.map (([k, v])) = > {let noValue = false if (v = null | | v = undefined | | typeof v = 'object') {noValue = true} return `${encodeURIComponent (k)} = ${noValue?': encodeURIComponent (v)}`}). Join ('&') return qs} function jsonp ({url, onData) Params}) {const script = document.createElement ('script') / / 1, in order to avoid global pollution Use a random function name const cbFnName = `JSONP_PADDING_$ {Math.random (). ToString (). Slice (2)} `/ 2, the default callback function is cbFnName script.src =` ${url}? ${stringify ({callback: cbFnName,... params})} `/ / 3. Use onData as the cbFnName callback function to receive data window [cbFnName] = onData Document.body.appendChild (script)}

JSONP server adaptation code:

Const http = require ('http') const url = require (' url') const qs = require ('querystring') const server = http.createServer ((req, res) = > {const {pathname, query} = url.parse (req.url) const params = qs.parse (query) const data = {name:' shanyue' Id: params.id} if (params.callback) {str = `$ {params.callback} (${JSON.stringify (data)}) `res.end (str)} else {res.end ()}} server.listen (10010, () = > console.log ('Done'))

The JSONP page calls the relevant code

Jsonp ({url: 'http://localhost:10010', params: {id: 10000}, onData (data) {console.log (' Data:', data)}})

Sample demonstration of JSONP implementation code

Clone the code from it: the github warehouse of Shanyue blog

File structure

Index.js: simple and complex implementation of jsonp

Server.js: server interface form

Demo.html: how the front end calls JSONP

Quick demonstration

/ / Open the server $node server.js / / start a service for a pair of demo.html, and follow the prompts to open the address in the browser. The http://localhost:5000 / / observation console should output the callback result of JSONP $serve. At this point, I believe you have a deeper understanding of "how to master JSONP". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.