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 = ,http://examples.learningjquery.com/jsonp/g.php,;
$('#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技术。


原文地址:http://www.itmmd.com/201501/512.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

jQuery教程(27)-jQueryajax操作之修改默认选项   上一篇
下一篇  jQuery教程(25)-ajax操作之安全限制

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!