preface

Because of the browser’s same-origin policy, AJAX requests cannot be sent to non-same-origin addresses (they can be sent, but the browser will reject the response).

The same protocol, domain name, and port are the same.


Demand analysis

We need to introduce our JS script on the target site (the site that needs statistics), in which we will do some data collection. The data is then sent to the statistical system.

However, as a statistical system (such as Baidu, CNZZ, etc.) and the website to be counted must have different sources, so there will be the same origin restriction, and AJAX requests cannot be sent. So how do you send that data across domains to the statistical system? Then you can use the JSONP technology.

Jsonp is a cross-domain solution, not a technology. Since IMG, link, and script are not subject to the same origin policy, we can use these tags to send a GET request. JSONP supports only GET requests, not POST requests.


Specific code

The front-end code is as follows:

Create a script tag that concatenates the data to SRC and sends it to the background interface as get. Then insert the script tag into the page.

var isbaidu = 0; // The types of Baidu links are defined as: 1 for Baidu advertising space links, 2 for Baidu optimization links
var wd = ""; // Search keywords in Baidu
var parentURL=""; // The URL address before entering this website (in this case, it refers to the address from Baidu to the same website, this link can get the information we need)


// Baidu AD space link
if (parentURL.indexOf("baidu.com/baidu.php") != -1) {
	isbaidu=1;
}else if (parentURL.indexOf("baidu.com/link") != -1){
	isbaidu=2;
}

// Get the URL of baidu
try{if(opener.document.referrer.length>0){parentURL=opener.document.referrer; }}catch(e){parentURL=document.referrer; } parentURL = parentURL.toLowerCase();// Get the user's search keywords
arr = parentURL.split("?");
arrurl = arr[1].split("&");
for (i = 0; i <= arrurl.length - 1; i++) {
  arr2 = arrurl[i].split("=");
  for (j = 0; j <= arr2.length - 1; j++) {
    if (arr2[0] = ="wd" || arr2[0] = ="word") {
      wd = arr2[1]; }}}// If it is not empty, it is refreshed. Filter out useless data caused by refreshing
if (window.name == "") { 
	if(isbaidu){
    /**JSONP core code **/
    // Concatenate the data to the SCR address and send it to the background in get mode

    // If you need to retrieve data from the background, you need to define a callback data to process the data.
    // Callback defines a callback function name and outputs a function call in the background in the form of a callback function (which returns data), passing the data directly back as an argument to the callback function.
    // The front end defines the callback directly, and the parameters are the data passed back from the background

		var JSONP=document.createElement("script");
		JSONP.type="text/javascript";  
		JSONP.src="http://www.jk1201.com/getinfo.php?callback=jsonpCallback&itemid="+_item_id+"&isbaidu="+isbaidu+"&wd="+wd;
		document.getElementsByTagName("head") [0].appendChild(JSONP); }}window.name = "frombaidu"; // Refresh the current page. Window.name is not destroyed

// If this callback is not needed for statistics only, it will be used to fetch data only if the data returned by the background is needed.
function jsonpCallback(result){
  // The front-end can do the corresponding operation according to the result returned by the background.
	console.log(result)
}

Copy the code


The code behind the scenes (here is the PHP code) looks like this:


      

// ...
$result = 'ABC' $result = 'ABC'

// Execute the callback function dynamically
$callback=$_GET['callback'];
echo $callback."($result)";

? >
Copy the code

Finally, the get request returns output jsonpCallback(‘ ABC ‘) on the page, which executes the front-end defined callback function to retrieve the result returned in the background. You can then use the return result (‘ ABC ‘) to do the corresponding processing.