跨域 & Jsonp【详细】

跨域

在了解什么是跨域之前，我们先聊聊为什么会用到跨域，那就不得不说浏览器的同源策略了

那么什么是同源呢:

同源是指两个网页的协议，域名，端口都相同，那么这个两个网页就有相同的源，也就可以相互请求，不会受到浏览器同源策略的影响（同源策略就是：浏览器的保护机制：对于不同源的网页进行数据请求的时候，浏览器会阻止数据返回我们电脑的页面中）；

那么什么是跨域呢：

很简单，与同源相反就是跨域，也就是说，当我们在不同源的网页中进行数据请求的时候，就会用到跨域。

出现跨域的根本原因就是： 浏览器的同源策略不允许非同源的URL之间进行资源的交互；

浏览器对跨域请求拦截的过程：（同源策略）

tips: 由图中我们可以看到，浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面捕捉到；

那么如何实现跨域数据请求呢：

现在最主要有两种解决方案：

1. Jsonp：出现的早，兼容低版本IE。jsonp不是w3c组织提出的，而是我们前端程序员为了解决跨域问题，想出来的一种临时的解决方案。有缺点： 只支持Get请求，不支持post请求；
2. CORS：出现的比较晚，Cors就比较官方了，是w3c组织提出的，属于跨域ajax请求的根本解决方案，get请求和post 请求都支持，缺点：不兼容低版本浏览器；

Jsonp

jsonp就是为了解决主流浏览器的跨域数据访问的问题，提出的解决办法；

Jsonp实现原理：

就是通过< script >标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口相应回来的数据。

我们后面使用jQuery中Jsonp的实现过程也就是动态创建< script >的过程，请求的时候创建，给页面添加上，等到请求结束，再自动动态移除这个script标签。

Jsonp的缺点：

由于jsonp是通过script标签的src属性，来实现跨域数据获取的，过意，jsonp只支持get数据请求，不支持post请求。

tips ：jsonp和ajax之间没有任何关系，不能把jsonp请求数据的方式叫做ajax，因为jsonp中没有用到XMLHttpRequest这个对象，但是jQuery的ajax函数中存在jsonp的方法，这一点不能混淆了。

那么我们使用JQuery中的jsonp来发起请求，做一个Demo：

	 $(function() {
            $.ajax({
                url: 'http://liulongbin.top:3006/api/jsonp?name=zs&age=20',
                dataType: 'jsonp',             // 指定这是一个jsonp的请求
                jsonpCallback: 'abc',         // 默认情况下：使用jQuery发起jsonp请求，会自动携带一个callback=jQueryxxx的参数，jQueryxxx是随机生成的一个回调函数的名称，我们就是用这个jsonpcallback来改变这个名称。
                success: function(res) {
                    console.log(res);
                }
            })
        })

调用的结果：

那么如果不设定jsonpCallback是什么样呢？

因此我们需要按需求通过jsonpCallback改变名称；

不断复盘，不断优秀，踏实做人，认真做事；关注三连，持续更新~~~