Chrome Packaged Apps ajax編、2014-06-05

Chrome Packaged Appsのajax通信で、ＲＳＳ取得などについて。メモです
(Packagedインストール及びデバック方法は省略させて頂きます。)

参考サイト様(公式かも)：
https://developer.chrome.com/apps/about_apps


ソースこちら、 https://github.com/kuc-arc-f/chrome_ajax1
(jQuery使ってます。)
chrome : v35.0.1916.114 での動作確認できました。

画面は、ボタンを配置して、イベント設定しておきます。
ＲＳＳ記事の表示領域は、空テーブルを配置。
*)スタイリングは, bootstrap3使ってますが、無しでもＯＫ。

https://github.com/kuc-arc-f/chrome_ajax1/blob/master/top.html
===============================================
<button class="btn btn-primary"  id="id-a-get">[ RSS GET]</button>

<table style="width:100%;" class="table table-striped table-hover" id="id-table1">
<tbody>
</tbody>
</table>
===============================================

通信クラス(ctlNews)から、
ajax通信し、XMLパースします。
N社のRSS通信して、記事を表示
*)クロスドメイン等のエラーがでると想定してましたが、
　問題なく通信できました。

https://github.com/kuc-arc-f/chrome_ajax1/blob/master/js/ctlNews.js
===============================================

	ctlNews.prototype.load_rss = function( surl ) {
	var items =new Array();
	console.log( 'surl=' + surl );
	$.ajax({
	url: surl,
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
	if (status === 'success') {
	var row = 0;
	var data = [];
	var nodeName;
	$(xml).find('item').each(function() {
	data[row] = {};
	//get-childre
	$(this).children().each(function() {
	//nodeName
	nodeName = $(this)[0].nodeName;
	data[row][nodeName] = {};
	// sttr
	attributes = $(this)[0].attributes;
	for (var i in attributes) {
	data[row][nodeName][attributes[i].name] = attributes[i].value;
	}
	//text
	data[row][nodeName]['text'] = $(this).text();
	});
	row++;
	});
	var ict= 0;
	for (i in data) {
	var itm= new Item( );
	itm.title= data[i].title.text;
	itm.url = data[i].link.text;
	if(ict < mMAX_CountItem){
	items[i] =itm;
	console.log( 'lnk='+ itm.title );
	console.log( 'url='+ itm.url );
	}
	ict++;
	}
	} //if_stat_success.
	$(this).delay( 500 ).queue(function() {
	disp_news(items);
	$(this).dequeue();
	});
	}
	});
	};

view raw c0605-ajax1-top-1.js hosted with ❤ by GitHub

===============================================

データ格納して、ＤＯＭ追加操作します。
ID=id-table1 のテーブル内に描画します。
Ａ要素は、target="_blank"　で、別ブラウザ起動で内容を表示。
===============================================

	function disp_news(items)
	{
	for(var i = 0; i < items.length ; i++){
	var body= $('table#id-table1');
	var trObj = $('<tr></tr>');
	var tdObj = $('<td></td>');
	var a_tag = $('<a href="'+ items[i].url +'" target="_blank">'+ items[i].title +'</a>');
	var tdObj02 = $('<td align="right"></td>');
	var sAtag02 = '<a href="'+ items[i].url +'" target="_blank">';
	sAtag02 += ' <button class="btn btn-default" style="margin-left:10px;">';
	sAtag02 += ' <i class="glyphicon glyphicon-chevron-right"></i>';
	sAtag02 += ' </button>';
	sAtag02 += '</a>';
	tdObj.append(a_tag);
	tdObj02.append( $(sAtag02) );
	trObj.append(tdObj);
	trObj.append(tdObj02);
	body.append(trObj);
	}
	}

view raw c0605-ajax1-top-2.js hosted with ❤ by GitHub

===============================================

ajax通信後、ＲＳＳ記事を表示できました。

*) まとめ（Chrome Packaged Apps 開発メモ）こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html