JSONP

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如script、img、iframe);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

跨域请求实现

<script type="text/javascript">
//客户端实现
$(document).ready(function(){
$.ajax({
type: "get", //都是get传值
async: true, //同异步
url: "http://192.168.1.70/web/?r=checkin/ca",
data:{"id":***},
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"handler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
console.log(json);
},
error: function(){
alert('fail');
}
});
});
</script>
//第二种方法
$.getJSON("http://192.168.1.70/web/?r=checkin/ca&id=***&callback=***"),
success: function(json){
console.log(json);
},
error: function(){
alert('fail');
}

后台返回数据

格式:handler({

//json........

}); //handler为约定好的自定义回调函数名称

例如:return $callback."(".json_encode($data).")";

--------------------

注意,jquey是不支持post方式跨域的.

为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..

client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案

总结

ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery和 ext等框架都把jsonp作为ajax的一种形式进行了封装;但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。所以说,其实ajax与 jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。还有就是,jsonp是一种方式或 者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。总 而言之,jsonp不是ajax的一个特例。


注:本文由王智磊(王大宝儿)整理编写,也参考借鉴了很多大神的笔记,分享代码,分享成功,欢迎各位交流和转载,转载请注明出处(博客园:王大宝儿)http://www.cnblogs.com/wangzhilei/

Jsonp实现Ajax跨域Demo的更多相关文章

  1. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

  2. 利用jsonp进行Ajax跨域请求

    在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...

  3. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  4. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

  5. 【转】Php+ajax+jsonp解决ajax跨域问题

    首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : &quo ...

  6. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  7. 使用jsonp实现ajax跨域请求

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法 ...

  8. 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  9. JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

随机推荐

  1. Kubernetes Device Plugins

    The gRPC server that the device plugin must implement is expected to be advertised on a unix socket ...

  2. pxe-kickstart

    PXE client--->DHCP(pxelinux.0;  next-server  tftp-server) syslinux   vmlinuz initrd.img ks.cfg--- ...

  3. Oracle给Select结果集加锁,Skip Locked(跳过加锁行获得可以加锁的结果集)

    1.通过select for update或select for update wait或select for update nowait给数据集加锁 具体实现参考select for update和 ...

  4. fastjson反序列化多层嵌套泛型类与java中的Type类型

    在使用springmvc时,我们通常会定义类似这样的通用类与前端进行交互,以便于前端可以做一些统一的处理: public class Result<T> { private int ret ...

  5. iOS 系统架构及常用框架(iOS的系统架构分为四个层次)

    1.iOS基于UNIX系统,因此从系统的稳定性上来说它要比其他操作系统的产品好很多 2.iOS的系统架构分为四层,由上到下一次为:可触摸层(Cocoa Touch layer).媒体层(Media l ...

  6. 【ExtJS】contentEl的使用

    contentEl 指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容. 此配置选项被用来将一个已存在的HTML元素 插入到一个新组件(在组件渲染之后它 ...

  7. Android JPush极光推送应用

    JPush纠结了5-6个小时,一直报下面的错误,纠结! [AndroidUtil] AndroidManifest.xml missing required intent filter for Pus ...

  8. STM32F407 使用HAL库延时微妙实现方法(附CubeMX配置过程)

    STM32F407 使用HAL库延时微妙实现方法(STM32CubeMX配置) 作者 : 李剀出处 : https://www.cnblogs.com/kevin-nancy/p/10696681.h ...

  9. EPPlus导入导出不占用进程

    导入: using (ExcelPackage package = new ExcelPackage(new FileStream(openFile.FileName, FileMode.Open, ...

  10. 了解:C#三维数组和锯齿数值

    此文章,只需了解,用到的不多. string[,,] three = new string[2, 3, 5];  //定义一个三维数组,给数组分别辅助2,3,5 对此数组的解释://有2个二维数组,每 ...