sofish · August 4, 2010 18:48
diff --git a/jQuery.ajax.html b/jQuery.ajax.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>Request Del.icio.us Item Using jQuery.AJAX</title>
 <style type="text/css">
 	body{width:600px;margin:30px auto;font:13px georgia;}
 	ul{margin-left:1.3em;;padding:0;line-height:1.8;color:#aaa;}
 	ul a{color:#07f;}
 	
 	#trigger{margin-bottom:20px;}
 </style>
 </head>
 <body>
 <input type="button" id="trigger" value="request del.icio.us item" />
 <ul id="callback">
 	click the above button to get the popular topic about javascript at del.icio.us, and the callback will display here when the request success.
 </ul>
 	
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">

 // define and render the callback data
 var del = function(data){
 	ul.css('display','none').html('');
 	$.each(data, function(i, item){
 		li = $('<li />').appendTo(ul);
 		li.html('<a href="' + item.u + '">' + item.d + '</a>');
 	});
 	ul.fadeIn(1000);
 },
 btn = $('#trigger'), ul = $('#callback'),li;

 // click on the triggle button and request the data
 btn.click(function(){
 	$.ajax({
 	type: 'GET',
 	url: 'http://feeds.delicious.com/v2/json/popular/js?callback=del',
 	dataType: 'jsonp', // rember is a cross domain request
 	success: del
 	});	
 });

 </script>
 	
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Request Del.icio.us Item Using jQuery.AJAX</title>
	<style type="text/css">
	body{width:600px;margin:30px auto;font:13px georgia;}
	ul{margin-left:1.3em;;padding:0;line-height:1.8;color:#aaa;}
	ul a{color:#07f;}

	#trigger{margin-bottom:20px;}
	</style>
	</head>
	<body>
	<input type="button" id="trigger" value="request del.icio.us item" />
	<ul id="callback">
	click the above button to get the popular topic about javascript at del.icio.us, and the callback will display here when the request success.
	</ul>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">

	// define and render the callback data
	var del = function(data){
	ul.css('display','none').html('');
	$.each(data, function(i, item){
	li = $('<li />').appendTo(ul);
	li.html('<a href="' + item.u + '">' + item.d + '</a>');
	});
	ul.fadeIn(1000);
	},
	btn = $('#trigger'), ul = $('#callback'),li;

	// click on the triggle button and request the data
	btn.click(function(){
	$.ajax({
	type: 'GET',
	url: 'http://feeds.delicious.com/v2/json/popular/js?callback=del',
	dataType: 'jsonp', // rember is a cross domain request
	success: del
	});
	});

	</script>

	</body>
	</html>