jsonp跨域请求,动态script标签实现跨域
1、什么是跨域
首先一个域名地址的组成是:
http://www.xxx.com:8080/xxx/xxx.jsp
协议子域名主域名端口号请求资源地址
当协议、子域名、主域名、端口号中任意一个不相同时,都算作是不同域。
不同域之间相互请求资源,就算作“跨域”。而这是被浏览器的安全机制所禁止的。
2、这里要说的是处理跨域其中一个方法——jsonp
jsonp可用于解决主流浏览器的跨域数据访问的问题,其中的原理是利用<script>元素的跨域能力
科普基础知识:web页面上凡是拥有“src”这个属性的标签都拥有跨域的能力,比如<script>,<img>
JSONP,JSON width Padding,采用json 作为传输数据的载体,具体的实现通过script标签跨域应用来完成。
3、实现方法说明
a,客户端(我的域名)页面代码控制
b,服务端(提供服务和数据)的数据可控。
4、举例实现方法
<script type="text/javascript">
//////////////////////////////////
// jQuery的调用
//////////////////////////////////
$.ajax({
crossDomain :true,
url: 'http://s.weibo.com/ajax/jsonp/suggestion?key=a', //不同的域
type: 'GET', // jsonp模式只有GET是合法的
dataType: 'jsonp', // 数据类型
jsonp: '_cb', // 指定回调函数名,与服务器端接收的一致,并回传回来
success: function(data) {
console.log(data);
}
});
//////////////////////////////////
// jsonp的原理
//////////////////////////////////
//服务器调用的全局函数,用来接受数据
function getResult(o) {
console.log(o.data);
}
</script>
<script type="text/javascript" src="http://s.weibo.com/ajax/jsonp/suggestion?_cb=getResult"></script>
例子中用的是微博API,查看更多http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI
jsonp跨域请求,动态script标签实现跨域的更多相关文章
- 动态Script标签 解决跨域问题
动态Script 解决跨域问题 1.动态创建scriptcreateScript : function(src){ var varScript = document.createElement(&q ...
- 动态script标签同步加载 ps:无打包编译,静态实现静态资源入口动态配置,无编译打包静态资源添加版本号
/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的 ...
- 跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp
为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最 基本的安全功能,如果缺少了同源策略,则浏览 ...
- 循序渐进Python3(十一) --6-- Ajax 实现跨域请求 jsonp 和 cors
Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外 ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- JSONP(跨域请求) —— 一种非官方跨域数据交互协议
1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数 ...
- AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
- ajax跨域请求のJSONP
简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级 ...
随机推荐
- php hex2bin 物联网设备发送十六进制数据
hex2bin("十六进制字符") 折腾了三天 后来大神一句话搞定 : hex2bin("十六进制字符") 网上有个方向是错误的 就是 "\xAA\x ...
- eclipse 安装java web插件
1.eclipse java web搭建以及tomcat配置: http://www.cnblogs.com/yangyxd/articles/5615965.html 注意选择Eclipse IDE ...
- 面向对象程序的设计原则--Head First 设计模式笔记
一.找出应用中可能需要变化的地方,把它们独立出来,不要和那些不需要变化的代码混在一起. 把会变化的部分取出并“封装”起来,好让其他部分不会受到影响.这样,代码变化引起的不经意后果变少,系统变得更有弹性 ...
- shell查看系统基本信息脚本
#!/bin/bash echo "IP:" ifconfig |grep "inet addr"|grep -v 127.0.0.1|awk '{print ...
- 高阶函数:map()/reduce()
Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clus ...
- netty 对 http 的实现
netty的http协议栈无论是性能还是可靠性,都表现优异,非常适合在非web容器场景 下应用,相比于tomcat.jetty等web容器,它更轻量.小巧.灵活性和定制性也好: 总结:只要实现了htt ...
- 【Java项目实战】——DRP之HTML总结
在DRP的学习之中,又将之前BS的内容又一次复习了一遍,借着复习的机会将BS的各个部分再又一次总结一下.今天来总结一下HTML. 在学习BS之后就进入了权限系统的开发之中,可是仍然发现非常多代码不会不 ...
- kernel&uboot学习笔记
uboot kernel uboot 1.Uboot编译流程分析: uboot是如何编译生成的? 2.根据include/configs/$(target).h可以生成include/autoconf ...
- ThinkPHP3.1在多数据库连接下存储过程调用bug修正
最近使用ThinkPHP3.1进行一个项目的开发,由于该项目需要连接多台不同的数据库,所以使用如下配置方法: <?php return array( //'配置项'=>'配置值' //数据 ...
- VSTS跟Kubernetes整合进行CI/CD
利用VSTS跟Kubernetes整合进行CI/CD 为什么VSTS要搭配Kubernetes? 通常我们在开发管理软件项目的时候都会碰到一个很头痛的问题,就是开发.测试.生产环境不一致,导致开发 ...