Ajaxに挑戦!

wrote2009.10.25

Ajax、Asynchoronous JavaScript + XMLの略。非同期通信を行ってJavascriptからXMLデータやテキストデータを取得し、その内容をWeb上に表示させる。

いわゆるマッシュアップ。やりたいと思ってもなかなか越えられない壁だった。
でもようやく糸口が見えてきたので復習がてら備忘録。

ajax、一連の流れの図解

壮大な壁に感じてしまった原因は二つあるかな、と。

  • XMLHttpRequestっていうけど、難しそう
  • クロスドメイン問題があるのは分かったけど、JSON、JSONPって何なの!?

この切り分けがなかなかできなくて、ぐるぐるメビウスの輪なみに迷宮入りしてしまってたんだと思う。
逆にこの二つを別個にして解決すると、明るい未来、が待ってるかと!

とりあえず、一個目の「XMLHttpRequestっていうけど、難しそう」はこれでクリアしました!っていう内容をこれからご紹介します。

1.XMLHttprequestオブジェクトを生成する

var ajax_elem = null;
if(window.XMLHttpRequest){
ajax_elem = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
ajax_elem = new window.ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){
return null;
}
}
if(ajax_elem != null){
//2.XMLHttpRequestオブジェクトを使う
}

  • window.ActiveXObjectは、IE6用。IE7からはwindow.XMLHttpRequestをサポート。
  • "Msxml2.XMLHTTP.3.0"は、IE6用。それ以前のブラウザには効かない。
  • try、catch処理をしているのは、IE6でActiveXを無効に設定している場合、エラーさせないため。

2.XMLHttpRequestオブジェクトを使う

if(ajax_elem != null){
ajax_elem.open("GET",url,true);
if(typeof(headers) == "object"){
for(var name in headers){
ajax_elem.setRequestHeader(name,headers[name]);
}
}
ajax_elem.onreadystatechange = function(){
if(ajax_elem.readyState == 4){
callback(ajax_elem);
}
}
}
ajax_elem.send(null);

  • openメソッドを使って、XMLHttprequestオブジェクトをWebサーバー内の情報を呼ぶ。
    ※同ドメイン内のデータのみ
  • trueは非同期、falseを指定してしまうと同期通信となってしまう。
  • setRequestHeaderは必須ではない。
  • readyState、0:未初期化状態、1:リクエスト準備、2:リクエスト完了、3:受信中、4:受信完了

3.取得したデータを返す

return ajax_elem;

テキストの場合は、ajax_elem.responseText、xmlの場合は、ajax_elem.responseXMLで情報を取得できます。
また、受信に成功したかは ajax_elem.status の値が 200 であるかで確認できます。

あとはどうやって見せるか

関数 callback(ajax_elem) でどうやってみせるか、このへんはDOMを使ってマークアップ要素を作ります。

最後に全体のサンプル

var tk1975 = new Object();
tk1975.ajax = new Object();
tk1975.ajax.httpGetRequest = function(url, callback, headers){
var ajax_elem = null;
if(window.XMLHttpRequest){
ajax_elem = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
ajax_elem = new window.ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){
return null;}
};
if(ajax_elem != null){
ajax_elem.open("GET",url,true);
if(typeof(headers) == "object"){
for(var name in headers){
ajax_elem.setRequestHeader(name,headers[name]);
}
};
ajax_elem.onreadystatechange = function(){
if(ajax_elem.readyState == 4){
callback(ajax_elem);
}
}
};
ajax_elem.send(null);return ajax_elem;}

window.onload = function(){
var test_url = "/rss.xml";
var test = tk1975.ajax.httpGetRequest(test_url,fn_test);
if(!test){alert("test")}
}
var fn_test = function(test){
alert("成功")
}