はじめてのAjaxメモ①

Ajaxについて、なんとなく知ってるけど触ったことがなかったので基礎から調べてみました。

Ajaxとは

「Asynchronous JavaScript + XML」の略で、非同期通信を実現する仕組み。

GoogleMapに使われていたり、SPA（Single page application）を支える技術として有名。

名前にXMLとついているが、JSONなど他の形式のデータも扱うことができる。

XMLHttpRequestオブジェクト

ブラウザ上でサーバーとHTTP通信を行うためのAPI。

XMLHttpRequest - Web API インターフェイス | MDN

生のJavaScriptで実装してみる

var req = new XMLHttpRequest();
var url = 'アクセスしたいURL';

function ajaxsample() {

    req.open('GET', url); //リクエストの初期化
    req.send(); //リクエストをサーバーに送信する

    req.onreadystatechange = function() {
        if(req.readyState === 4) {
            if(req.status === 200) {
                //通信成功時の処理
            }else{
                //通信失敗時の処理
            }
        }else{
            //通信中の処理
        }
    }
}

onreadystatechangeプロパティに代入した関数は、readyStateプロパティが変化するたびに呼び出される。readyStateプロパティは以下のような値をとるので、

値	簡単な説明
0	open()が呼ばれていない
1	open()が呼び出し済み
2	send()が呼ばれていない
3	ダウンロード中
4	操作が完了した

XMLHttpRequest.readyState - XMLHttpRequest | MDN

4（操作が完了した）になった時にステータスコードをチェックし、処理を分岐させている。

生のJavaScriptで実装するデメリット

• コードが煩雑になる。
• クロスブラウザに対応できない。

生のjsで書いてみてAjaxの基礎の部分が少し理解できたので、次回はjQueryでの書き方他をまとめたいと思います。