JSONP cross-domain and implementation of Baidu Home Lenovo function

What is cross-domain?

For example, Ajax must perform asynchronous requests under its own domain (name). If it is not requested under the same domain, it will report an error. For example, we use Ajax to request Tencent’s API if our domain is not in the ‘white list’ of Tencent’s interface, Tencent’s interface will refuse to return to data. However, in most cases, we can’t go to the corresponding website to apply for a ‘white list’. At this time, we will use the cross-domain method. There are many ways in cross-domain, such as iframe but this Operable is too bad, and the DOM element in Frame cannot be operated. One of the most popular ways is to use JSONP.

What is JSONP


JSONP is English for JSON with Padding. Simply, JSONP is a Script tag, usually we call Script, Link, IMG called resource labels, which means to connect resources. Just remember that JSONP is the Script tag. Let’s take a part of the next part:

How to introduce data


We know that the operating system is not the suffix name to identify a file, With the content inside the document, the suffix name is more favorable in the third party’s software. For example, we change A.TXT to a.png. Then when I open the picture viewer, it is also the picture that does not exist (if you have learned Linux’s classmates). [Interested students can try this to change the suffix of a JS file to other formats. Then we solve the problem of how the script introduces data, that is, we can use the Script tag to reference a JSON or .php resource file.

How to use resources to introduce resources, then how to use resources?

First, a simple example, such as we define it in an A.json.One of the following variables

“TEXT”;

  We go to the HTML to load it, then execute, As follows:  

ALERT (STR); // text

   This can be performed correctly, but we also know what variables and methods are not defined in JSON data. This seems to be below:     
Var STR = “Text”;

We go to the HTML to load it, then go to execute, as follows:

   
ALERT (STR); // Error

This obviously will report an error, then the cross-domain solution is resolved. How to use this resource problem.
 We first define a way in the background, call all the data as a function of a function, of course, this function is well predefined, as in the following format:     Function SOLVE (DATA) {// Using Data}   
Let’s take a look at A. JSON is defined

SOLVE (100); SOLVE ({}); // is equivalent to the data inside A.json is passed to the SOLVE function, then Inside the SOLVE function, you can

There are several methods in resources
   First look at the examples, when we introduce a PHP dynamic resource   

For example, we have two buttons to execute, receive $ A. Another request to receive $ B, then how should we do? Add a SOLVE () in the PHO file? Although it is desirable, if there is N requests, as long as it adds N methods, this is certain. How do we solve it? There is a good way to add the function name in the request, such as the following way:
   


This will avoid this problem very well.

Ok, if you are connected above, then you know what is cross-domain and how to solve cross-domain, then the light does not practice or not good, we use Baidu’s search. API is easy to contact.

Of course, there is an important issue, and JSONP should be dynamically loaded, we should create it with code.
  JSONP cross-domain implementation Baidu Home Lenovo function <?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$a = "111";
$b = "aaa";
if ($t == 'num') {
$data = json_encode($a);
} else {
$data = json_encode($b);
}
echo solve($data)
 
The main idea is to use the cross-domain of
JSONP

, using Baidu back-on interface, according to the input box Content, take data to the background, then display under the search box, and

Li
is used a
 tag package, basically realizes the function of the Baidu home to shrink and then jump  <?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') {
$data = json_encode($arr1);
} else {
$data = json_encode($arr2);
}

echo $callback.'('.$data.');'; 

VAR TIMER = NULL / / anti-shake VAR DomINPUT = Document.getElementByid (‘INPUT’) VAR DOMUL = Document.GetElementsByTagName ( ‘ul’) [0] domInput.oninput = function (e) {clearTimeout (timer) // Debounce timer = setTimeout (function () {var domScript = document.createElement ( ‘script’) domScript.src = ‘https://sp0.baidu.com/5a1fazu8aa54nxgko9wtanf6hhy/su?wd=’ + e.target.Value +’ & CB = JSONPCB ‘// JsonP implementation document.body.Appendchild (Domscript)}}}, 100)} function JSONPCB ( DATA) {// JSONP’s callback function of the callback function let result = ‘DATA.S.FOREACH (Element => {Result + =’


‘+ Element +’

‘}) Domul.innerhtml = Result}

can achieve click Lenovo word jump

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment