JSONP is used to fetch data across domains. Before we get into it, let’s talk about how it differs from JSON

What is JSON?

JSON is a text-based data exchange, or data description format.

Its advantages are:

1. Based on plain text, cross-platform delivery is extremely simple;

2, Javascript native support, background language almost all support;

3, lightweight data format, occupying a very small number of characters, especially suitable for Internet transmission;

4, readable, although not as clear as XML, but after a reasonable sequence of indentation is easy to recognize;

5, easy to write and parse, of course, if you know the data structure;

There are, of course, drawbacks to JSON, where you can’t get data across domains, and the advent of JSONP makes up for that

What is JSONP?

JSONP is an unofficial cross-domain data interaction protocol created by the ingenuity of developers, whose essence is JS files.

Client side implementation of JSONP

  1. Javascript files are invoked on Web pages regardless of whether they are cross-domain. (Furthermore, any tag with a “SRC” attribute has cross-domain capabilities, such as

  2. Code in a cross-domain JS file (which of course complies with the Web scripting security policy) can also be executed unconditionally on a Web page.

Next, I’ll explain how JSONP works with a concrete example. First, make sure you have NodeJS installed on your computer

1. Create a local Web server

Create a new folder jsonp, go to the folder to open the command line tools

npm install koa koa-static
Copy the code

Create a new index.js file

// index.js
const Koa = require('koa')
const app = new Koa()
app.use(require('koa-static')(__dirname + '/public'))
app.listen(3000)
Copy the code

Create index.html, someJsonp.js file

// index.html <! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    var localHandler = function(data){
      alert('I'm a local function that can be called by a cross-domain remote. Js file, and the data from the remote JS is:' + data.result);
    };
  </script>
  <script type="text/javascript" src="./somejsonp.js"></script>
</body>
</html>
Copy the code
// somejsonp.js
localHandler({"result":"I'm the data from remote JS."});
Copy the code

3. Then go back to the jSONp folder, enter the command node index.js, open the browser http://localhost:3000, and you can see the result in the JS file in the browser window, that is, we have obtained the JS data. This is the rationale behind JSONP.

Dynamic acquisition of JSONP data, is to dynamically insert a section of script label in the page, SCR contains path and parameters, so that the background can dynamically generate JS files according to the parameters, involving background implementation, here do not do too much elaboration.

JSONP in JQuery concrete implementation

Jsonp encapsulation in jquery is based on the same principle. Here is the jquery-based code

Modified index. HTML

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $.ajax({
        url: 'http://localhost:3000/somejsonp.js',
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: "localHandler",
        success: function (data) {
          alert(data.result)
        }
    })  
  </script>
</body>
</html>
Copy the code

Jquery dynamically generates script tags and defines methods. The premise is that the jsonpCallback method name is the same as the imported JS file method name.

Refresh the page to see the jSONP data obtained in the pop-up box.

The simple description is that you define a method and then bring in an external JS to call the method and carry the data.

The above is a brief description of JSONP, which I hope will be helpful to you.