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 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <title></title> </head> <body> <script type="text/javascript"> ////////////// //JSONP的客户端具体实现: //jsonp的原理 // //所以总结其实json的一个核心点: //允许用户传递一个callback参数给服务端, //然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据, //这样客户端就可以随意定制自己的函数来自动处理返回数据了。 ////////////// var remoteLoad = function(data) { }; var url = "http://code.jquery.com/jquery-1.11.1.min.js?code=1111&callback=remoteLoad"; var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script); /////////////////////////////////// // 基本原理OK了,我们看看jQuery的实现,其实也大同小异 // // jQuery的区别最大的不同的就自动帮你生成回调函数并把数据取出来供success属性方法来调用,不是传递的一个回调句柄 /////////////////////////////////// $.ajax({ url: "remoteLoad.js", dataType: "jsonp", jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback: "Handler", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(data) { console.log(arguments) } }); </script> </body> </html>