url 上回调函数(JSONP原理)

1、JSONP原理:就是跨域的 js程序(get请求对应url,获取到文本数据,在script标签中,就是按照 js 程序执行,)执行时  调用  当前程序中写好的函数,并且把跨域的数据(即参数),传递过去。https://blog.csdn.net/inite/article/details/80333130

2、这里两个js文件的 调用的函数名  和  写好的函数名必须是一样的。如果两个j s 文件的对应函数名都要 同时 修改,这样很不灵活,比较死板。跨域的js文件,通过后端程序,把调用的函数名,变成url上的参数,这样主要前端自定义函数名就可以了。

  如:php 语言,获取到url上的回调函数参数,把这个参数值作为  调用的函数名,写到返回的js程序中。

<?php
$data = array(
    'age' => 24,
    'name' => '小华',
    'sex' => '女'
);

$callback = $_GET['callback'];  // url 上设置的回调函数,作为调用的函数名。
 
echo $callback."(".json_encode($data).")";  // 如url上 callback=mapload,则php返回的数据就是   mapload({age:24,name:'小华',sex:'女'}) ,正是 js 的函数调用

重点:

基于JSOP的原理除了可以 解决 跨域请求数据的问题。也可以实现 js 文件执行后,再执行的功能,即异步回调的功能。高德地图的 异步加载 js 文件,就是这么实现的。https://lbs.amap.com/api/javascript-api/guide/abc/load

window.onLoad  = function(){
    var map = new AMap.Map('container');
}
var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
原文地址:https://www.cnblogs.com/wfblog/p/11852062.html