JSONP跨域请求的小尝试

众所周知，为了安全性考虑浏览器是不支持跨域请求的，哪些请求是跨域请求？
什么是跨域请求
总之，同源是指 协议、域名、端口都相同，否则都算跨域。

本文用JSONP的方式实现了一个小小的跨域请求demo,在，
跨域请求到test329上；
向php脚本传递了两个参数，一个是callback回调函数，用于取回数据；另一个是date参数，是传递给脚本的入参。

//Stats.php
$date = $_GET['date']; 获取入参date;
$params = $_GET['callback']; 获取回调函数;
echo $params . '(' . json_encode($output) . ')'; 调用回调函数，即可将后端数据outout传递给前端。

execute(['date' => $date]);

$params = $_GET['callback'];
echo $params . '(' . json_encode($output) . ')';

class Stats
{

    private $objCheckTaskMain = null;

    public function __construct()
    {
        $this->objCheckTaskMain = new Service_Data_Task_CheckTaskMain();
    }

    public function execute($input)
    {
        $targetDate = isset($input['date']) && intval($input['date']) != 0 ? intval($input['date']) : date('Ymd', time());
        $zeroTime   = strtotime($targetDate);

        $sql = "select item,check_status,count(*) as cnt from tblCheckTaskMain where delete_time =0 and  dispatch_time >= " . $zeroTime . " group by item,check_status";
        $ret = $this->objCheckTaskMain->query($sql);

        $item_status_cnt = [];
        foreach ($ret as $agg_data) {

            $key = $agg_data['item'] . '-' . $agg_data['check_status'];

            $item_status_cnt[$key] = $agg_data['cnt'];

        }

        $check_status_set = array_unique(array_column($ret, 'check_status'));
        sort($check_status_set);

        $legend = [];
        foreach ($check_status_set as $check_status) {
            $legend[$check_status] = Conf_Config::CHECK_STATUS_MAP[$check_status];
        }

        $xAxis = [3 => '订正', 4 => '上镜', 5 => '微信单聊', 6 => '微信群聊', 7 => '兼职辅审', 8 => '兼职纯批'];

        $series = [];

        foreach ($legend as $check_status => $check_status_name) {

            $tmp = [
                'name' => $check_status_name,
                'type' => 'bar',
                'data' => $this->getSeriesData($check_status, $xAxis, $item_status_cnt),
            ];

            $series[] = $tmp;
        }

        return [
            'legend' => array_values($legend),
            'xAxis'  => array_values($xAxis),
            'series' => array_values($series),
        ];


    }


    private function getSeriesData($check_status, $xAxis, $item_status_cnt)
    {

        $data = [];
        foreach ($xAxis as $item => $item_name) {
            $key    = $item . '-' . $check_status;
            $data[] = isset($item_status_cnt[$key]) ? intval($item_status_cnt[$key]) : 0;
        }
        return $data;
    }
}

过程中遇到的坑：
document.createElement('script');是动态生成一个script标签，追加到html中，这个script会最后执行。导致echart拿不到后端数据，渲染失败。

后来，将渲染echart的代码放到callback里函数执行，迎刃而解（前端小白两股瑟瑟）。

鸣谢： https://blog.csdn.net/weixin_43837229/article/details/90720536