暫定版Ajax用ライブラリ jslb

関数 sendRequest() 書式 sendRequest(callback,data,method,url,async,sload,user,password) 説明 Ajaxな送受信を行います引数 callback : コールバック関数。下記、function、object、arrayいずれかで指定できます。 Functionの場合受信時に起動する関数

	sendRequest( onloaded,'','GET','hoge.txt');
	function onloaded (oj){alert(oj.responseText)}
	

Objectの場合受信時に起動する関数onloadとヘッダ指定関数 onbeforsetheaderをオブジェクトで指定(v0.50以降)

	sendRequest({
	    onload : function (oj){alert(oj.responseText)}, 
	    onbeforsetheader : function(){
	         oj.setRequestHeader("X-mysend","toshiro");
	    } 
	},'','GET','hoge.txt');
	

Arrayの場合受信時に起動する関数["onload"]とヘッダ指定関数["onbeforsetheader"]を指定(v0.50以降)

	var ary =[];
	ary['onload']=function (oj){alert(oj.responseText)};
	ary['onbeforsetheader']=function(oj){
	       oj.setRequestHeader('X-mysend','toshiro');
	} 
	sendRequest(ary,'','GET','test.txt',true,true);
	

data : 送信するデータ。下記、object、array、stringいずれかで指定できます。 Objectの場合 {名前1:値1,名前2:値2,...}(v0.50以降)

	sendRequest( onloaded,{
	    data1 : 123 , data2 : 456 , data3 : 789
	},'GET','hoge.txt');
	

Arrayの場合 ary["名前1"]=値1;ary["名前2"]=値2 (v0.50以降) Stringの場合 &名前=値&名前2=値2...の形式で渡します (*注意:data文字列内に「&」か「=」を含む場合は、必ず上記objectかarrayで渡してください。) method : string HTTPリクエストメソッド "POST" or "GET" url : string リクエストするURL async : boolean (省略可)非同期ならtrue 同期ならfalse sload : boolean (省略可)スーパーロード trueで強制、省略またはfalseでデフォルトキャッシュ設定に従う user : string (省略可)認証ページ用ユーザー名 password : string (省略可)認証ページ用パスワード戻値 XMLHttpRequestオブジェクトのインスタンス例　 test.txtを読み込んで、ファイルの中の文字列をダイアログ表示します。上記のサンプルと同じ動作ですが、関数 sendRequest()を利用することで、オブジェクト生成から、クロスブラウザ微調整やURIエンコードなどを自動処置します。この結果、送信(sendRequest)/受信(コールバック関数)の2工程だけで、すっきりとソースをかけるようになります。非同期の連続リクエストでも上書きされないようになっています。

	<script type="text/javascript" src = "./jslb_ajax.js" charset= "utf-8"></script>
	<script type="text/javascript">

		//送信
		sendRequest(function(oj){alert(oj.responseText)},'&test=123','POST','./test.txt');
	</script>
			

	<script type="text/javascript" src = "./jslb_ajax.js" charset= "utf-8"></script>
	<script type="text/javascript">

		//送信
		sendRequest(onloaded,'','GET','./test.txt');

		//受信時に動作するコールバック関数
		function onloaded(oj){
		  alert(oj.responseText);
		}

	</script>
			

	<script type="text/javascript" src = "./jslb_ajax.js" charset= "utf-8"></script>
	<script type="text/javascript">

		//送信  第六引数trueは強制ロード(キャッシュ無視)
		sendRequest(onloaded,'','GET','./test.txt',true,true);

		//受信時に動作するコールバック関数
		function onloaded(oj){
		  alert(oj.responseText);
		}

	</script>
			

	<script type="text/javascript" src = "./jslb_ajax.js" charset= "utf-8"></script>
	<script type="text/javascript">

		//送信
		sendRequest(onloaded,{data1:123 , data2:"aaa", data3:"test" },'GET','./test.txt');

		//受信時に動作するコールバック関数
		function onloaded(oj){
		  alert(oj.responseText);
		}

	</script>
			

	<script type="text/javascript"
	        src      = "../../lib/jslb_ajax.js"
	        charset  = "utf-8"></script>
	
	<script type="text/javascript">
	<!--
	
	  //コールバック関数 ( 受信時に実行されます )
	  function on_loaded1(oj)
	  {
	    //レスポンスを取得
	    var res  =  oj.responseText;
	    
	    //レスポンスされた文字列をDIVへ出力
	    document.getElementById("output1").innerHTML=res;
	  }
	
	//-->
	</script>
	
	<form>
	  <input type    = "text" 
	         name    = "data1">
	  <input type    = "text" 
	         name    = "data2">
	  <input type    = "button"
	         value   = "Ajaxで送信します"
	         onclick = "d=[];
	                    d['data1']= this.form.data1.value;
	                    d['data2']= this.form.data2.value;
	                    sendRequest(
	                      on_loaded1,                      //コールバック関数
	                      d,                               //データ配列 
	                     'GET',                            //HTTPメソッド
	                     './echo2.php',                    //URL
	                      true,                            //非同期
	                      true                             //強制ロード
	                    )">
	</form>
			

	<script type="text/javascript" src = "./jslb_ajax.js" charset= "utf-8"></script>
	<script type="text/javascript">

		//送信
		function getRange(range)
		{
			//リクエスト
			sendRequest({ 
				onload           : on_loaded  ,   //データ受信用コールバック
				onbeforsetheader : setHeaders     //ヘッダセット用コールバック
			}, '','GET','./test.txt',true,true);


			//リクエストヘッダセット用コールバック関数（送信直前にセットされます）
			function setHeaders(oj){
				//Rangeの値をセットしてリクエスト
				oj.setRequestHeader("Range","bytes="+range);
			}
		}

		//データ受信用コールバック関数 ( 受信時に実行されます )
		function on_loaded(oj)
		{
	
			//ステータスコード
			status =	"【ステータスコード】<br>"+oj.status;
	
			//レスポンスヘッダを取得
			headers	= "<br><br>【レスポンスヘッダ】<br>"+oj.getAllResponseHeaders().split('\n').join('<br>');
				
			//レスポンスを取得
			var res	= "【サーバーから受信したtest.txtのデータ】<br>"+oj.responseText;
		
			//レスポンスされた文字列を表示
			document.getElementById('outputdata').innerHTML=status+headers+res;
		}

	</script>
	*注意:Opera8,9では残念ながらsetRequestHeaderがうまく動作しません。
	*サンプル Range

リクエストヘッダでキャッシュ無効にする方法 第６引数のsloadは、URLへ強制的に?t=タイムスタンプを付けますので、どんな時でもスーパーロードできますがキャッシュを増加させます。本来は、ヘッダのセットで行うのが推奨される方法ですので方法を書いておきます。 (ただし、あまり調査はしていませんが、おそらくこの方法はブラウザやサーバーに依存する可能性があります)

<input  type ="button" 
	value ="キャッシュ無効のヘッダを設定する" 
	onclick="
	sendRequest({
		onload : function (oj){
			document.getElementById('testDIV').innerHTML=oj.responseText;
		}, 
		onbeforsetheader : function(oj){
			oj.setRequestHeader('Cache-Control','no-cache'); 
			oj.setRequestHeader('Pragma','no-cache');
			oj.setRequestHeader ('Expires', 0); 
		}
	},'','GET','http://jsgt.org/about/cu/CU20050830A/ajasql/junking4.php?y=2007&m=09');"
>

関数 chkAjaBrowser ()(ブラウザ判定を使いたい場合は下記のように利用できます) 書式 bool = chkAjaBrowser () 説明このライブラリを利用可能なブラウザかどうかを判定する動作可能なブラウザの場合だけtrue(true―false) 例　以下は、動作しないブラウザを使用している場合に別ページにジャンプします。

	<script type="text/javascript" src = "./jslb_ajax.js" charset = "utf-8"></script>
	<script type="text/javascript">
		//動作しないブラウザを別のページへ飛ばします
		if(!chkAjaBrowser()){
			//ここに分岐処理を書きます
			location.href='nonajax.htm';
		}
	</script>
			

関数 createHttpRequest() (sendRequestの内部で自動使用) 書式 oj = createHttpRequest() 説明クロスブラウザなXMLHttpRequestオブジェクトを生成します戻値 XMLHttpRequestオブジェクトのインスタンス Ajaxを使えないブラウザはnullを返します例　 test.txtを読み込んで、ファイルの中の文字列をダイアログ表示します。ただ、このようにグローバル変数へXMLHttpRequestのインスタンスを入れる方法はあまりお勧めしません。複数リクエスト時に、前のレスポンスを上書きしてしまうからです。sendRequest()から送信すればその心配はなくなります。

	<script type="text/javascript" src = "./jslb_ajax.js" charset= "utf-8"></script>
	<script type="text/javascript">
		//オブジェクト生成
		req = createHttpRequest()
		//受信時の処理
		req.onreadystatechange = function(){
			if ( req.readyState == 4){
				alert(req.responseText);
			}
		}
		//初期化
		req.open("GET", "./test.txt");
		//送信
		req.send("");
	</script>
			

jslb_ajaxをコンストラクタにしてオブジェクトな使い方

  jslb_ajaxのコードを一皮包むとコンストラクタになります。


	コンストラクタ名 =function(){

	  this.sendRequest=sendRequest;

	  //ここにjslb_ajax_c.jsのコードをコピペ
	
	}
	
	たとえば、
	HogeClass_jslb_ajax=function(){
	
	  this.sendRequest=sendRequest;
	  sendRequest.README={license:'Public DoDomain',url:......
	
	}

	あとは、
	var test = new HogeClass_jslb_ajax();
	してから、
	test.sendRequest(....);
	という感じで使えます。