JS里AJAX的使用--（同源策略，如何规避同源策略的jsonp）

同源策略：

什么是同源：只有在两个页面的协议（http：//或者https：//）、域名（www.baidu.com）、端口号（80端口，默认是80）都相同的情况下，这两个页面才是同源的。

同源策略限制的能力：非同源的两个页面，不能互相访问对方设置的本机存储数据、不能互相操作对方的DOM、ajax不能互相发送请求。

什么是跨域：在一台服务器的页面中，请求另一台服务器的数据。这种行为就是跨域（两个非同源服务器互相请求数据）。

AJAX规避同源策略（JSONP）：

jsonp的本质：

1、利用标签的src属性可以加载任意服务器的接口内容的特性，把要请求的跨域服务器接口设置在该src属性中，并凭借一个回调函数作为参数；

2、在服务器端收到请求后，取出传进来的函数名，拼接成函数执行的形式，把前端需要的数据设置在函数参数中，一块返还给前端；

3、前端在收到了服务器返回的函数执行码时，开始触发回调函数，在回调函数中就可以获取到想要的数据了；

代码如下：

// 1、创建script标签

var scriptTag = document.createElement('script');

// 2、设置标签类型

scriptTag.type = 'text/javascript';

// 3、设置请求的接口

scriptTag.src = 'http://10.0.153.197:8888/news?callback=getData';

// 4、拼接标签进文档流

window.onload = function() {

document.head.appendChild(scriptTag);

}

// 设置回调函数

function getData (data) {

console.log(data);

}

JSONP的客户端具体实现：

---

1、我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。

远程服务器remoteserver.com根目录下有个remote.js文件代码如下：

alert('我是远程文件');

本地服务器localserver.com下有个jsonp.html页面代码如下：