XMLHttpRequestで非同期通信に触れる
ここのところjavascript入門中。VimperatorのプラグインをいじったりHTML5のCanvasで絵を描いたりしていたら、Javascriptに興味を持った。というわけで、Ajaxっぽいことに挑戦する。
前回の紹介記事と違って、自分の為に書いてるので、割と自分で納得できるようなものになったらそれで満足する。そもそもそういう趣旨のブログなのです。
まずは最小限の構成で
非同期通信の実現のため、XMLHttpRequestを試してみることにする。これ読んでる人でIE6なんて酔狂なブラウザ使ってる人はいないと思うので、単純化に XMLHttpRequestのみを扱う。
というわけで、ファイルを通信するための雛形を拾ってきた。
Ajaxはじめの一歩 XMLHttpRequest - ［JavaScript］All About
myxhr.html
<!DOCTYPE html>
<html>
<head>
<title>My XMLHttpRequest Test</title>
<script type="text/javascript">
var xhr;
function requestFile( data , method , fileName , async ){
//XMLHttpRequestオブジェクト生成
xhr = new XMLHttpRequest(); //[1]
//open メソッド
xhr.open( method , fileName , async ) ;
//受信時に起動するイベント
xhr.onreadystatechange = function(){
//readyState値は4で受信完了
if (xhr.readyState==4){
alert(xhr.responseText);
}
};
//send メソッド
xhr.send( data );
}
</script>
</head>
<body>
<h1>XMLHttpRequest Sample</h1>
<form>
<input type = "button"
value = "リクエスト"
onclick = "requestFile( '' , 'GET' , './test.txt' , true )"><br>
</form>
</body>
</html>自分で読みやすいように書き直したので行儀が悪いことをしているかもしれない。
test.txt
Test XMLHttpRequest
ボタンを押すと同じディレクトリののtext.txt を取得して内容をアラート。
Test XMLHttpRequest と出た。成功。中で何やってるかを抑える。
open
XMLHttpRequest.open( method , fileName , async )
method は"GET"か"POST"、finenameはとってくるものの相対パス、asyncは論理値で、通信中にブラウザの処理を止めるか否か。AJAXのAはAsync。
非同期の使用法では、データを受け取ったときにコールバックを受け取ります。そのため、リクエストが発生している間はブラウザは通常どおりに動き続けます。
send()
サーバに HTTP リクエストを送信する。content には送信するデータを設定出来る。
送信先の URL、送信方式（GET や POST など）は、open で指定したものになる。
データを送信しても、送信先でそのデータを処理するようにしていないと何も変化なし。
データを送信しない時でも必要で、その時は send(null) とする。
リクエストを投げてサーバーサイドのハンドラで処理しろってことだろうか。
readyState
readyState
解説 : XMLHttpRequest
0（初期化されていない）
1（読み込み中）
2（読み込み完了）
3（操作可能）
4（準備完了）
||<<
動作を確かめてみるために次を追加。
>||
xhr.onreadystatechange = function(){
+ //readyState値は4で受信完了
+ if(xhr.readyState>1){
+ document.getElementById("hoge").innerHTML+="<br>"+xhr.readyState+"hello"
+ }
</form>
+ <p id="hoge">Push Button</p>
</body>
その結果
Push Button 2hello 3hello 4hello
なるほど。通信中のreadyStateの状態によって段階的に処理できるみたいだ。
status:200とは
HTTPステータスコードを取得。（参考 : Studying HTTP）
200 ： ファイルを見つけた
404 ： ファイルが見つかりません（"Not Found" IE では 0 に、Firefox では 302
通信の可否。
requestXML
responseText だけじゃなくてXMLも受け取れるらしい。
そこでresponseXMLとしてみたのだが、なんだかおかしい
- alert(xhr.responseXML);
+ document.getElementById("hoge").innerHTML+="<br>"+xhr.responseXML.xml;hello.xml
+ <?xml version="1.0" encoding="UTF-8"?> <p>Hello Ajax!</p>
[object XMLDocument]としか表示されない。XMLに手を加えろということか。よくわからないので調べる。
あった。 リクエストを送信してXMLを受信する - JavaScript
myxhr.htmlを編集
if (xhr.readyState==4) {
var xml = xhr.responseXML;
var nodes = xml.getElementsByTagName("p")
var text = nodes[0].firstChild.nodeValue;
document.getElementById("hoge").innerHTML+="<br>"+text;
}
