Hatena::ブログ(Diary)

crea555 このページをアンテナに追加 RSSフィード

2011/04/05

Ajax学習の初歩として

とりあえず、入力したidユーザTLを取得するものを作ってみた。要するに、連想配列の形で呼んできたモンを、appendして出力するのね。

	<head>
		<title>Ajaxの学習用のページ</title>
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">google.load('jquery', '1');</script>
		<script type="text/javascript">
			var getTL = function(){
				var userID = $("#user_id").val();
				var url = 'http://twitter.com/statuses/user_timeline/';
				$.getJSON(url + userID + '.json?callback=?', function (json) {
					$("#twitter > ul").remove();
					$("#twitter").append("<ul>");
					for(var i in json){
						$("ul").append("<li>" + json[i].text + "</li>");
					}
					$("#twitter").append("</ul>");
				});
			}
		</script>
		<style type="text/css">
		#twitter > ul{
			font-size:small;
			line-height:1.5;
			margin:1em auto;
			padding:0;
			width:30em;
			border-top:solid 1px #999;
			border-left:solid 1px #999;
			border-right:solid 1px #999;
		}
		#twitter > ul > li{
			list-style-type:none;
			margin:0;
			padding:1em;
			border-bottom:solid 1px #999;
			background-color:#eee;
		}
		</style>
	</head>
	<body>
		<h1>Ajaxの学習用のページ</h1>
		<form>
			<input type="text" id="user_id">
			<input type="button" value="入力したIDのユーザTLを取得する" onClick="getTL()">
		</form>
		<div id="twitter">
		</div>
	</body>
</html>

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/crea555/20110405/1302012448