Ajax只能向自己的服务器发送请求,因为在Ajax中默认是不能进行跨域进行访问的,这就涉及到了同源政策,如果需要解决同源限制问题,那么需要用到JSONP
来进行跨域
同源政策
什么是同源
两个页面拥有相同的协议,域名和端口,那么这两个页面就是同源,如果其中有任意一个不一样,那么就是不同源
http://localhost:3000/index.html
其中http 是协议
localhost 是域名 (localhost代表着自己的服务器)
3000 是端口号
为啥要同源政策呢
同源策略是浏览器的一种安全策略,所谓同源指的是请求URL地址中的协议、域名和端口号都相同,只要其中之一不相同就是跨域。
同源策略主要是为了保证浏览器的安全性 在同源策略下
浏览器不允许Ajax跨域获取服务器数据
JSONP 的原理
静态script + 标签的src属性进行跨域请求
如果使用src这种方法进行跨域的话,一定要把这段获取数据的代码在上面先行加载,使用数据的方法放 在后加载
利用js构造一个script + 标签,把json的url赋给script的src属性,把script插入到dom里,让浏览器去获取
动态创建script + 标签,通过标签的src属性发送请求 动态创建script + 标签发出去的请求是异步请求
1、jsonp的本质:动态创建script + 标签,然后通过它src属性发送跨域请求,然后服务器响应的数据格式为【函数调用(foo(实参))】
所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致,这里声明的函数是由服务器响应的内容,(实际就是一段js代码-函数调用)来调用
2、注意:ajax和jsonp其实本质上是不同的东西。 ajax的核心是通过XMLHttpRequest + 获取非本页内容,
而jsonp的核心则是动态添加<script>
+ 标签来调用服务器提供的js脚本。
JSONP的工作原理
就是利用<script>
标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。
当需要通讯时,本站脚本创建一个<script>
元素,地址指向第三方的API网址,
那么现在就来说说剩下的几种跨域问题
CORS
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域
主域相同的使用document.domain
使用window.name来进行跨域
window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的
使用HTML5中新引进的window.postMessage方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。