@blog.justoneplanet.info

■まぁタイトルの通りAjaxのサンプルです

• この記事で実際に使用しているスクリプトと記事内に記述しているスクリプトは便宜上、若干異なります。
• Ajaxですが今回は特にXMLを使用してません。
• ユーザー入力に依存したアプリを作る際は、セキュリティホール（SQLインジェクション、クロスサイトスクリプティング等）に十分に注意してください。

■サンプル

ここにリクエスト結果が表示されます

■サンプルソース

var methodType = "POST";//ここにはPOSTかGETを入れましょう
var requestFileName = "";//ここはリクエストするファイルのパスを！
function createHttpRequest(){
    if(window.XMLHttpRequest){return new XMLHttpRequest();}
        else{
        if(window.ActiveXObject){
            try{return new ActiveXObject("Msxml2.XMLHTTP");}
            catch(e){
                try{return new ActiveXObject("Microsoft.XMLHTTP")}
                catch(e2){return null;}
            }
        }
        else{return null;}
    }
}
function test(){
    var request = createHttpRequest();
    request.open(methodType ,requestFileName );
    request.setRequestHeader("content-type","application/x-www-form-urlencoded; charset=UTF-8");
    request.send("");
    request.onreadystatechange = function(){
        if(request.readyState == 4 && request.status == 200){
            var txt = request.responseText;
            document.getElementById("area").innerHTML = txt;
        }
    }
}

■注意点

• 文字コードはUTF-8をお勧めします。
• ドメインが異なるサーバーとの通信は行えません。
• 無駄にグローバルなのは許してください。
• PHP、CGIにリクエストする場合requestFileNameに指定してください
• 上記、GETの場合は?（クエリ）をつけてあげてね
• POSTの場合はsend(“”);のところにデーターをクエリ形式で送信してあげましょう。
• レスポンスの中にタグが含まれていればページにも反映されます。（悪用される危険がある:クロスサイトスクリプティング）
• GETにする場合はキャッシュが残り正しく反映されない可能性もあるため、POSTを使う、if-Modified-Sinceヘッダをつける、クエリに日時を加えるなどして下さい

■createHttpRequest改良版

ブラウザ判定は1回だけ実行させれば良い。

var createXHR = (function(){
	if(window.XMLHttpRequest){
		return function(){
			return new XMLHttpRequest();
		}
	}
	else if(window.ActiveXObject){
		return function(){
			try {
				return new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				try {
					return new ActiveXObject("Microsoft.XMLHTTP")
				}
				catch (e2) {
					return null;
				}
			}
		}
	}
	else{
		return function(){
			return null;
		}
	}
})();