使用jQuery和Ajax跨域调用饭否API
一直对JavaScript比较发憷。昨天通读了一遍阮一峰力荐的DOM Scripting，算是对JavaScript基本了解；然后趁热打铁，对jQuery、Ajax也研究一番。我的理解是，JavaScript是比较基础、手动、复杂的语言，jQuery则是比较傻瓜、集成、高效率的东西。一旦掌握了前者，再来攻后者就比较顺手了。用起来也一样。
掌握了基本的语法之后，我想使用它来调用一下饭否的API。不过，遇到的一个问题是跨域调用难题。jQuery的Ajax只允许调用本地的url（POST、GET）。搜索发现，其实可以使用getJSON来跨域调用。比较著名的两个例子是：
- 豆瓣的API客户端代码，如下：
$.getJSON("http://api.douban.com/movie/subject/2340927?alt=xd&callback=?", function(movie){ var title = movie.title['$t']; ... });
- jQuery官方使用getJSON调用flickrAPI的例子：
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); });
于是，我模仿上面的例子，写出了饭否API的调用实现。当然，探索过程是比较曲折的，略过不谈。下面show一下我的探索。
显示最新一条消息
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $.getJSON("http://api.fanfou.com/statuses/user_timeline.json?format=html&callback=?",{id:"zhasm"}, function(data,status){ var created_at=data[0].created_at; var msg=data[0].text; alert(msg+": "+created_at); }); }); </script>
可以添加一个循环，显示所取得的20组（或.length组）消息，输出到合适的地方。不赘述。
向饭否好送消息
根据饭否官方API文档，发布消息必须使用POST方式。这对于只能提供getJSON函数的jQuery来说显然是不适用的。不过，根据我以前的测试，发布饭否消息，还可以使用纯HTML+远程饭否API的方式，思路见使用html方法更新zuosa图文消息一文。现在学习了jQuery，并认识了jQuery Form Plugin，代码可以这样写：
<html> <header> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script src="http://malsup.com/jquery/form/jquery.form.js?2.27"></script> <script type="text/javascript"> // wait for the DOM to be loaded $(document).ready(function() { // bind 'myForm' and provide a simple callback function $('#myForm').ajaxForm(function() { //alert("Thank you for your comment!"); return false; }); } return false; ); </script> </header> <form id="myForm" onsubmit="return false;" method="post" action="http://YOURFANFOUID:YOURFANFOUPASSWORD@api.fanfou.com/statuses/update.json"> Name: <input name="status" /> <input value="Submit Comment" type="submit" /> </form> </body> </html>
注意：由于需要验证身份，我直接将验证信息加在action的URL里了。如果您要测试这段代码，请修改相应的饭否ID和密码。
我的疑问是，在程序中我已经加上了“return false;”语句，以限制提交表单之后的页面刷新，可程序还是会自动下载生成的json文件，或转至生成的xml文件（取决于使用的type）。有没哪位前辈指点一下？
总结
虽然一般的jQuery的get/post操作不能跨域，但是对于callback友好的网站，还是可以通过getJSON的方式进行跨域提交的。熟读文档、研究示例、动手操作，就能一步步上手。前人的成熟经验也很值得借鉴。
严格上说，“callback 友好”的说法并不严谨，从原理上说其实是动态载入了一段 SCRIPT 运行然后传值。有个约定的称呼成这个技巧为 JSONP，详细兄弟可以看这里 http://ajaxian.com/archives/jsonp-json-with-paddi...
好的，谢谢！
当然传的这个值，就是 一个函数名，回调函数时候的函数名。
http://cssrain.cn/article.asp?id=1341
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
//alert("Thank you for your comment!");
return false;
});
}
return false; // 这个多了一个return false 吧！！！
);
找到原因了，是我的js文件地址不对。网上给的是下载地址，我当成直接地址给调用了，实在初级的错误。
到贵站看了一下，好多关于jQuery的文章。拜读了。