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标签实现跨域的更多相关文章

  1. 动态Script标签 解决跨域问题

     动态Script 解决跨域问题 1.动态创建scriptcreateScript : function(src){ var varScript = document.createElement(&q ...

  2. 动态script标签同步加载 ps:无打包编译,静态实现静态资源入口动态配置,无编译打包静态资源添加版本号

    /**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的 ...

  3. 跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp

    为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最 基本的安全功能,如果缺少了同源策略,则浏览 ...

  4. 循序渐进Python3(十一) --6--  Ajax 实现跨域请求 jsonp 和 cors

    Ajax操作如何实现跨域请求?       Ajax (XMLHttpRequest)请求受到同源策略的限制.       Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外 ...

  5. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  6. JSONP(跨域请求) —— 一种非官方跨域数据交互协议

    1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数 ...

  7. AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

  8. 【转】AJAX 跨域请求 - JSONP获取JSON数据

    来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...

  9. ajax跨域请求のJSONP

    简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级 ...

随机推荐

  1. vue v-for与v-if组合使用

    当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中.当你想为仅有的_一些_项渲染节点时,这种优先级的机制会十分有用,如下: < ...

  2. Node.js学习笔记(5)——关于child_process模块

    child_process是node一个比较重要的模块,通过它可以实现创建多线程,来利用多核CPU. 这个模块提供了四个创建子进程的函数. spawn.exec.execFile.fork. spaw ...

  3. BigDecimal的String类型

    java本身对浮点型的计算会丢失精度,这个一定要注意,必须要用BigDecimal的String类型才能解决精度的问题. BigDecimal一共有四个构造方法: 我们在计算商品价格的时候,一定要用B ...

  4. Urho3D 在Win10下编辑器崩溃的解决方案

    本解决方案来自于 https://github.com/urho3d/Urho3D/issues/2417 描述 在Win10中通过CMake启用URHO_ANGELSCRIPT选项的前提下生成Urh ...

  5. apt-mirror 校验错误文件处理

    apt-mirror是一个用来将Debian或Ubuntu的软件源镜像到本地的工具,这个工具工作得非常好,不过有的时候由于网络问题,会有一些文件的校验是失败的,但apt-mirror并不能发现,等到最 ...

  6. beego的MVC架构介绍

    beego 的 MVC 架构介绍 beego 是一个典型的 MVC 框架,它的整个执行逻辑如下图所示: 通过文字来描述如下: 在监听的端口接收数据,默认监听在 8080 端口. 用户请求到达 8080 ...

  7. OpenFileDialog对话框Filter属性(转)

    OpenFileDialog对话框的Filter属性说明: 首先说明一个示例,分析一下Filter属性的构成:“ Excel文件|*.xls ”,前面的“Excel文件”成为标签,是一个可读的字符串, ...

  8. Swift 学习笔记(面向协议编程)

    在Swift中协议不仅可以定义方法和属性,而且协议是可以扩展的,最关键的是,在协议的扩展中可以添加一些方法的默认实现,就是在协议的方法中可以实现一些逻辑,由于这个特性,Swift是可以面向协议进行编程 ...

  9. (图解)Description Resource Path Location Type Java compiler level does not match the version of

    Description Resource Path Location Type Java compiler level does not match the version of project 编译 ...

  10. 【python】python版本升级,从2.6.6升级到2.7.13

    centos6.5系统自带了2.6.6版本的python,有时候为了项目上的需要,需要将python版本升级到2.7.13,下面介绍了如何进行升级. 说明:python从2.6升级到2.7会引发很多问 ...