jsonp和callback的使用

前端之家收集整理的这篇文章主要介绍了jsonp和callback的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

query跨域获得Json

这两天用Jquery跨域取数据的时候,经常碰到invalidlabel这个错误,十分的郁闷,老是取不到服务器端发送回来的json值,

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

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

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

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

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

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',jsonp: "successCallback",jsonpCallback: 'successCallback' }); function successCallback(data) { $.each(data.success,item) { $("body").append('<h1>' + item.title + '</h1>'); }); }

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

successCallback");

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

");

4使用getJSON()获取数据、

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

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

jsoncallback");

转自:http://www.cnblogs.com/yeminglong/archive/2013/06/24/3152976.html

原文链接:https://www.f2er.com/json/288671.html

猜你在找的Json相关文章