首页 > 代码库 > 跨域请求:JSONP
跨域请求:JSONP
在JavaScript中,有一个很重要的安全性限制,被称为"同源策略"。即JavaScript只能访问与包含它的文档在同一域下的内容。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。JSONP跨域请求是一个常用的解决方案。
JSONP:<script>元素可以作为一种Ajax传输机制,只须设置<script>元素的src属性(假如它还没有插入到document中,需要插入进去),然后浏览器就会发送一个HTTP请求以下载src属性所指向的URL(凡是拥有”src”属性的标签都具有跨域请求的能力)。使用<script>元素进行Ajax传输的一个主要原因是,它不受同源策略的影响,因此可以使用它们从其他的服务器请求数据,第二个原因是包含JSON编码数据的响应函数会自动执行。这种使用<script>元素作为传输的方法称为JSONP(一种非正式的传输协议)。JSONP协议的一个要点就是允许用户传递一个callback参数给服务器端,然后服务器端返回数据时将这个callback参数作为函数名来包囊住JSON数据。假设你已经写了一个服务,它处理GET请求并返回JSON编码的数据,同源的文档可以在代码中使用XMLHttpRequest和JSON.parse()。
JSONP的客户端具体实现:
//跨域JS文件要调用的函数,data就是跨域JS文件返回的数据var flightHander = function (data){ console.log(data); };//提供JSONP服务的url地址//username是告诉服务器我要查询这个人的信息//callback是告诉服务器我的本地回调函数名//后台程序员要根据url的信息动态生成一个js文件/***后台JS文件要生成的格式*flightHander({* ‘username‘: ‘csh‘,* ‘age‘: 25*});**/var url = "http://flightOne.com/test.php?username=csh&callback=flightHander";//创建script标签,设置其属性var script = document.createElement(‘script‘);script.setAttribute(‘src‘, url);//把script标签加入head,此时调用开始document.getElementsByTagName(‘head‘)[0].appendChild(script);
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。