1. jsonp、jsonpCallback  jsonp跨域时可以自定义的两个参数

2. jsonp: 回掉函数名的参数名,默认callback,服务端通过它来获取到回掉函数名

3. jsonpCallback: 回掉函数名,默认jquery自动生成

4. 指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作,不指定时不能这样做,只能在success里做操作

一般jquery跨域用到的两个方法为:$.ajax 和$.getJSON

最后,仔细安静下来,细读 json 官方文档后发现这么一段:

JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。

其实jquery跨域的原理是通过外链 <script>  来实现的,然后在通过回调函数加上回调函数的参数来实现真正的跨域

Jquery 在每次跨域发送请求时都会有callback这个参数,其实这个参数的值就是回调函数名称,所以,服务器端在发送json数据时,应该把这个参数放到前面,这个参数的值往往是随机生成的,如:jsonp1294734708682,同时也可以通过 $.ajax 方法设置 jsonpcallback 方法的名称。明白了原理后,服务器端应该这样发送数据:

string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";

这样,json 数据 {\"userid\":0,\"username\":\"null\"} 就作为了 jsonp1294734708682 回调函数的一个参数

下面我们来开始实例

假如正常返回的数据:

{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }

下面我们来介绍下jquery的自己个参数

/**
*@dataType (String)
*"xml": 返回 XML 文档,可用 jQuery 处理。
*"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
*"script": 返回纯文本 JavaScript 代码。"json": 返回 JSON 数据 。
*"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
*"text": 返回纯文本字符串
*//**
*@jsonp (String)在一个jsonp请求中重写回调函数的名字。
*这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,
*比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
*//**
*@jsonpCallback (String)
*为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
*这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。
*你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。
*/

1不指定jsonp的名称、

$.ajax({url: 'http://lifeloopdev.info/get_events',dataType: "jsonp",data: "offset=0&num_items=10",username: 'username',password: 'password',success: function (data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});}
});

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["callback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

2指定jsonp名称,和返回函数名称的function、

//这里我们自己指定了jsonp的callback的名字
$.ajax({url: 'http://lifeloopdev.info/get_events',dataType: "jsonp",data: "offset=0&num_items=10",username: 'username',password: 'password',jsonp: "successCallback",jsonpCallback: 'successCallback'
});function successCallback(data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});
}

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

3指定jsonp名称,不指定返回函数名称的function、

$.ajax({url: 'http://lifeloopdev.info/get_events',dataType: "jsonp",data: "offset=0&num_items=10",username: 'username',password: 'password',jsonp: "successCallback",success: function (data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});}
});

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

4使用getJSON()获取数据、

/**
*注意:
*这里调用的地址中jsoncallback=? 是关键的所在!其中我们关心的是 jsoncallback=? 起什么作用了?原来 jsoncallback=? 被替换后,会把方法名称传给服务器。
*我们在服务器端要做什么工作呢?服务器要接受参数 jsoncallback ,然后把 jsoncallback 的值作为 JSON 数据方法名称返回 .
*/
$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) {$.each(data.success, function (i, item) {$("body").append('<h1>' + item.title + '</h1>');});
});

服务器需要这样返回数据示例:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["jsoncallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

转载于:https://www.cnblogs.com/zhangruiqi/p/7880642.html

jsonp和jsonpcallback的使用相关推荐

  1. jsonp跨域实现单点登录,跨域传递用户信息以及保存cookie注意事项

    网站A:代码:网站a的login.html页面刷新,使用jsonp方式将信息传递给b.com的login.php中去,只需要在b.com中设置一下跨域以及接收参数,然后存到cookei即可, 注意:网 ...

  2. jquery Ajax 通过jsonp的方式跨域提交表单

    Jquery Ajax可以通过jsonp的方式跨域提交表单,至于什么是跨域提交简单说就是你的客户端和服务端不在同一个域名下或端口号不同也可以叫做跨域. 前台代码: $.ajax({type : 'ge ...

  3. jQuery 调用jsonp实现与原理

    为什么80%的码农都做不了架构师?>>>    通过jQuery实现JSONP 一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <scr ...

  4. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...

  5. 使用JSONP,jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  6. jsonp java后台_jsonp与Java后端

    搞了好久的jsonp,才发现原来是自己的拦截器把我给拦截了,所以一直失败. 为了跨域就需要用jsonp.就比如说,原本我们的项目是写在一个项目下的,并且用的是jsp.此时,我直接将一个页面拖到桌面,改 ...

  7. “约见”面试官系列之常见面试题第十五篇之jsonp(建议收藏)

    目录 什么是jsonp 首先先知道 为什么需要JSONP? JSONP的原理 jsonp的第一种方式,将目标作为js形式加载过来,尽管其实对方是一个php 一.Ajax工作原理 二.Jsonp工作原理 ...

  8. spring mvc学习(51):jsonp

    引入jar包 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  9. 前端之同源策略 Jsonp 与 CORS

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  10. Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题

    一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...

最新文章

  1. 音频处理中频域转时域的恢复
  2. Rider 2018.3.4 发布,跨平台 .NET IDE
  3. linux 有线网卡,linux下有线网卡出现ADDRCONF(NETDEV_UP): eth0: link is not ready的解决方法...
  4. 临界区设计太大或太小有何缺点_这些衣帽间设计案例,装出豪宅范?闺蜜来了都看呆!...
  5. PHP的autoload自动加载机制使用说明
  6. “机器换人”之潮涌向珠三角,蓝领工人将何去何从
  7. ASP.NET 2.0+Atlas编写鼠标拖放程序
  8. 基于External-DNS的多集群Ingress DNS实践
  9. c语言goto语句用法_C语言32个关键字9种控制语句34种运算符整理
  10. 2021数字化转型下银行发展供应链金融研究报告(上篇)
  11. linux下追查线上问题常用命令
  12. HDU 4932 Miaomiao#39;s Geometry(推理)
  13. 中国太阳能热市场趋势报告、技术动态创新及市场预测
  14. Google开放最大目标检测数据集,还要为它举办AI挑战赛
  15. 普通平键的主要尺寸有_你还在为怎样选择床上用品尺寸而烦恼吗?床品尺寸大解析帮到你!...
  16. 游戏开发新手快速入门指南
  17. [论文阅读笔记29]生物医学文本摘要(Biomedical Text Summarization)
  18. ubuntu20更改登录背景图片
  19. c语言编黑白棋的思路,黑白棋的问题。。555。。头发都掉了。。。
  20. java贴图技术坦克世界_坦克世界游戏图像设置技巧 如何提高FPS

热门文章

  1. linux捕获线程发出的信号,我可以在多线程(pthreads)应用程序中捕获SIGSEGV和其他信号并打印导致它的线程或所有线程的回溯吗?...
  2. 下载centos(阿里云)
  3. 抄答案就是了,两套详细的设计方案,解决头疼的支付掉单问题
  4. Logstash5.X 日志搜集处理框架 安装配置
  5. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_汇总
  6. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第2节 线程实现方式_9_Thread类的常用方法_获取线程名称...
  7. Qt + OpenSenceGraph(osg) 加载OSG模型
  8. mysql 、慢查询、到底如何玩
  9. Android实时直播,一千行java搞定不依赖jni,延迟0.8至3秒,强悍移动端来袭
  10. 利用SusuCMS快速创建网站(一)