sofish/jQuery.ajax.html

## 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>