忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/07/26 05:39 |
JavaScript2-1:XMLHttpRequest

Ajaxとは、ページ全体をリロードすることなくサーバとデータをやり取りし、
リアルタイムに画面表示を変更できるという素敵極まりない技術のことです。
XMLHttpRequestというクラスを用いて通信を行います。

さっそくですが実際に使ってみましょう。
とりあえずクラスなのでオブジェクトを作成します。
基本的にXMLHttpRequestで作成するのですが、
例によってIEは独自仕様なのでActiveXObjectを使用する必要があります。

var xxxxx=new XMLHttpRequest();
var xxxxx=new ActiveXObject("Microsoft.XMLHTTP");
var xxxxx=new ActiveXObject("Msxml2.XMLHTTP");


Microsoft.XMLHTTPはIEなら何れでも、Msxml2.XMLHTTPはIE6以降(Microsoft.XMLHTTPより速い)、XMLHttpRequestはIE7以降およびIE以外のブラウザで使用できます。
ブラウザ毎にページを分けるのも馬鹿らしいので簡単にまとめましょう。

if(window.XMLHttpRequest){
    xxxxx=new XMLHttpRequest();
}else{
    xxxxx=new ActiveXObject("Microsoft.XMLHTTP");
}


え?両方とも対応してないブラウザ?そんなん知らんがな。

※正しく書くならこんなかんじ

var xxxxx = false;

if(window.XMLHttpRequest) {
    // Firefox, Opera など
    xxxxx = new XMLHttpRequest();
    xxxxx.overrideMimeType('text/xml');
} else if(window.ActiveXObject) {
    // IE
    try {
        xxxxx = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        xxxxx = new ActiveXObject('Microsoft.XMLHTTP');
    }
}


さてXMLHttpRequestクラスから作成したオブジェクトxxxxxに対して、
以下のようなメソッドやプロパティで操作を行うことができます。
今回はとりあえずテキストファイルを表示してみます。

xxxxx.open("GET","ajax.txt",true);

xxxxxオブジェクトに対し、ajax.txtをGETメソッドで取得するという命令を作成します。
あくまで作成するだけで実行はまだ行いません。
trueは非同期という意味で、返事を気にせずに次の行に突き進みます。
falseにすると非同期になり、ファイルの内容を取得するまで処理が止まります。
falseだとプログラムの処理は簡単になりますが、
Ajaxはリアルタイムであることに意味があるので、よほどのことがなければtrueでいきましょう。

xxxxx.send(null);

openメソッドで作成した命令を、実際に送信します。
パラメータを渡したい場合は()内に記入します。
今回はajax.txtのテキストファイルを取得するだけなのでnullです。

xxxxx.abort();

sendした命令を中止します。
サーバが落ちてていつまでも反応が返ってこないといった場合に使うべきなのですが、今回はまあテストなのでパス。

xxxxx.getAllResponseHeaders()
getResponseHeader("ラベル名")


返ってきたデータのヘッダを見ることが出来ます。
ETag、Content-Length、Keep-Alive、Content-Type、Last-Modified等が参照できます。

xxxxx.onreadystatechange

後述のreadyStateプロパティが変化するたびにイベントが発生するという超便利なイベントハンドラです。
xxxxx.onreadystatechange=checkState;
と記入するだけでreadyStateが変化するたびにcheckState関数を実行してくれます。
ただ、checkState(xxxxx)というふうに引数を渡すとエラーになります。
このせいでXMLHttpRequestオブジェクトがグローバル必須になってしまうのですが・・・何故。

xxxxx.readyState

sendで送ったリクエストが現在どんな状態か知ることができます。
0~4の5種類あります。2なら受信待ち、3なら受信中、等。
でもまあデータを全部受信したら4以外はあまり使いません。

xxxxx.status

xxxxx.readyStateでデータを全部取得した、と思ったら実は404NotFoundの応答を全部受信しただけだった、なんてことがあるわけで、応答の内容をstatusでチェックします。
200だと正常な応答、ということになります。

xxxxx.responseText
xxxxx.responseXML


実際に帰ってきたデータが入るところです。
TextかXMLかは返ってきたデータ形式で変わります。今回はテキストなので当然responseTextに入っています。

もちろんメソッドプロパティは他にもまだありますが、とりあえずはこんなところで。
さて、上記を纏めると以下のようになります。

http://yuubiseiharukana.creativeroot.jp/ajax1/ajax1-1-1.html

<script type="text/javascript">
<!--
    //XMLHttpRequestオブジェクトはグローバルで指定
    var xxxxx;
    
    //メインルーチン
    function loadButton(){        
        //オブジェクトを作成
        xxxxx=createXmlHttpRequest();
        //リクエストを作成
        xxxxx.open("GET","ajax.txt",true);
        //readyStateが変更になるたびに実行される関数を指定
        xxxxx.onreadystatechange = checkStatus;
        //リクエストを送信
        xxxxx.send(null);
    }

    //readyStateが変更になるたびに実行される関数
    function checkStatus(){
        //受信完了したか、無事に受信できたか確認
        if(xxxxx.readyState == 4 && xxxxx.status == 200){
            alert(xxxxx.responseText);
        }
    }

    //HTTPリクエスト作成関数
    function createXmlHttpRequest() {
        var xmlhttp = false;
        if( window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
           } catch(e) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
       }
    return xmlhttp;
    }

-->
</script>

<input type="button" value="ajaxテスト" onClick="loadButton()">


適当にテキストファイルを作って同じフォルダに入れておいてください。
うまくajax.txtの取得に成功すると、アラートが表示されます。めでたし。
文字化けで上手く表示されない場合、ajax.txtの文字コードをUTF-8にしてください。
AjaxはUTF-8が前提にされています。

上記のとおり、xxxxx.onreadystatechange = checkStatus(xxxxx)
というふうにcheckStatus関数にオブジェクトを渡せないので
XMLHttpRequestオブジェクトはグローバルで作成する必要があります。今のところ。

PR


2008/04/24 13:09 | Comments(0) | TrackBack(0) | JavaScript

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<JavaScript2-2:innerHTML | HOME | PHP1-6:連想配列と多次元配列>>
忍者ブログ[PR]