大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是浏览器上为了安全考虑实施的非常重要的安全机制。
Ajax 默认只能获取到同源的数据，对于非同源的数据，Ajax是获取不到的。
什么是同源？
协议、域名、端口全部相同。
比如一个界面地址为： 这个网址，在这个地址中要去访问下面服务器的数据，那么会发生什么情况呢？
URL 结果 原因https://www.example.com/dir/other.html 不同源 协议不同，https 和 http
不同源 域名不同
:81/dir/other.html 不同源 端口不同
同源 协议，域名，端口都相同
同源 协议，域名，端口都相同
如果使用 Ajax 获取非同源的数据，会报错，报错信息如下：
Failed to load ?uname=176: No \'Access-Control-Allow-Origin\' header is present on the requested resource. Origin \'http://localhost\' is therefore not allowed access. The response had HTTP status code 404.那么。想要获取非同源地址的数据，就要使用跨域。不论是 Ajax 还是跨域，都是为了访问服务器的数据。简单的来说， Ajax 是为了访问自己服务器的数据，跨域是为了访问别人服务器的数据（比如获取天气信息，航班信息等）。
1、跨域的实现 1.1、引入外部 js 文件我们可以通过 script 标签，用 script 标签的属性引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。
<script src="http://www.example.com/dir/xxx.js"></script>然后，这个外部文件中有一个或几个方法的调用，这些方法的定义在自己的界面文件中，而我们想要的是方法的参数，可以在自己定义的方法中拿到。这就是跨域的本质。
1.2、引入外部 PHP 文件script 引入的应该是 js 文件，如果我们想要引入 php 文件的话，就需要在 php 代码中，返回 js 格式的代码。
<?php echo "var str = \'hello\'"; echo "func(\'123\')"; ?>在我们 html 文件中：
<script> function func(data) { // 就为了获取参数 console.log(data); } </script> <script src="http://www.example.com/xxx.php"></script>再进一步，如果我们在 PHP 地址中传入了参数：
<?php $city = $_GET["city"]; if($city == "beijing") { echo "func(\'获取到北京天气\')"; } else { echo "func(\'为获取到天气信息\')"; } ?>html 文件：
<script> function func(data) { // 就为了获取参数 console.log(data); } </script> <script src="http://www.example.com/xxx.php?city=beijing"></script> 1.3、动态创建 script 标签当然，如果只是手动的在php文件后面传入参数，就太固定了，那么我们可不可以根据用户的输入来获取不同城市天气信息呢？
答案是肯定的。我们可以采取动态创建 script 的方式来获取用户想要的信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>天气查询</h1><br> <input type="text" placeholder="请输入城市"><br> <input type="button" value="获取天气"> <script> function func(data) { console.log(data); } document.getElementById("btn").onclick = function () { var city = document.getElementById("txt").value; var script = document.createElement("script"); script.src = "http://hr.pcebg.efoxconn.com/checkUsername.php?city=" + city; document.getElementsByTagName("head")[0].appendChild(script); }; </script> </body> </html> 1.4、动态指定回调函数名称还记得我们 html 中有个回调函数的定义吗？这个函数的名称是固定的，我们可不可以动态指定呢？答案也是肯定的，我们既然可以在 php 地址传递参数过去，就可以顺便把回调函数的名称也传递过去，动态的指定回调函数的名称。
//... function foo (data) { console.log(data); } script.src = "http://hr.pcebg.efoxconn.com/checkUsername.php?city=" + city + "&callback=foo"; //...