开发者学堂课程【Ajax 前端开发入门与实战：跨域的本质-动态创建 script 标签】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8544
跨域的本质-动态创建 script 标签
一、举例
创建 weather03.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;
var head = document.querySelector("head");
head.appendChild(script);
};
};
</script>
</head>
<body>
<h1>天气信息查询</h1>
<input type="text"id="city"placeholder="请输入 城市名称">
<input type="button"id="btn"value="查询">
</body>
</html>
data.php 文件：
<?php
$city = $_ GET["city"];
if($city == "beijing") {
echo "foo('北京的天气晴')";
}else {
echo "foo('没有查询到天气信息')";
}
//echo "var str = 'haha'";
?>
输入 beijing 浏览器查询输出值为：
输入 beijing1 浏览器查询输出值为：
通过动态创建 script 标签，动态指定 src 属性来访问外部的 php 文件。
而这个文件会根据传递过来的参数而作对应的输出，输出的内容就是 JS 的方法调用，这个方法在前端界面中已经事先定义好，通过这个方法就可以得到我们想要的数据。
