跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是浏览器上为了安全考虑实施的非常重要的安全机制。
Ajax 默认只能获取到同源的数据，对于非同源的数据，Ajax是获取不到的。
**什么是同源？**
协议、域名、端口全部相同。
比如一个界面地址为：http://www.example.com/dir/page.html 这个网址，在这个地址中要去访问下面服务器的数据，那么会发生什么情况呢？
| URL | 结果 | 原因 |
| ---------------------------------------- | ---- | ----------------- |
| https://www.example.com/dir/other.html | 不同源 | 协议不同，https 和 http |
| http://en.example.com/dir/other.html | 不同源 | 域名不同 |
| http://www.example.com:81/dir/other.html | 不同源 | 端口不同 |
| http://www.example.com/dir/page2.html | 同源 | 协议，域名，端口都相同 |
| http://www.example.com/dir2/page.html | 同源 | 协议，域名，端口都相同 |
如果使用 Ajax 获取非同源的数据，会报错，报错信息如下：
```
Failed to load http://hr.pcebg.efoxconn.com/checkUsername.php?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 标签的属性引入一个外部文件，这个外部文件是不涉及到同源策略的影响的。
```html
```
然后，这个外部文件中有一个或几个方法的调用，这些方法的定义在自己的界面文件中，而我们想要的是方法的参数，可以在自己定义的方法中拿到。**这就是跨域的本质。**
### 1.2、引入外部 PHP 文件
script 引入的应该是 js 文件，如果我们想要引入 php 文件的话，就需要在 php 代码中，返回 js 格式的代码。
```php
```
在我们 html 文件中：
```html
```
再进一步，如果我们在 PHP 地址中传入了参数：
```php
```
html 文件：
```html
```
### 1.3、动态创建 script 标签
当然，如果只是手动的在php文件后面传入参数，就太固定了，那么我们可不可以根据用户的输入来获取不同城市天气信息呢？
答案是肯定的。**我们可以采取动态创建 script 的方式来获取用户想要的信息。**
```html
Title
天气查询
```
### 1.4、动态指定回调函数名称
还记得我们 html 中有个回调函数的定义吗？这个函数的名称是固定的，我们可不可以动态指定呢？答案也是肯定的，我们既然可以在 php 地址传递参数过去，就可以顺便把回调函数的名称也传递过去，动态的指定回调函数的名称。
```js
//...
function foo (data) {
console.log(data);
}
script.src = "http://hr.pcebg.efoxconn.com/checkUsername.php?city=" + city + "&callback=foo";
//...
```
外部 php 代码：
```php
```
之后，再看我们在 script 里面写的 foo 函数的定义，会不会觉得很突兀？我们把它改成 window 的方法就可以了。
```js
window["foo"] = function(data) { console.log(data); };
```
然后把它放到按钮的点击事件中，这样就和按钮的点击事件融为一体了。
```html
Title
天气查询
```
> 在修改回调函数的名称时，只需修改两个部分就可以了（window["foo"] 和 "&callback=foo";），php 的代码不需要修改。
## 2、案例：淘宝提示词
**淘宝提示词接口**
| 地址 | https://suggest.taobao.com/sug |
| ------ | ------------------------------ |
| 作用描述 | 获取淘宝提示词接口 |
| 请求类型 | get 请求 |
| 参数 | q：关键词； callback：回调函数名称 |
| 返回数据格式 | jsonp格式 |
```html
Title
```
## 3、案例：百度提示词
**百度提示词接口**
| 地址 | http://suggestion.baidu.com/su |
| ------ | ------------------------------ |
| 作用描述 | 获取百度提示词接口 |
| 请求类型 | get 请求 |
| 参数 | wd：关键词； cb：回调函数名称 |
| 返回数据格式 | jsonp格式 |
> PS：与淘宝提示词代码相同，只需要修改地址、参数即可。
我们从之前的 Ajax 的代码知道，这样的代码太过于冗余，我们需要对代码进行封装。
我们将实现的代码封装成一个 js 文件。
```js
//my-sug.js 文件
function myAjaxCross(obj) {
var defaults = {
url: "#", //地址
data: {}, // 业务逻辑参数 ，比如：wd=web&pwd=123
success: function (data) {}, // 参数传递回来的处理函数
jsonp: "callback", // 获取方法名的key值。是一个回调函数，由后端接口文档指定
jsonpCallback: "sug" // 获取方法名的value值，也就是方法名字
};
// 由 obj 传入的对象覆盖 defaults
for (var key in obj) {
defaults[key] = obj[key];
}
var script = document.createElement("script");
// 将 data 里面的参数拼接到 url 后面
var params = "";
for (var attr in defaults.data) {
params += attr + "=" + defaults.data[attr] + "&";
}
// 去掉最后多出来的 & 符号
if (params && (params !== "")) {
params = params.substring(0, params.length - 1);
}
// 再在地址后面拼接回调函数
script.src = defaults.url + "?" + params + "&" + defaults.jsonp + "=" + defaults.jsonpCallback;
console.log(script.src);
// 对回调函数进行定义，将参数传入自己定义的处理数据函数中
window[defaults.jsonpCallback] = function (data) {
defaults.success(data);
};
document.querySelector("head").appendChild(script);
}
```
下面以百度提示词为例，使用这个封装好的 js 文件。
```html
Title
```
## 4、使用 jQuery 获取跨域数据
类似 jQuery 封装好了 Ajax 一样，jQuery 也对跨域数据的获取进行了封装，调用方法跟 Ajax 一模一样。
我们还是以百度提示词举例，使用 jQuery 来获取数据。
```js
$.ajax({
url: "http://suggestion.baidu.com/su",
data: {wd: document.getElementById("txt").value},
success: function (data) {
console.log(data);
var str = "";
if(data.s.length !== 0) {
for (var i = 0; i < data.s.length; i++) {
str += ""+data.s[i]+"";
}
document.getElementById("uu").innerHTML = str;
} else {
str = "未找到关键词";
document.getElementById("uu").innerHTML = str;
}
},
dataType: "jsonp", // 重点
jsonp: "cb", // 根据需求指定，默认为：callback
jsonpCallback: xxx // 可以省略
});
```
> 1、dataType: "jsonp" 是重点，当 dataType 的类型为 jsonp 的时候，才能实现 jQuery 的跨域获取数据，否则只能使用同源策略。
>
> 2、jsonp: "cb" ：根据后端需求指定
>
> 3、jsonpCallback: xxx：可以不需要。
## 5、完善myAjax方法达到能获取同源数据和非同源数据
主要借鉴了 jQuery 的处理方法，判断 dataType 的值。
```js
//跨域数据obj dataType=jsonp
function myAjax(obj){
if(obj.dataType == "jsonp") {
myAjax4Across(obj);
} else {
myAjax4Normal(obj);
}
}
function myAjax4Across(obj){
var defaults = {
type:"get",
url:"#",
data:{},
success:function(data){},
jsonp:"callback",
jsonpCallback:"hehe"
};
for(var key in obj) {
defaults[key] = obj[key];
}
var params = "";
for(var attr in defaults.data){
params += attr + "=" + defaults.data[attr] + "&";
}
if(params) {
params = params.substring(0,params.length-1);
defaults.url += "?" + params;
}
defaults.url += "&"+defaults.jsonp+"=" + defaults.jsonpCallback;
console.log(defaults.url);
var script = document.createElement("script");
script.src = defaults.url;
window[defaults.jsonpCallback] = function(data){
defaults.success(data);
};
var head = document.querySelector("head");
head.appendChild(script);
}
function myAjax4Normal(obj) {
var defaults = {
type:"get",
url:"#",
dataType:"json",
data:{},
async:true,
success:function(result){console.log(result);}
};
//obj中的属性，覆盖到defaults中的属性
//1、如果有一些属性只存在obj中，会给defaults中增加属性
//2、如果有一些属性在obj和defaults中都存在，会将defaults中的默认值覆盖
//3、如果有一些属性只在defaults中存在，在obj中不存在，这时候defaults中将保留预定义的默认值
for(var key in obj){
defaults[key] = obj[key];
}
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//得到params
// data:{
// uname:"zhangsan",
// age:"18"
// }// uname=zhangsan&age=18
var params = "";
for(var attr in defaults.data){
params += attr + "=" + defaults.data[attr] + "&";
}
if(params) {
params = params.substring(0,params.length - 1);
}
if(defaults.type == "get") {
defaults.url += "?" + params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if(defaults.type == "get") {
xhr.send(null);
} else if(defaults.type == "post") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);
}
if(defaults.async) {
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = null;
if(defaults.dataType == "json") {
result = xhr.responseText;
result = JSON.parse(result);
} else if(defaults.dataType == "xml") {
result = xhr.responseXML;
} else {
result = xhr.responseText;
}
defaults.success(result);
}
}
};
} else {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var result = null;
if(defaults.dataType == "json") {
result = xhr.responseText;
result = JSON.parse(result);
} else if(defaults.dataType == "xml") {
result = xhr.responseXML;
} else {
result = xhr.responseText;
}
defaults.success(result);
}
}
}
}
```
## 6、模板引擎的使用
我们之前做的所有工作都是为了获取服务器的数据，不管是同源的数据还是跨域的数据。获取到数据之后，我们就需要将其在页面上展示出来。前端的界面都是由标签构成的，这种展示的过程其实最主要的就是生成 html 标签。
我们之前显示获取到的数据是使用字符串拼接成 li 标签，然后将 li 标签添加到 ul 标签的方式。这种做法有个弊端，就是当界面特别复杂的时候，使用字符串拼接的方式就会很复杂，对于后期的维护也会很困难。
下面介绍的模板引擎就可以很方便的生成 html 标签。
模板引擎的本质是：**将数据和模板结合来生成 html 片段。**
这里介绍一款效率很高的模板引擎：artTemplate，这个模板引擎是腾讯公司出品的开源模板引擎。
**使用步骤：**
1、引入 js 文件
2、定义模板
3、将数据和模板结合起来生成 html 片段
4、将 html 片段渲染到界面中
### 6.1、改造百度提示案例
还是以百度提示词为例：
比如我想生成类型如下格式标签的代码片段：
```html
索引
索引对应的值
```
源代码：
```html
Title
```
### 6.2、artTemplate的常用语法
**示例1：**
```html
模板引擎
```
> 在定义的模板里面，使用的是 data 里面的属性，可以直接使用，比如 title。
**示例2：**
```html
Document
```
> 1、定义的模板里面也可以加条件判断语句：{{if data里面的属性}}。
>
> 2、可以将得到的数据进行处理，比如增加 count 属性，然后在定义的模板里面直接使用。
**实例3：**
```html
Document
```
> 1、当我们获取的数据没有内部属性的时候，比如上面的例子，不可以直接使用 data，不然程序会认定为 data.data 属性，而这个属性是不存在的。
>
> 2、我们可以通过增加一个对象，增加这个对象的一个属性 arr，其值为 data，然后遍历 arr 来使用。
**示例4：**
```html
Document
```
> 1、我们获取到的数据也可能是 html 的代码。
>
> 2、在定义的模板中调用的时候，通过在属性前加 “#” 可以将 html 代码转义处理。否则只会理解成字符串。
## 7、第三方接口网站
MOB：www.mob.com，里面有个 MobAPI 服务，有很多好玩的 API 接口，比如天气、电影、汽车等。
一般第三方的接口都需要先注册，然后获得 appkey，才能使用。
## 8、存在的问题
**问题：如果第三方接口返回的是 json 而不是 jsonp 格式的数据的话，怎么办么？**
我们知道 Ajax 需要返回的是函数的调用，函数的参数是 json 格式的，如果第三方直接返回一个 json 的字符串怎么办呢？由于不是返回的函数调用，按照跨域的方式肯定是会报错的。
**解决办法：通过自己的服务器作为中介来实现。**
首先，自己的服务器后台，不管是 PHP 还是 JSP，来获取第三方的数据，由于后台不受同源策略的限制，所以自己的服务器获取到 json 数据后，echo 回来，然后我们前端再使用 Ajax 的四步骤来获取后台返回的 json 类型的字符串。