首页» 网络 » 使用JSONP写一个简易的百度统计

使用JSONP写一个简易的百度统计

日期:2020年07月14日 阅读次数:2778 分类:网络

前言

因为浏览器同源策略的限制,无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)。

“同源”指的是“三个相同”:协议相同、域名相同、端口相同。

需求分析

我们需要在目标网站(需要统计的网站)引入我们的JS脚本,在这个脚本中我们会对需要的数据做一下收集。然后把数据发送给统计系统。

但是作为统计系统(如百度、CNZZ等)和要统计的网站肯定是不同源的,所以就会有同源限制,无法发送AJAX请求。那应该如何把统计到的数据跨域发送给统计系统呢?那就可以使用JSONP技术了。

jsonp是一种跨域解决方案,而不是一种技术。
因为img、link、script是不受“同源策略”限制的,所以我们可以利用这些标签去发送一个get请求。> JSONP只支持GET请求,不支持POST请求。

具体代码

前端代码如下:

创建一个script标签,把获取的数据拼接到src中,以get方式发送给后台接口。然后把script标签插入页面。

var isbaidu = 0; // 百度链接的类型,定义为:1为百度广告位链接,2为百度优化链接
var wd = ""; // 用户在百度搜索的关键词
var parentURL=""; // 进入本网站前的URL地址(在这里指的是从百度跳转到同网站的地址,这个链接中可以获取到我们需要的信息)


// 百度广告位链接
if (parentURL.indexOf("baidu.com/baidu.php") != -1) {
    isbaidu=1;
}else if (parentURL.indexOf("baidu.com/link") != -1){
    isbaidu=2;
}

// 获取百度的地址URL
try{if(opener.document.referrer.length>0){parentURL=opener.document.referrer;}}catch(e){parentURL=document.referrer;}
parentURL = parentURL.toLowerCase();

// 获取用户搜索关键词
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 (window.name == "") { 
    if(isbaidu){
    /**JSONP核心代码**/
    // 把要发送的数据拼接到scr地址上,以get方式发送给后台

    // 【如果需要获取后台返回的数据,则需要定义一个回调数据来处理数据】
    // callback定义了一个回调函数名,后台输出一个函数调用,格式如:回调函数(返回数据),直接把数据作为回调函数的实参传递回来。
    // 前端直接定义这个回调,然后形参就是后台传递回来的数据

        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"; // 刷新当前页面,window.name并不会销毁

// 如果只是为了统计信息才不需要这个回调函数,只有需要获取后台返回的数据时才会使用这个回调数据获取数据。
function jsonpCallback(result){
  // 前端就可以根据后台返回的数据(result)来作相应的操作了。
    console.log(result)
}

后台代码(这里是php代码)如下:

<?php

// ...
// 一顿操作猛如虎,处理数据并获取需要回传到前端的数据result = 'abc'

//动态执行回调函数callback=_GET['callback'];
echocallback."($result)";

?>

最终get请求会在页面返回输出 jsonpCallback('abc'),也就是执行了前端定义好的回调函数,从而拿到了后台返回的结果。然后就能用这个返回结果(’abc’)做对应处理了。

文章标签: