开发者学堂课程【Ajax 前端开发入门与实战：跨域的本质-动态指定回调函数名称】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8545
跨域的本质-动态指定回调函数名称
内容介绍：
一、由前端决定回调方法名称
二、简化 script 标签
一、由前端决定回调方法名称
例：
创建 weather04.html：
<script type="text/javascript">
function foo(data){
console.log(data) ;
}
</script>
<script type="text/javascript"src="http://www.lisi. com/
data.php?city=shanghai"></script>
<script type="text/javascript">
window.onload = function(){
var btn = document.querySelector("#btn");
btn.onclick = function(){
var cityName = document.querySelector("#city").value;
//动态创建 script 标签，动态制定 src 属性的值
var script = document.createElement("script");
script.src="http://www.lisi.com/data.php?city="+cityName +"$Icallback=foo2" ;
var head = document.querySelector("head" );
head.appendChild(script);
}；
}；
</script>
</head>
<body>
data.php 改为：
<?php
$cbName = $_ GET["callback"];
$city = $_ GET["city"];
if($city =="beijing"){
echo $cbName."('北京的天气晴')";
}else {
echo $cbName."foo('没有查询到天气信息')";
}
//echo"var str = 'haha'";
?>
后台接口会根据“&cbName”返回对应名称的方法调用。
data.php 只要能获取到“callback”这个值，就可以将这个值所对应的方法进行调用。
输入参数 beijing 浏览器输出为：
二、简化 script 标签
省去第一个 script 标签,改为：
<script type="text/javascript">
window.onload = function(){
var btn = document.querySelector("#btn");
btn.onclick = function(){
var cityName = document.querySelector(”#city").value;
//动态创建 script 标签，动态制定 src 属性的值
var script =document.createElement("script");
script.src="http://www.lisi.com/data.php?city="+cityName +"&callback=foo2"
；
window["foo2"] = function( data){
console.log(data);
}
var head= document.querySelector("head" );
head.appendChild(script);
};
};
</script>
</head>
<body>
输入参数 beijing 浏览器输出为：
