JSONP (JSON with Padding)

The full name of JSONP is JSON with Padding. JSONP is a usage mode of JSON, which allows a web page to request data from other domains (cross-domain), bypassing AJAX, which cannot be used across domains because of browser security restrictions. Question (same-origin policy).

There is actually no direct relationship between JSONP and JSON, but with JSON, it is a plain text format for easy transmission and supports rich data exchange formats. In addition, JavaScript can directly manipulate JSON natively, making JSONP more convenient and easy to use.

JSONP is one way to solve cross-domain restrictions, and its concept is actually very simple, is the use of <script>the label can cross-domain request feature.

The steps of the entire JSONP process are roughly like:

1. Use JavaScript to dynamically establish a <script>label element, and specify a good srcpoint to a cross-domain URL, such https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&jsoncallback=myCallback

2. After receiving the request, the remote server will return a JavaScript file ( application/javascript), in which a JavaScript function will be executed directly, and the incoming parameter of this function is the result of the data you want to request. The format of the parameter is usually a JSON In fact, it is JavaScript's object literal so it can be read directly!

   In addition, the name of the function to be executed can usually be specified through the URL parameter of the request. For example, the URL "jsoncallback=myCallback" parameter in the above example is used to specify that JSON is passed to the function myCallback and executed.

3. Finally, in the callback function, you can do anything with the data returned by the server.

The above is the operating concept of JSONP, is it pretty simple!

Requesting https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json&jsoncallback=myCallback will return the result content like this:

myCallback({
    "title": "Recent Uploads tagged kitten",
    "link": "https:\/\/www.flickr.com\/photos\/tags\/kitten\/",
    "description": "",
    "modified": "2016-12-25T09:15:04Z",
    "generator": "https:\/\/www.flickr.com",
    "items": [{
        "title": "Hello Big World",
        "link": "https:\/\/www.flickr.com\/photos\/4kleuren\/6087794345\/",
        "media": {
            "m": "https:\/\/farm7.staticflickr.com\/6202\/6087794345_eacfba9149_m.jpg"
        },
        "date_taken": "2016-01-01T00:00:00-08:00",
        "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/4kleuren\/\">gill4kleuren - 13 ml views<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/4kleuren\/6087794345\/\" title=\"Hello Big World\"><img src=\"https:\/\/farm7.staticflickr.com\/6202\/6087794345_eacfba9149_m.jpg\" width=\"240\" height=\"149\" alt=\"Hello Big World\" \/><\/a><\/p> ",
        "published": "2016-12-25T09:15:04Z",
        "author": "nobody@flickr.com (\"gill4kleuren - 13 ml views\")",
        "author_id": "98216376@N00",
        "tags": "cat kitty kitten poes eyes beauty lovely red kat pet animal collage pussycat pussy poezen outdoor world shunset hair little mammal indoor people"
    },
    {
        "title": "Wolfit 0008",
        "link": "https:\/\/www.flickr.com\/photos\/stagedoor\/31486928600\/",
        "media": {
            "m": "https:\/\/farm1.staticflickr.com\/441\/31486928600_6e09e1e1f6_m.jpg"
        },
        "date_taken": "2016-12-24T12:48:04-08:00",
        "description": " <p><a href=\"https:\/\/www.flickr.com\/people\/stagedoor\/\">stagedoor<\/a> posted a photo:<\/p> <p><a href=\"https:\/\/www.flickr.com\/photos\/stagedoor\/31486928600\/\" title=\"Wolfit 0008\"><img src=\"https:\/\/farm1.staticflickr.com\/441\/31486928600_6e09e1e1f6_m.jpg\" width=\"240\" height=\"180\" alt=\"Wolfit 0008\" \/><\/a><\/p> <p>Wolfit, Xmas Eve, aged 12 weeks. Just finished the preliminary setting up of the new camera. Hand held, not good light, lively subject!<br \/> <br \/> Wolfit Pussycat, Scarborough<br \/> Xmas Eve 2016<\/p>",
        "published": "2016-12-25T08:44:06Z",
        "author": "nobody@flickr.com (\"stagedoor\")",
        "author_id": "12494104@N00",
        "tags": "wolfit cat moggie tabby pussy kitten scarborough yorkshire england olympus uk omd em1mkii copyright"
    }]
})

Generally, JSONP is not designed to transmit data with high privacy, because it is more susceptible to security issues such as CSRF attacks.