从零开始学 Web之Ajax（七）跨域的概念及实现原理

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、跨域

跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是浏览器上为了安全考虑实施的非常重要的安全机制。

Ajax 默认只能获取到同源的数据，对于非同源的数据，Ajax是获取不到的。

什么是同源？

协议、域名、端口全部相同。

比如一个界面地址为：http://www.example.com/dir/page.html 这个网址，在这个地址中要去访问下面服务器的数据，那么会发生什么情况呢？

如果使用 Ajax 获取非同源的数据，会报错，报错信息如下：

那么。想要获取非同源地址的数据，就要使用跨域。不论是 Ajax 还是跨域，都是为了访问服务器的数据。简单的来说，Ajax 是为了访问自己服务器的数据，跨域是为了访问别人服务器的数据（比如获取天气信息，航班信息等）。

1、跨域的实现

1.1、引入外部 js 文件

我们可以通过 script 标签，用 script 标签的属性引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。

然后，这个外部文件中有一个或几个方法的调用，这些方法的定义在自己的界面文件中，而我们想要的是方法的参数，可以在自己定义的方法中拿到。这就是跨域的本质。

1.2、引入外部 PHP 文件

script 引入的应该是 js 文件，如果我们想要引入 php 文件的话，就需要在 php 代码中，返回 js 格式的代码。

在我们 html 文件中：

再进一步，如果我们在 PHP 地址中传入了参数：

html 文件：

1.3、动态创建 script 标签

当然，如果只是手动的在php文件后面传入参数，就太固定了，那么我们可不可以根据用户的输入来获取不同城市天气信息呢？

答案是肯定的。我们可以采取动态创建 script 的方式来获取用户想要的信息。

1.4、动态指定回调函数名称

还记得我们 html 中有个回调函数的定义吗？这个函数的名称是固定的，我们可不可以动态指定呢？答案也是肯定的，我们既然可以在 php 地址传递参数过去，就可以顺便把回调函数的名称也传递过去，动态的指定回调函数的名称。

外部 php 代码：

之后，再看我们在 script 里面写的 foo 函数的定义，会不会觉得很突兀？我们把它改成 window 的方法就可以了。

然后把它放到按钮的点击事件中，这样就和按钮的点击事件融为一体了。

在修改回调函数的名称时，只需修改两个部分就可以了（window["foo"] 和 "&callback=foo";），php 的代码不需要修改。

2、案例：淘宝提示词

淘宝提示词接口

3、案例：百度提示词

百度提示词接口

PS：与淘宝提示词代码相同，只需要修改地址、参数即可。

我们从之前的 Ajax 的代码知道，这样的代码太过于冗余，我们需要对代码进行封装。

我们将实现的代码封装成一个 js 文件。

下面以百度提示词为例，使用这个封装好的 js 文件。

欢迎关注

Web前端之巅

念念不忘，必有回响。