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

This article will explain in detail how to analyze the principle of JSONP cross-domain request in detail. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

What is homologous strategy?

Homologous policy, which is a famous security policy proposed by Netscape. All browsers that support JavaScript now use this strategy.

To put it simply, the domain name, protocol and port are the same. When two tab pages in a browser open Baidu and Google pages respectively. When the Baidu tab page of the browser executes a script, it will check which page the script belongs to, that is, check whether it is of the same origin. Only scripts of the same origin with Baidu will be executed. If it is not of the same origin, the browser will report an exception in the console when requesting data, prompting you to deny access.

What is JSONP?

JSONP is the abbreviation of JSON with Padding. It is an unofficial protocol that allows integration of Script tags on the server side to return to the client and cross-domain access in the form of javascript callback (this is only a simple implementation of JSONP)

How to understand the above sentence

We know that the src attribute in the tag can request both local images and online resources. That is to say, the src attribute in html supports cross-domain. Similarly, jsonp cross-domain requests make use of the src attribute, but with tags.

So let's take an example:

Write a html file first

Document jsonp requests resources

Writing a js file:

Console.log ("I've been asked!")

Open the console and you can see:

Jsonp implements the request for local data, and here we simulate how the local request is implemented.

How should the data of the request server be implemented?

Learn about cross-domain request patterns:

Let's first open Baidu's search page, open the console, and click Network as follows:

Then enter a b on the page:

Https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=jQuery11020022466709590333256_1639545101298&_=1639545101299

Keyword: wd=b

This is the callback function:

Cb=jQuery11020022466709590333256_1639545101298&_=1639545101299

You can see that his request method is GET, and the Jsonp request method is also GET request by default. Request the server through get, and if the data returned by the server is a json string, it will be automatically converted into a js object. So jsonp needs server and client to cooperate with each other.

The red box is the returned keyword:

As you can see, we didn't write the callback method, and jQuery automatically encapsulated a callback method for us. We changed CD to 001 and found that its name became 001.

Https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35457,34584,35245,35480,35499,35329,35316,26350,35475&wd=b&req=2&csor=1&cb=001

Practice

Get the requested data and display them (Baidu search box).

The practice is as follows:

We can dynamically create scripts based on what we enter, then get the values in the callback function, and then add a list on the page to display them.

Document input {width: 540px; height: 40px; border: 2px solid # 4E6EF2;} li {height: 40px; width: 411px; line-height: 40px; font-size: 16px; list-style: none;}

/ / function getData (data) {var script = document.querySelector ('# jsonp'); script [XSS _ clean] .removeChild (script); $('ul'). Html (''); for (var I = 0 Tinci

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.