【JS】標準的なAJAX入門

以下の本のChapter8-1,2の学習記録です！

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで

AJAX(Asynchronous JavaScript + XML)はページ遷移せずサーバとデータをやりとりする仕組み。 XMLHttpRequestオブジェクトが仕事をする。 我々はXMLHttpRequestオブジェクトに「ちゃんと仕事してねー」というだけです。 すごいことなんでしょうが、内部でどんなことをやっているのかイマイチ分からないので凄さがわからないですね！

*** XMLHttpRequestオブジェクト 以下のようなプロパティを持っています。 ・onreadystatechange→通信の状態が変化したタイミングで呼び出されるイベントハンドラ ・readyState→Http通信の状態を取得 ・status→Httpステータスコードを取得 メソッドも。 ・open(HTTPメソッド, URL, 非同期フラグ)→通信開始（初期化？）。GETかPOSTのHTTPメソッドを選択し、URLに対し、非同期フラグが立ってたら非同期で通信する。 ・send()→HTTPリクエストを送信

基本的にはonreadystatehangeに通信ができた場合や出来なかった場合の処理を列挙しとけばいいわけですね！ パーフェクトJavaScriptも見たけどはじめの方は同じようなこと書いてありました。

パーフェクトJavaScript (PERFECT SERIES 4)

ただパーフェクトJavaScriptのほうが明らかにページ数が少ないです^^; 頭が足りない自分にはキツイですね！

|javascript| function getXHR() { var req; try { req = new XMLHttpRequest(); } catch(e) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { req = new ActiveXObject('Microsoft.XMLHTTP'); } } return req; }

function asyncSend() { var req = getXHR();

req.onreadystatechange = function(){ var result = document.getElementById('result'); if (req.readyState == 4) { if (req.status == 200) { result.innerHTML = req.responseText; }else{ result.innerHTML = "サーバーエラーが発生しました。"; } } else { result.innerHTML = "通信中"; } }; req.open('GET', 'helloAjax.php?name=' + encodeURIComponent(document.fm.name.value), true); req.send(null); } ||<