6-8 json与jsonp
本节编程练习不计算学习进度,请电脑登录imooc.com操作

json与jsonp

JSON:把响应的结果当作 JSON 执行,并返回一个 JavaScript 对象。如果指定的是 json,响应结果作为一个对象,在传递给成功处理函数之前使用 jQuery.parseJSON 进行解析。 解析后的 JSON 对象可以通过该 jqXHR 对象的 responseJSON 属性获得的。json 的处理只要是在 ajaxConvert 方法中把结果给转换成需要是 json 格式,这是后面的内容,这里主要研究下 jsonp 的预处理。

JSONP:是一个非官方的协议,它允许在服务器端集成 Script tags 返回至客户端,通过javascript callback 的形式实现跨域访问(这仅仅是 JSONP 简单的实现形式)。JSON 系统开发方法是一种典型的面向数据结构的分析和设计方法,以活动为中心,一连串的活动的顺序组合成一个完整的工作进程。

JSONP 出现的根源:

JSON 和 JSONP

与 XML 相比,JSON 是一个轻量级的数据交换格式。JSON 对于JavaScript开发人员充满魅力的原因在于 JSON 本身就是 Javascript中的对象。

例如一个 ticker 对象:

var ticker = {symbol:'IBM',price:100}
而JSON串就是 {symbol:'IBM',price:100}

index.html 中:

function showPrice(data){ 
    alert("Symbol:" + data.symbol + ", Price:" + data.price)
}

然后动态加载 ticker.js 脚本

var data = {symbol:'IBM', price:100}; 
showPrice(data);
所以总结其实 json 的一个核心点:允许用户传递一个 callback 参数给服务端,然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

 

任务

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.  
  10. <script type="text/javascript">
  11.  
  12. //////////////
  13. //JSONP的客户端具体实现:
  14. //jsonp的原理 //
  15. //所以总结其实json的一个核心点:
  16. //允许用户传递一个callback参数给服务端,
  17. //然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,
  18. //这样客户端就可以随意定制自己的函数来自动处理返回数据了。
  19. //////////////
  20. var remoteLoad = function(data) {
  21.  
  22. };
  23. var url = "http://code.jquery.com/jquery-1.11.1.min.js?code=1111&callback=remoteLoad";
  24. var script = document.createElement('script');
  25. script.setAttribute('src', url);
  26. document.getElementsByTagName('head')[0].appendChild(script);
  27.  
  28.  
  29.  
  30. ///////////////////////////////////
  31. // 基本原理OK了,我们看看jQuery的实现,其实也大同小异 //
  32. // jQuery的区别最大的不同的就自动帮你生成回调函数并把数据取出来供success属性方法来调用,不是传递的一个回调句柄
  33. ///////////////////////////////////
  34. $.ajax({
  35. url: "remoteLoad.js",
  36. dataType: "jsonp",
  37. jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
  38. jsonpCallback: "Handler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
  39. success: function(data) {
  40. console.log(arguments)
  41. }
  42. });
  43.  
  44. </script>
  45. </body>
  46. </html>
下一节