JSONP Basic Knowledge Detailed Explanation

2021-08-05 08:16:55
OfStack

Previous words

JSONP is the abbreviation of JSON with padding (filled JSON or parametric JSON), which is a new method of applying JSON. It is often used for cross-source communication between servers and clients, and is very popular in later Web services. This article will introduce JSONP in detail

Foundation

The basic idea of JSONP is that a web page is created by adding a < script > Element to request JSON data from the server, which is not restricted by the homology policy; After receiving the request, the server sends the data back in a callback function with the specified name

When passing < script > Element, the content of the response must be wrapped in the javascript function name and parentheses. Instead of sending such a piece of JSON data, this is the meaning of P in JSONP

[1, 2, {"buckle": "my shoe"}]

JSONP looks similar to JSON except that JSON is included in the function call and sends a wrapped JSON response like this:

handleResponse([l, 2, {"buckle": "my shoe"}])

The response after the package becomes < script > Element, which judges the JSON encoded data and passes it to the handleResponse () function

In practice, services that support JSONP do not force the callback function name that the client must implement, such as handleResponse. Instead, they use the value of the query parameter, allowing the client to specify a function name and then populate the response with the function name. Many services that support JSONP can distinguish this parameter name. Another common parameter name is callback. In order to make the service used support similar special requirements, we need to make some changes in the code

JSONP consists of two parts: callback function and data. A callback function is a function that should be called in the page when a response arrives. The name 1 of the callback function is generally specified in the request. And the data is the JSON data passed into the callback function

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

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

JSONP is implemented through dynamic < script > Element, you can specify a cross-domain URL for the src attribute. Here's < script > Element and < img > Elements have the ability to load resources from other domains without restriction. Because JSONP is valid javascript code, it is executed immediately after the request is completed, that is, after the JSONP response is loaded into the page


function handleResponse(response){
  alert ("You're at IP address " + response.ip + ", which is in " + response.city + ", "+ response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handLeResponse"; document.body.insertBefore(script, document.body.firstChild);

The main reason why JSONP is extremely popular among developers is that it is very simple to use, fully supported by old browsers, and the server transformation is very small. Compared with the image Ping, it has the advantage of directly accessing the response text and supporting two-way communication between the browser and the server

Use < script > Elements for Ajax transmissions and are not affected by homology policies, so they can be used to request data from other servers; Also, the response containing JSON encoded data is automatically decoded (i.e. executed)

However, JSONP has two drawbacks: First, JSONP loads code from other domains for execution. If other domains are not secure, it is likely that some malicious code will be entrained in the response, and there is no way to pursue it except to abandon the JSONP call completely. Therefore, when using Web service that is not operated and maintained by itself, 1 must ensure its safety and reliability; Secondly, it is not easy to determine whether the JSONP request failed. Although HTML5 gives < script > Element adds an onerror event handler, but it is not currently supported by any browsers. For this reason, developers have to use a timer to detect whether a response has been received within a specified time. But even so, it is not satisfactory. After all, not every user has the same speed and bandwidth on the Internet

Simple example

"Front end"


<button id="btn"> Getting information </button>
<img id="img" height="16" style="display:none" src="data:image/gif;base64,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" alt="loading">
<div id="result"></div>
<script>
var add = (function(){
  var counter = 0;
  return function(){
    return ++counter;
  }
})();
function loadScript(url){
  loadScript.mark = 'load';
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  script.onload = function(){
    img.style.display = 'none';
    btn.removeAttribute('disabled');
  }
  document.body.appendChild(script);
}
function test(data){
  var sum = add() - 1;
  if(sum < data.length ){
   result.innerHTML += data[sum];  
  }
}
btn.onclick = function(){
  img.style.display = 'inline-block';
  btn.setAttribute('disabled','');
  loadScript('https://www.webhuochai.com/test/getData.php?callback=test');
}
</script>

"Back-end"


<?php
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
$arr = [1,2,3,4,5];
echo test_input($_GET['callback']) ."(" .json_encode($arr) .");";
?>

Baidu search box

Baidu search box is the use of JSONP technology, in Baidu search URL, useful queries are as follows

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=123&&cb=a

The results are:


a({q:"123",p:false,s:["12306","12306 Railway customer service center ","12308 Car booking official website ","12306 Online booking of train tickets in official website ","12333","12315","12345","12333 Social Security Inquiry Network ","123 Website Home ","12366"]});

Therefore, wd is the key word, and cb is used as the function name of JSONP. Among the acquired data, s is data composed of data starting with keywords

The key URL of Baidu search is as follows

https://www.baidu.com/s?wd=a

wd is the keyword. When wd=a, the web page with the keyword a will be opened


<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{color:inherit;text-decoration: none;}
input{padding: 0;border: 0;}
.box{width: 340px;height: 38px;border: 2px solid gray;}
.con{overflow: hidden;}
.input{float: left;width: 300px;height: 38px;}
.search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}
.list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;}
.in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;}
.list .in:last-child{margin-bottom: -1px;}
.in:hover{background-color: #f9f9f9;}
</style>
<div class="box" id="box">
  <div class="con">
    <input class="input" id="search">
    <a target="_blank" id="btn" href="javascript:;" rel="external nofollow" class="search"></a>
  </div>
  <ul class="list" id="list"></ul>    
</div> 
<script>
function loadScript(url){
  loadScript.mark = 'load';
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
}
function callback(data){
  if(data){
    var arr = data.s;
    var html = '';
    for(var i = 0,len = arr.length; i < len; i++){
      html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank' style='display:block'>" + arr[i]+ "</a></li>"
    }
    list.innerHTML = html;    
  }
}
search.onkeyup = function(e){
  e = e || event;
  if(e.keyCode == '13'){
    window.open('https://www.baidu.com/s?wd=' + this.value);
  }
  if(this.value){
    if(search.data != this.value){
      btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value);
      var that = this;
      loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback");
    }
  }else{
    list.innerHTML = '';
  }
  search.data = this.value;
}
search.onclick = function(e){
  e = e || event;
  list.style.display = 'block';
  if(e.stopPropagation){
    e.stopPropagation();
  }else{
    e.cancelBubble = true;
  }
}
document.onclick = function(){
   list.style.display = 'none';
}
</script>