【Javascript】Ajaxはじめの一歩　XMLHttpRequest

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>

	//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 ) 
	}

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>