日曜日, 3月 14, 2010
[JavaScript]XMLHttpRequestの使用方法
▼質問
JavaScriptを使って簡単にＷＥＢサーバの状態を監視したいんだ。
何かいい方法はないか教えてくれないか！
▼回答
それなら、XMLHttpRequestを使うとできると思うよ。
簡単な手順とサンプルを教えてあげるから参考にしてくれ！
① XMLHttpRequestオブジェクト生成（ＩＥ用とそれ以外で処理分岐）
② 非同期通信の時は、onreadystatechangeイベントの登録
③ openメソッドを使って、サーバへのリクエスト方法を指定
④ sendメソッドを使って、サーバへのリクエストする（データ送信）
⑤ readyStateプロパティを使ってサーバからデータを受信できたか調べる
⑥ statusプロパティを使って正常に取得できたか調べる
⑦ responseText・responseXMLプロパティを使って受信データを処理する
同期（Sync）通信
非同期（Async）通信
出力
■参考サイト
IEのonreadystatechangeイベントハンドラは、１回しか反応しないんでしょうか？ - Yahoo!知恵袋
JavaScriptを使って簡単にＷＥＢサーバの状態を監視したいんだ。
何かいい方法はないか教えてくれないか！
▼回答
それなら、XMLHttpRequestを使うとできると思うよ。
簡単な手順とサンプルを教えてあげるから参考にしてくれ！
① XMLHttpRequestオブジェクト生成（ＩＥ用とそれ以外で処理分岐）
② 非同期通信の時は、onreadystatechangeイベントの登録
③ openメソッドを使って、サーバへのリクエスト方法を指定
④ sendメソッドを使って、サーバへのリクエストする（データ送信）
⑤ readyStateプロパティを使ってサーバからデータを受信できたか調べる
⑥ statusプロパティを使って正常に取得できたか調べる
⑦ responseText・responseXMLプロパティを使って受信データを処理する
同期（Sync）通信
function send_sync() {
var now = new Date();
var url = "test.jsp?NOW_DATE=" + now;
var ret = false;
var request = null;
if ( window.XMLHttpRequest ) {
// Mozilla, Safari, etc
request = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) {
// IE
try {
request = new ActiveXObject( "Msxml2.XMLHTTP" );
} catch (e) {
try {
request = new ActiveXObject( "Microsoft.XMLHTTP" );
} catch (e) {}
}
}
if ( !request ) {
alert( 'Giving up :( Cannot create an XMLHTTP instance' );
return;
}
request.open( "POST", url, false );
request.send("");
document.getElementById( "request_readyState" ).innerHTML = request.readyState;
document.getElementById( "request_status" ).innerHTML = request.status;
if ( (request.readyState == 4) && (request.status == 200) ) {
request_Headers.innerHTML = request.getAllResponseHeaders();
document.getElementById( "result_post" ).innerHTML = "正常";
}
else {
document.getElementById( "result_post" ).innerHTML = "異常";
}
}
非同期（Async）通信
function send_async() {
var now = new Date();
var url = "test.jsp?NOW_DATE=" + now;
var ret = false;
var request = null;
if ( window.XMLHttpRequest ) {
// Mozilla, Safari, etc
request = new XMLHttpRequest();
}
else if ( window.ActiveXObject ) {
// IE
try {
request = new ActiveXObject( "Msxml2.XMLHTTP" );
} catch (e) {
try {
request = new ActiveXObject( "Microsoft.XMLHTTP" );
} catch (e) {}
}
}
if ( !request ) {
alert( 'Giving up :( Cannot create an XMLHTTP instance' );
return;
}
request.onreadystatechange = function() {
document.getElementById( "request_readyState" ).innerHTML = request.readyState;
if ( request.readyState == 4 ) {
document.getElementById( "request_status" ).innerHTML = request.status;
if ( request.status == 200 ) {
request_Headers.innerHTML = request.getAllResponseHeaders();
document.getElementById( "result_post" ).innerHTML = "正常";
}
else {
document.getElementById( "result_post" ).innerHTML = "異常";
}
}
}
request.open( "POST", url, true );
request.send("");
}
出力
結果：＜div id="request_result">＜/div>
readyState:＜div id="request_readyState">＜/div>
status:＜div id="request_status">＜/div>
ResponseHeaders:＜div id="request_Headers">＜/div>
■参考サイト
IEのonreadystatechangeイベントハンドラは、１回しか反応しないんでしょうか？ - Yahoo!知恵袋
# posted by itpro-blogger @ 4:40 午後 
