Ajax関連アンテナ

Last-modified: 2007-06-06 (水) 06:35:13 (3730d)
※※このサイトは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