Indexへ戻る
サンプル(1)ファイルの表示

  サンプル(1)ではフォームのプルダウンで条件を選択し、テキストファイルのデータを読み込んで表示するものです。
今回はファイルの内容をそのまま表示するのでPHPを使用していません。
サンプル(1)の実行
サンプル(1)のHTML
■今回使用したAjax共通処理(Javascript)
 // XMLHttpRequest オブジェクト生成
function createHttpRequest()
{
    var 
xmlhttp null;

    if (
window.ActiveXObject) {
        
try {
        
// MSXML2以降用
            
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") ;
        } 
catch (e) {
            
try {
                
// 旧MSXML用
                
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;
            } 
catch (e2) {

            }
        }
    } elseif (
window.XMLHttpRequest) {
        
// Win Mac Linux m1,f1,o8 Mac s1 Linux k3用
        
xmlhttp = new XMLHttpRequest() ;

        
// Mozilla対応(バージョンにより、サーバーからXML mime-type のヘッダが
        //              帰ってこない場合、正常に動作しないことがある)
        
xmlhttp.overrideMimeType('text/xml');
    } else {

    }
    if (
xmlhttp == null) {
        
alert('Cannot create an XMLHTTP instance');
    }

    return 
xmlhttp;
}

// 送受信処理
function sendRequest (xmlhttpmethodurlasyncdatacallback)
{
    
//ブラウザ判定
    
var ua navigator.userAgent;
    var 
safari  ua.indexOf("Safari")!=-1;
    var 
konqueror ua.indexOf("Konqueror")!=-1;
    var 
mozes = ((navigator.userAgent.split("Gecko/")[1] )
                   ? 
a.split(" ")[0] : 0) >= 20011128 ;

    
// サーバーからの受信処理
    // opera       : onreadystatechange に多重レスバグがあるので onload が安全
    // Moz,FireFox : readyState==3 でも受信するので通常は onload が安全
    // Win ie      : onload が動作しない
    // Konqueror   : onload が不安定
    
if (window.opera || safari || mozes) {
        
xmlhttp.onload = function ()
        {
            
callback(xmlhttp);
        }
    } else {
        
xmlhttp.onreadystatechange = function ()
        {
            
// サーバーからの応答判定
            //   0 : 初期化されていません
            //   1 : 読み込み中です
            //   2 : 読み込み完了
            //   3 : 双方向に扱えます
            //   4 : すべて完了しました
            
if (xmlhttp.readyState == 4) {

                
// サーバーの応答コード判定
                //   200 : OK
                
if (xmlhttp.status == 200) {
                    
callback(xmlhttp);
                } else {
                    
alert('There was a problem with the request.');
                }
            }
        }
    }

    
// サーバーからの送信処理
    
xmlhttp.open(methodurlasync);
    
xmlhttp.setRequestHeader("Content-Type" "application/x-www-form-urlencoded");
    
xmlhttp.send(data);
}