jQuery教程(26)-ajax操作之使用JSONP加载远程数据

文章标签： jquery-ajax,jquery

2015-1-17 19:36:30     72 人阅读    

使用JSONP加载远程数据
            使用<script>#签从远程获取JavaScript文件的思路，可以变通为从其他服务器取得JSON 文件。不过，这样需要对服务器上的JSON文件稍加修改。在实现这一技术的众多解决方案中， jQuery直接支持的是JSONP (JSON with Padding，填充式JSON )。

           JSONP的格式是把标准JSON文件包装在一对圆括号中，圆括号又前置一个任意字符串。这 个字符串，即所谓的P( Padding，填充），由请求数据的客户端来决定。而且，由于有一对圆括 号，因此返回的数据在客户端可能会导致一次函数调用，或者是为某个变量赋值一取决于客户 端请求中发送的填充字符串。

用PHP在服务器端实现对JSONP的支持非常简单：

<?php print($_GET['callback'] $data ?>

          这里，$data是一个包含JSON文件字符串表示的变量。调用这段脚本时，从客户端请求中 取得的callback查询字符串参数，会被添加到包含JSON数据文件的圆括号前面。

         为演示这一技术，需要稍微修改一下代码清单6-6中的JSON示例，以便调用这个远程数据源。 $.getJSON()函数利用了一个特殊的占位符?来实现这一点，参见代码清单6-20。
代码清单6-20

$(document).ready(function() { var url = ,,; $('#letter-g a').click(function(event) { event.preventDefault(); $.getJSON(url + ，?callback=?', function(data) { var html =''; $.each(data, function(entryIndex, entry) { html += '<div class="entry">'; html += '<h3 class="term">' + entry.term + '</h3>'; html += '<div class="part">' + entry.part + '</div>'; html += '<div class="definition">'; html += entry.definition; if (entry.quote) { html += '<div class="quote">'; $.each(entry.quote, function(lineIndex, line) { html += '<div class=Mquote-lineM>' + line + '</div>'; })； if (entry.author) { html += '<div class="quote-author">' + entry.author + '</div>'; } html += '</div>'; } html += '</div>'; html += '</div>'; }); $('#dictionary').html(html); }); }); });

             正常情况下，我们是不能从远程服务器（这个例子中的examples.learningjquery.com) 取得JSON数据的。但是，由于远程文件经过设置以JSONP格式提供数据，因此通过在URL后面 添加一个查询字符串，并使用?作为callback参数的占位符就可以获得数据。请求返回之后， jQuery会为我们替换？、解析结果并通过data参数将数据传人成功函数。结果就好像是在处理本 地JSON数据一样。

           注意，前面提到的安全注意事项在这里也适用，即服务器返回的任何结果都将在用户的计算 机中执行。因此，应该只针对来自可信任站点的数据使用JSONP技术。

原文地址：
该文章由 萌萌的IT人 整理发布,转载须标明出处。