Javascript関連情報

更新日:2005年06月28日

Ajax 動的なテーブル書き換え

配列データを、サーバーへ別ファイルとして用意し、ページ構築後の好きなタイミングでAjaxで動的に読み込んでから、テーブル(table)へ流し込んでみます。


動的なテーブル書き換え



  • 4: [ソース] 暫定Ajax用ライブラリ


    この.jsライブラリは、中身には特に触らなくても、そのままコピーしファイルにするだけで使えます。

    暫定Ajax用ライブラリの中の受信処理などに書き込まれているブラウザ分岐の根拠等は、 レスポンスのタイミングについての(ブラウザごとの違いについての)調査などの結果に基づいています。

    【今回の暫定Ajax用ライブラリ】jslb_ajax04.js
    前回利用した暫定ライブラリjslb_ajax03.jsはsetRequestHeader()がopen()の前に書かれていたため、 POST時に動作不良が起こりましたので、jslb_ajax04.jsに修正しました。 このAjaxライブラリは、今後も随時修正しますのであらかじめご了承ください。

    *ライブラリの最新版は下記リンクをご覧ください。
    暫定版Ajax用ライブラリ
    ////
    // 暫定版Ajax用ライブラリ jslb_ajax04.js
    // 最新情報 http://jsgt.org/mt/archives/01/000409.html 
    // 上記コメント削除不可。商用利用、改造、自由。連絡不要です。
    // 
    
    	////
    	// XMLHttpRequestオブジェクト生成
    	//
    	// @sample oj=createHttpRequest()
    	// @return XMLHttpRequestオブジェクト
    	//
    	function createHttpRequest()
    	{
    		if(window.ActiveXObject){
    			 //Win e4,e5,e6用
    			try {
    				return new ActiveXObject("Msxml2.XMLHTTP") ;
    			} catch (e) {
    				try {
    					return new ActiveXObject("Microsoft.XMLHTTP") ;
    				} catch (e2) {
    					return null ;
    	 			}
    	 		}
    		} else if(window.XMLHttpRequest){
    			 //Win Mac Linux m1,f1,o8 Mac s1 Linux k3用
    			return new XMLHttpRequest() ;
    		} else {
    			return null ;
    		}
    	}
    	
    	////
    	// 送信関数
    	//
    	// @sample sendRequest(onloaded,'&prog=1','POST','./about2.php',true,true)
    	// @param callback 受信時に起動する関数名
    	// @param data	 送信するデータ
    	// @param method "POST" or "GET"
    	// @param urlリクエストするファイルのURL
    	// @param async	非同期ならtrue 同期ならfalse
    	// @param sload	スーパーロード trueで強制、省略またはfalseでデフォルト
    	//
    	function sendRequest(callback,data,method,url,async,sload)
    	{
    		//XMLHttpRequestオブジェクト生成
    		var oj = createHttpRequest()
    		if( oj == null ) return null
    		
    		//強制ロードの設定
    		var sload = (!!sendRequest.arguments[5])?sload:false;
    		if(sload)url=url+"?t="+(new Date()).getTime()
    
    		//ブラウザ判定
    		var ua = navigator.userAgent
    		var safari	= ua.indexOf("Safari")!=-1
    		var konqueror = ua.indexOf("Konqueror")!=-1
    		var mozes	 = ((a=navigator.userAgent.split("Gecko/")[1] )
    				?a.split(" ")[0]:0) >= 20011128 
    		
    		//受信処理
    		//operaはonreadystatechangeに多重レスバグがあるのでonloadが安全
    		//Moz,FireFoxはoj.readyState==3でも受信するので通常はonloadが安全
    		//Win ieではonloadは動作しない
    		//Konquerorはonloadが不安定
    		//参考http://jsgt.org/ajax/ref/test/response/responsetext/try1.php
    		if(window.opera || safari || mozes){
    			oj.onload = function () { callback(oj) }
    		} else {
    		
    			oj.onreadystatechange =function () 
    			{
    				if ( oj.readyState == 4 ){
    					callback(oj)
    				}
    			}
    			
    		}
    
    		//URLエンコード
    		if(method == 'GET') {
    		
    			var encdata = ''
    			var datas = data.split('&')
    			for(i=0;i<datas.length;i++)
    			{
    				var dataq = datas[i].split('=')
    				encdata += '&'+encodeURI(dataq[0])+'='+encodeURI(dataq[1])
    			}
    			url=url + encodeURI(data)
    		}		
    		
    		//open メソッド
    		oj.open( method , url , async )
    
    		//ヘッダセット
    		if(method == 'POST') {
    			//このメソッドがWin Opera8でエラーになったので分岐
    			if(!window.opera)
    				oj.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    		} 
    
    		//send メソッド
    		oj.send(data)
    
    	}
    


  • 1 2 3 4
    • 印刷する
    • ブックマークする
    • 携帯に送る
    • ブログに書く

    あわせて読みたい

    この記事の担当ガイド

    写真

    高橋 登史朗

    Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…

    続きを読む

    住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載! さぁ、いますぐチェック!

    人気Javascriptランキング

    Powered by 価格.com

    デジタル関連コミュニティ

    北欧好きが、愛用の北欧モノを見せ合うコミュニティ

    メルマガ登録

    【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

    ショッピングカタログ

    All About ウェブマガジン

    女性向け

    雨が楽しくなる!レイングッズ15

    男性向け

    マネしたくなるアイデア住宅

    All About モバイル

    QRコード

    All Aboutがケータイで読める!

    オススメ記事をメールでチェック

    知識・経験を生かして、記事を書いてみませんか?