这几天, 工作有一新需求, 要求前端extJs页面通过ajax获取另一个项目中的数据并展示出来, 后来发现如果直接在store中使用普通的方法获取数据后台服务没有响应, 总是报错, 最后发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档或脚本 在同一域名下的内容。不同域名下的脚本不能互相访问,即便是子域也不行。关于同源策略,读者可百度更详细的解释,这里不再赘述。
针对这一现象,采用JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并探讨下JSONP跨域的原理.
我们知道,由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。若要跨域请求出于安全性考虑是不行的,但是我们发现,Web页面上调用js文件时则不受是否跨域的影响,而且拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>,这时候,聪明的程序猿就想到了变通的方法,如果要进行跨域请求, 通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据,然后包装成script脚本回传,这样就突破同源策略的限制,解决了跨域访问的问题。
具体实现如下:
前端代码:
extJs中通过jQuery的ajax进行跨域(即jsonp进行跨域)获取数据
最新推荐文章于 2022-05-17 09:43:53 发布
本文介绍了在ExtJS中利用jQuery的AJAX进行跨域请求的方法,主要涉及JSONP技术。通过在客户端注册callback函数并传递给服务器,服务器生成包含JSON数据的JavaScript函数,最终客户端通过预先定义的callback函数处理返回的数据,实现实时跨域数据交互。
摘要由CSDN通过智能技术生成