やっぱりAjaxに触れないわけにはいかない、ということで、
ちょっとやってみました。
まず、一番大切なのは、xml解析かなと。
で、やっぱりjQueryかなと。
ここを参考にしてみました。
ありがとうございます。
で、使うjqueryはいつものやつ。
→ テーブルソート①
ポイントは、xmlオブジェクトを
$(xml)
で扱えることかな。
findして、eachしてと、かなり便利。
jqueryに詳しいと簡単なことかと思うので、
今日はここまで。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />
- <script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery-1.3.2.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $.ajax({
- url: './xml/sample.xml',
- type: 'GET',
- dataType: 'xml',
- timeout: 1000,
- error: function(){
- alert('xmlファイルの読み込みに失敗しました');
- },
- success: function(xml){
- $(xml).find("row").each(function(){
- var item_text = $(this).text();
- $('<li></li>')
- .html(item_text)
- .appendTo('ol#samp-list');
- });
- $("li.demo").html("");
- }
- });
- });
- </script>
</head>
<body>
<div class="preview">
<ol id="samp-list">
</ol>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿