# 跨域
注:本文使用markdown格式写的笔记,最好通过markdown观看体验更好
## 概念
1. 同源:
协议,IP地址,端口三者一致叫做同源.
2. 跨域
协议,IP地址,端口三者有一个不一样及不同源,需要跨域访问.
## 两种解决跨域的方式
### cors (cross origin resource sharing)
跨域资源共享,这是html5支持的方法.IE8及以下不支持. 需要在服务器后台设置头
```php
header("Access-Control-Allow-Origin:*");
```
### jsonp(JSON with Padding)
**JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用 的script 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。**
- 原生jsonp步骤
1. 在js中创建函数
```JavaScript
function doSomething(backDate) {
console.log(backDate);
}
```
2. 利用script标签的src属性发送跨域请求获取资源
```JavaScript
<script scr="xxx.php?callback=doSomething"></script>
```
3. 在后台接收数据,拼接字符串,返回结果调用doSomething函数.
```php
$func = $_GET["callback"];
echo $func.'({"name":"jack","age":28})';
```
- jQuery中jsonp的写法
```JavaScript
$.get({
url:"xxx.php",
success: function(backData) {
console.log(backData);
},
dataType:"jsonp"
})
```
> 注:jsonp虽然是用的jQuery中ajax的方法,但jsonp和ajax没有任何关系.
jsonp只是利用script标签src的属性用get的方式传递数据给后台.然后后台通过字符串的拼接返回一个调用函数的结果.在浏览器中解析