Ajax関連アンテナ

Last-modified: 2007-06-06 (水) 06:35:13 (6163d)
※※このサイトは2012年頃より更新を停止しています。※※

ちょくちょく目にとまったAjax関連記事(2007-06頃まで)

 
 
 
↑

javascriptあれこれ

↑

javascriptでcookie操作や外部ファイル取り込みしてtable情報を扱いたい件の色々参考。

↑

様々サンプル

上記を踏まえ、いくつかサンプル。

  • js_cookie.html 
    <html>

<head>
<title>document.cookie document.createElement - cookieを扱って、指定タグでエレメント作成</title>

<script type="text/javascript">
<!--

////////////////////////////////////////////////////
// cookie期限を指定する
function putExpires(sec) {
    datetime = new Date();
    datetime.setTime(datetime.getTime() + sec * 1000);
    return datetime.toGMTString();
}


////////////////////////////////////////////////////
// cookie設定ボタンのアクション
function putDemoCookieData(){
	var name = "test";
	var value = "hoge";
	document.cookie = name+"="+value+"; expires="+putExpires(600);
}


////////////////////////////////////////////////////
// cookie削除ボタンのアクション
function remDemoCookieData() {
	var name = "test";
	var value = "hoge";
	document.cookie = name+"="+value+"; expires="+putExpires(0);
}


////////////////////////////////////////////////////
// cookieを表示

function getDemoCookieData(){
	return document.cookie;
}

function pushElem() {
	var element = document.createElement('div');
	element.id = "cookshow";
	element.innerHTML = getDemoCookieData();

	var PageBody = document.getElementsByTagName("body").item(0);
	PageBody.appendChild(element);
	// body要素にdivエレメントを追加
}


//-->
</script>

</head>

<body>
<input type="button" name="rem_butt" onClick="remDemoCookieData()" value="cookieを削除"><br />
<input type="button" name="set_butt" onClick="putDemoCookieData()" value="cookieをセット"><br />
<input type="button" name="show_butt" onClick="pushElem()" value="cookieを表示"><br />
<br />



<div name="cookshow"></div>

</body>
</html>
  • js_table.html 
    <html>

<head>
<title>document.createElement - table のエレメント作成</title>

<script type="text/javascript">
<!--

////////////////////////////////////////////////////
// テーブル作成

var hogehoge = {
    'apple' : 'りんご',
    'orange': 'みかん'
};

//
// createForm
//
function createForm(){
    var oDiv   = document.getElementById('createTable');
    var oTable = document.createElement('table');
    var oTbody = document.createElement('tbody');

    for(var key in hogehoge){
        var oTr  = document.createElement('tr');
        var oTd1 = document.createElement('td');
        
        var oTd2 = document.createElement('td');
        var oInp = document.createElement('input');
    
        oInp.setAttribute("type","text");
        oInp.setAttribute("id",key);
        oInp.setAttribute("name",key);
        oInp.setAttribute("value",hogehoge[key]);
        
        var oTextNode = document.createTextNode(key);
        
        oTd1.appendChild(oTextNode);
        oTd2.appendChild(oInp);
        
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        
        oTbody.appendChild(oTr);
    }

    oTable.appendChild(oTbody);
    oDiv.appendChild(oTable);
}

window.onload = function(event){
    createForm();
};

-->
</script>

<body>

<div id="createTable"></div>

</body>
</html>
  • js_fread.html
    参考：prototype.js リファレンス
    参考：prototype.js リファレンス：CSV形式のデータを読み込み表示する
    参考：prototype.js リファレンス：タブ区切り形式のデータを読み込み表示する 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="./all_js/prototype.js"></script>
<script type="text/javascript" src="./all_js/tabdata_table.js"></script>
<script type="text/javascript">
	<!--
		window.onload = function(event){
			// TABで区切られたデータが格納されたファイルを引数とすること
			tabdata_tableView('./data/data_tab_sep.txt');
		}
	-->
</script>
</head>
<body>
<h1>タブ区切り形式のデータを読み込み表示する</h1>
<div id="tableData">データを読み込み中....</div>
</body>
</html>
  • data/
    • data_tab_sep.txt
      ※文字コードUTF-8で保存すること。 
      品名	価格	注釈
Home Basic	27,090円	最低限のパッケージです
Home Premium	31,290円	家庭用です
Business	39,690円	ビジネス用途に
Ultimate	51,240円	フルスペックのVistaです
  • all_js/
    • tabdata_table.js
      ※文字コードUTF-8で保存すること。 
      function tabdata_tableView(fname){
	var msec = (new Date()).getTime();
	new Ajax.Request(fname, {
		method: "get",
		parameters: "cache="+msec,
		onSuccess:function(httpObj){
			var text = httpObj.responseText;
			var LF = String.fromCharCode(10);
			var TAB = String.fromCharCode(9);
			var tabText = text.split(LF);
			var tbl = "<table border='1'>";
			for (var i=0; i<tabText.length; i++){
				var cText = tabText[i].split(TAB);
				tbl += "<tr>";
				for (var j=0; j<cText.length; j++){
					tbl += "<td>"+cText[j]+"</td>";
				}
				tbl +="</tr>";
			}
			tbl += "</table>";
			$("tableData").innerHTML = tbl;
		},
		onFailure:function(httpObj){
			$("tableData").innerHTML = "エラーで読み込めませんでした";
		}
	});
}
    • prototype.js
      上述の例ではv1.5.1.1を使用している。
      下記URLから適宜入手すること。
      http://www.prototypejs.org/
 
 
 
↑

Formがらみの表示

↑

様々サンプル

上記を参考にしてこんなん作った。
自分用メモだからむっちゃ適当。

  • test.html
    親フレームのGET引数を扱いたい場合 
    getParentRequest()
    を使う。 
    <html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>javascriptデバッグ用</title>
		<link rel="stylesheet" type="text/css" href="./all_css/HiddenView.css" />
		<script language="javascript" src="./all_js/javascript.js"></script>
	
	</head>
	<body>

		<script language="javascript">
			<!--
				var	refeeee,locaaa;
				refeeee = document.referrer;
				//locaaa = location.href;

				document.open();
				document.write("GET引数を書き出します。<br />");

				var get = getRequest();
				document.write("<ul>げっと分解<li>test = ",get['test']," <li>mail = ",get['mail'],"</ul>");

				//document.write("ろけーしょん : ");
				//document.write(locaaa,"<br />");

				document.write("りふぁら : ");
				document.write(refeeee,"<br />");

				document.close();
			
			// -->
		</script>
		<br />
		<a href="./test.html?test=hoge&mail=hogetest@example.jp">このリンクをクリックして、リファラやGETパラメータを表示できるか？</a>

		<hr />
		<br />
		<br />
		<br />
		<br />

		hidden属性をリスト表示する。

		<form action="./test.html" method="GET">
			<input type="hidden" name="hoge_hidden" value="うふ">
			<input type="hidden" name="moge_hidden" value="テスト">
			<input type="hidden" name="hage_hidden" value="えへ">
			<input type="hidden" name="hogu_hidden" value="pest">
			<input type="submit" value="ぽちっとな。">
		</form>
<script type="text/javascript" src="./all_js/HiddenView.js"></script>
<script type="text/javascript">
window.onload = function() {
  new HiddenView();
};
</script>

	</body>
</html>
  • all_js/
    • javascript.js 
      // HTTPのGETメソッドで渡されたパラメータを分割して配列に格納して返す
// 完全にパクリです。
// ソース(入手元)：http://www.s-memo.net/blog/2007/03/javascriptget_1.php
// 入手元サイト：S-MEMO（エスメモ） ブログの2007年03月09日記事「JavaScriptでGETを取得する」
	function getRequest(){
	  if(location.search.length > 1) {
	    var get = new Object();
	    var ret = location.search.substr(1).split("&");
	    for(var i = 0; i < ret.length; i++) {
	      var r = ret[i].split("=");
	      get[r[0]] = r[1];
	    }
	    return get;
	  } else {
	    return false;
	  }
	}

// getParentRequest関数
// 上記の getRequest関数で取得するはずの情報を、親フレーム側から取得する。
	function getParentRequest(){
	  if(parent.location.search.length > 1) {
	    var get = new Object();
	    var ret = parent.location.search.substr(1).split("&");
	    for(var i = 0; i < ret.length; i++) {
	      var r = ret[i].split("=");
	      get[r[0]] = r[1];
	    }
	    return get;
	  } else {
	    return false;
	  }
	}
    • HiddenView.js 
      /*
 * HiddenView
 * Copyright (c) 2006 SUNAOKA Norifumi <http://pocari.org>
 *
 * HiddenView is freely distributable under the terms of an MIT-style license.
 */

var HiddenView = function() {
    this.initialize();
};
HiddenView.prototype = {
    initialize: function() {
        var input = document.getElementsByTagName('input');
        var table = document.createElement('table');
        var tbody = document.createElement('tbody');
        
        var row = this.createRow([ 'Name', 'Value' ], true);
        tbody.appendChild(row);
        
        for (var i = 0, len = input.length; i < len; ++i) {
            if (input[i].type == 'hidden') {
                var row = this.createRow([ input[i].name, input[i].value ]);
                tbody.appendChild(row);
            }
        }
        table.appendChild(tbody);
        table.className = 'hv-table';
        table.setAttribute('class', 'hv-table');
        document.getElementsByTagName('body').item(0).appendChild(table);
    },
    createRow: function(values, header) {
        var row = document.createElement('tr');
        for (var i = 0, len = values.length; i < len; ++i) {
            var col = document.createElement(header ? 'th' : 'td');
            col.appendChild(document.createTextNode(values[i]));
            row.appendChild(col);
        }
        return row;
    }
};
  • all_css/ 
    /*
 * HiddenView.css - for HiddenView.js
 */
table.hv-table {
	border-collapse: collapse;
	border: 1px #36c solid;
}

table.hv-table th {
	font-weight: bold;
	text-align: center;
	color: #000;
	background-color: #cfdbf3;
	border: 1px #36c solid;
	padding: 3px;
}

table.hv-table td {
	color: #000;
	background-color: #e5ecf9;
	border: 1px #36c solid;
	padding: 3px;
}
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS