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

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

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

• 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を使ってマークアップ要素を作ります。

最後に全体のサンプル