• 3: 受け取ったデータを使ってHTML文字列を作成 1


    動的にファイルを読み込むことができることはわかりましたので、今度はそのデータを利用して動的にHTMLを出力してみましょう。

    動作ブラウザ
    win mac linux
    n7 m1 e6 o7 o8 n7 m1 e5 s1 n7 m1 k3
    × ×
     


    読み込まれる「./test2.txt」ファイルの中身
    var a1_text = "allabout(javascript)"
    var a1_href = "http://allabout.co.jp/internet/javascript/ "
    var a1_msg = "javascript news,tips,samples... "
    

    サンプルのソース
    <!-- ajax暫定ライブラリ -->
    <script languege = "JavaScript"
            src      = "ajaxtest.js"
            charset  = "utf-8">
    </script>
    
    <script language = "JavaScript">
    <!--
    
    	//コールバック関数 ( 受信時に実行されます )
    	function on_loaded_1(oj)
    	{
    		//レスポンスを取得
    		var res	= oj.responseText
    		
    		//レスポンスされた文字列をJavaScriptとして実行
    		eval(res)
    		
    		//受け取った変数を使ってHTML文字列を作成
    		var link1  = '<a href="'+a1_href+'">'+a1_text+'</a>'
    		    link1 += '<br>' + a1_msg
    
    		//DIV へ出力
    		document.getElementById('data').innerHTML = link1
    	}
    
    //-->
    </script>
    
    <form>
    	<input type    = "button"
    	       value   = "test2.txtを読み込み、そのデータからリンクを生成"
    	       onclick = "requestFile('','GET','./test2.txt',true,on_loaded_1)">
    </form>
    
    <!-- ここへリンクを出力 --> 
    <div id="data"></div>
    

    暫定ライブラリ「./ajaxtest.js」ファイルの中身
    	//XMLHttpRequestオブジェクト生成
    	function createHttpRequest()
    	{
    		//Win ie用
    		if(window.ActiveXObject)
    		{
    			try 
    			{
    			  //MSXML2以降用
    			  return new ActiveXObject("Msxml2.XMLHTTP") 
    			} 
    			catch (e) 
    			{
    			  try 
    			  {
    			    //旧MSXML用
    			    return new ActiveXObject("Microsoft.XMLHTTP") 
    			  } 
    			  catch (e2) 
    			  {
    			      return null
    			  }
    			}
    		} 
    		else if(window.XMLHttpRequest)
    		{
    			//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
    			return new XMLHttpRequest() 
    		} 
    		else 
    		{
    			return null
    		}
    	}
    
    	//ファイルにアクセスし受信内容を確認します
    	function requestFile( data , method , fileName , async ,callback )
    	{
    		//XMLHttpRequestオブジェクト生成
    		var httpoj = createHttpRequest()	
    		
    		//受信時に起動するイベント
    		httpoj.onreadystatechange = function()	
    		{ 
    			//readyState値は4で受信完了
    			if (httpoj.readyState==4)	
    			{ 
    				//コールバック
    				callback(httpoj)
    			}
    		}
    
    		//open メソッド
    		httpoj.open( method , fileName , async )	
    		//send メソッド
    		httpoj.send( data ) 
    	}
    



  • 4: 受け取ったデータを使ってHTML文字列を作成 2


    今度は、リンクを3つ出力します。そこで、2点工夫してあります。 ひとつは、データフォーマットとしてJSON( JavaScript Object Notation ) を利用していること。もうひとつは、日本語(ここでは「掲示板」という文字列)をencodeURI()関数であらかじめutf-8でURLエンコードしておき、読み込み後、decodeURI()関数で元に戻していることです。

    JSONは、軽量なデータ交換フォーマットで、JavaScript(ECMAScript)にもとづくサブセットですが、言語から独立したテキスト形式です。C、C++、C#、Java、JavaScript、Perl、PythonなどのC言語ファミリーのプログラマにとってなじみ深く、Web上で複合処理を行うプログラミング言語間での交換を行いやすいデータフォーマットといえます。オブジェクトや配列の構造もそのまま、シンプルな形式でやりとりできますし、XMLなどにくらべると、タグや属性などの冗長な重複などを大幅に減らすこともできますから、送受信するデータ量を半分以下に軽量化できてしまう場合もあります。(JSONについての簡単なテスト)

    もうひとつ、URLエンコードですが、これは、あらかじめutf-8の文字コードでエンコードしてしまうことで、文字化けを回避しています。エンコード文字列を作りたいときは、ブラウザのアドレスバーへ javascript:document.write(encodeURI('文字列')) と打ち込んでみてください。IE、Opera、Mozilla(Firefox)なら変換されると思います。 *(この他に、文字化けを回避する方法としては、たとえばサーバー側のAddTypeのcharset設定や出力時のContent-typeで正しくutf-8を設定した上でBOM付きutf-8で送出する方法などもあります。)

    動作ブラウザ
    win mac linux
    n7 m1 e6 o7 o8 n7 m1 e5 s1 n7 m1 k3
    × ×

     


    読み込まれる「./test3.txt」ファイルの中身
    var response  = { 
    	"a0" :
    	{
    		"text" : "allabout(javascript)",
    		"href" : "http://allabout.co.jp/internet/javascript/ ",
    		"msg"  : "javascript news,tips,samples... "
    	},
    	"a1" :
    	{
    		"text" : "javascript%E6%8E%B2%E7%A4%BA%E6%9D%BF", 
    		                   //↑URLエンコードした文字列「掲示板」
    		"href" : "http://otd8.jbbs.livedoor.jp/javascript/bbs_thread ",
    		"msg"  : "javascript bbs"
    	},
    	"a2" :
    	{
    		"text" : "What is the ajax ?",
    		"href" : "../CU20050430A/index.htm ",
    		"msg"  : "Paradigm shift of JavaScript. "
    	}
    }
    

    サンプルのソース
    <!-- ajax暫定ライブラリ -->
    <script languege = "JavaScript"
            src      = "ajaxtest.js"
            charset  = "utf-8">
    </script>
    
    <script language = "JavaScript">
    <!--
    
    	//コールバック関数 ( 受信時に実行されます )
    	function on_loaded_2(oj)
    	{
    		//レスポンスを取得
    		var res	= oj.responseText 
    		//レスポンスされた文字列をJavaScriptとして実行
    		eval(res)
    		//受け取ったJSONを使ってHTML文字列を作成
    		var html = mkHtml(response)
    		//DIV へ出力
    		document.getElementById('data2').innerHTML = html
    	}
    
    	//HTML生成
    	function mkHtml(oj)
    	{
    		var str = ''
    		for (i in oj)
    		{
    			str += '<a href="'+oj[i].href+'">'
    			str += decodeURI(oj[i].text)
    			str += '</a>'
    			str += '<br>' + oj[i].msg
    			str += '<br>'
    			str += '<br>'
    
    		}
    		return str
    	}
    
    //-->
    </script>
    
    <form>
    	<input type    = "button"
    	       value   = "test3.txtを読み込み、そのデータからリンクを生成"
    	       onclick = "requestFile('','GET','./test3.txt',true,on_loaded_2)">
    </form>
    
    <!-- ここへリンクを出力 --> 
    <div id="data2" 
         style="margin-left:20px;line-height:1em"></div>
    

    *次回は、具体的に、Ajaxツールを利用して簡易RSSリーダーを作ってみます。




  • ※記事内容は執筆時点のものです。最新の内容をご確認ください。
    ※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。