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

This article will explain in detail how to conduct JSONP cross-domain simulation Baidu search, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

What is JSONP

JSONP is the abbreviation of JSON with padding (populated JSON or parametric JSON). It is a new way to apply JSON. It is very popular in later Web services. JSONP looks similar to JSON, except that it is a JSON called in a function, like this:

Callback ({"name": "Wang Huan")

SONP consists of two parts: callback function and data. Callback functions are functions that should be called on the page when the response arrives. The name of the callback function is usually specified in the request. The data is the JSON data passed into the callback function. Here is a typical JSONP request.

Https://freegeoip.net/json/?callback=handleResponse

This URL is requesting a JSONP geolocation service. It is common to specify the callback parameters of the JSONP service through a query string, as shown in the URL above. The callback function specified here is called: handleResponse ()

JSONP is used through dynamic elements, and you can specify a cross-domain URL for the src attribute. You can load resources from other domains without restrictions, because JSONP is valid JavaScript code, so it is executed immediately after the request is completed, that is, after the JSONP response is loaded into the page.

2. JSONP cross-domain request

We know that the same origin policy is a security mechanism of the browser. The so-called source refers to the protocol, domain name and port number. When our script is running, the browser will check whether the script it executes and the data obtained by it is the same as our HTML page. If it is the same, it is the same origin, and it will make a successful request. If their source is different, it is a cross-domain request. By default, browsers do not support cross-domain requests, so what should we do if we want to make cross-domain requests?

Script tags are not restricted by the same origin policy, that is, when we request script scripts, no matter on the server where HTML is located or on other servers, it can be requested, so we take advantage of this nature of script tags to make cross-domain requests for data. Take a look at how JSONP makes cross-domain requests.

First, we request a piece of script code in which if it can call a function we specify and pass the data as an argument, then as long as we define the function and define the parameter, the parameter will receive its argument to get the data. For example:

Suppose a getData (data) is defined in the script, and if you request a script now, the script can call the function getData () and pass in data as an argument, then the data received by the parameter can be processed accordingly.

Function getData (data) {console.log (data);} var script = document.createElement ('script'); script.id =' jsonp'; script.src = 'jsonp.js'; document.body.appendChild (script)

Assuming that the front end has given the function name to the back end, the back end can call this getData () and pass the information. The following jsonp.js file can be requested at jsonp.html.

GetData ({name: 'Xiao Wang', age: 20})

The result of running is as follows:

We get an Object object, which is the data we pass.

So, how do we tell the server that getData () is a function? If we fixed getData () every time, our development would be so rigid that we wouldn't be able to define other function names. In fact, we can tell the back end the name of the function defined by our front end through the get request, and the back end can dynamically generate such a script file and return it to the call to the function.

Baidu has such an interface, let's take a look.

Open the browser Baidu page, open the debugging tool, take a look at the NETwork tab below will listen for all http requests sent by the browser to the server and view the data.

Type "b" in the search box, and the request is shown in the figure:

The keyword for the request is:

The callback function here is actually a global function generated by jquery. After we get this URL, we can save its useful information and replace the callback function with another function:

Https://www.baidu.com/sugrec?pre=1&wd=b&req=2&csor=1&cb=getData();

Enter it into the address bar for testing:

As you can see, this callback function becomes what we set up.

Third, simulate Baidu search

We can now use this interface to generate JSON to simulate the Baidu search page.

We define a global variable as the function to receive the data, and data is the received data. Once the getdata () function is called, it means that our Jsonp function is sent. At this time, we can delete the script tag through removeChild (), so that every time we send a request, the script tag will be deleted after receiving the data. During data processing, getData () returns us an object. There is a keyword g in the object, which corresponds to an array, and there are strings in the array. We can first traverse the array, and then generate a li according to each element to add a ul under the input. First, clear the html in the ul. In this way, each request li is brand new. When the keyup comes out, first take the value of the current input and call the getdata () function to pass the wd in. The process of transferring data by jsonp is realized.

The code is as follows:

Document div {position: relative; width: 600px; height: 40px;} input {width: 500px; height: 40px; border: 2px solid # 4E6EF2;} button {position: absolute; left: 411px; top: 0 Width: 95px; height: 44px; background-color: # 4E6EF2; border: none; font-size: 18px; color: white;} ul {position: relative; left:-40px; top:-10px; width: 411px; height: 400px } li {height: 40px; width: 411px; line-height: 40px; font-size: 16px; list-style: none;} Baidu / / function getData (data) {var script = document.querySelector ('# jsonp') Script [XSS _ clean] .removeChild (script); $('ul'). Html (''); for (var I = 0)

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.