什么是跨域
同源指的是两个URL的协议、域名、端口一致、反之、则是跨域
出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互
网页:http://www.test.com/index.html
接口:http://www.api.com/userlist
浏览器对跨域请求的拦截
注意:浏览器允许发起跨域请求、但是跨域请求回来的数据、会被浏览器拦截、无法被页面获取到！
如何实现跨域数据请求
现如今、实现跨域数据请求、最主要的两种解决方案、分别是JSONP和CORS
JSONP:出的早、兼容性好(兼容低版本IE)是前端程序员为了解决跨域问题。被迫想出来的一种临时解决方案。缺点是只支持GET请求、不支持POST请求
CORS:出的较晚、它是W3C标准、属于跨域Ajax请求的根本解决方案。支持GET和POST请求、缺点是不兼容某些低版本的浏览器
JSONP的实现原理
由于浏览器同源策略的限制、网页中无法通过Ajax请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响、可以通过src属性、请求非同源的js脚本。
因此、JSONP 的实现原理、就是通过<script>标签的src属性、请求跨域的数据接口、并通过函数调用的形式、接收跨域接口响应回来的数据。
自己实现一个简单的JSONP
定义一个success回调函数
形参data就是通过JSONP请求回来的数据
JSONP并不属于Ajax请求
通过<script>标签、请求接口数据:
JSONP的缺点
由于JSONP是通过<script>标签的src属性、来实现跨域数据获取的、所以、JSONP只支持GET数据请求、不支持POST请求
注意:JSONP和Ajax之间没有任何关系、不能把JSONP请求数据的方式叫做Ajax、因为JSONP没有用到XMLHttpRequest这个对象
jQuery提供的$.ajax()函数、除了可以发起真正的Ajax数据请求之外、还能够发起JSONP数据请求、例如:
默认情况下、使用jQuery发起JSONP请求、会自动携带一个callback=jQueryxxx的参数、jQueryxxx是随机生成的一个回调函数名称
自定义参数及回调函数名称
在使用jQuery发起JSONP请求时、如果想要自定义JSONP的参数以及回调函数名称、可以通过如下两个参数来指定:
jQuery中JSONP的实现过程
jQuery中的JSONP、也是通过<script>标签的src属性实现跨域数据访问的、只不过、jQuery采用的是动态创建和移除<script>标签的方式、来发起JSONP数据请求
在发起JSONP请求的时候、动态向<header>中append一个<script>标签
在JSONP请求成功以后、动态从<header>中移除刚才append进去的<script>标签
标签：jQuery,浏览器,请求,标签,JSONP,跨域 来源： https://www.cnblogs.com/dhw303/p/16220670.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。