Ajaxとは - バンビのブログ

Ajax:
非同期通信の仕方

ajaxは多分jqueryをつかってとか、railsにあるajaxのやり方でやってきたとおもうのですけど、今一度仕組みを理解しておこう。
それぞれの書き方は別途調べてつかってください！基本的な情報をここにはかいておきます。

サーバーと非同期で通信するために「XMLHttpRequest()」というAPIがあるのでそのインスタンスを作成して使用しましょう！
var xhr = new XMLHttpRequest();

// responseTypeを予め指定しておくとあとで「JSON.parse」しなくてよいので任意のresponseTypeを設定しておこう。
xmlHttpRequest.responseType = 'json';

//xhr.open(【どんな方法で？】, 【どのサーバーに？】);
xhr.open('GET', 'https://furien/api');

//send()で通信開始！
xhr.send();

//onreadystatechangeでサーバーからのデータを受信します！
xhr.onreadystatechange = function() {

    //通信状態を確認できる。通信状態によって行いたい処理がif文で条件分岐できるよ！
　　//4ならデータ取得完了！という意味
    if ( xhr.readyState === 4 ) {

        //データ取得処理を書く

    }
}

・データを受信するのはいいけど、通信が成功してるのか？通信はじまってるか？など詳細がわからないので「.readyState」で通信状態を管理することができます。

0   準備段階    まだ通信は行われていない状態
1   準備完了    通信を行う準備が完了している状態
2   通信開始    サーバーと通信が始まっている状態
3   受信中   サーバーから目的のデータを取得している状態
4   通信完了    データを取得して通信が終了している状態



・statusをつかってエラーハンドリングする。（status 200とかみたことあるはず）
・「.onreadystatechange」の中で xhr.statusをつかって通信結果が確認できる。
xhr.onreadystatechange = function() {

    //通信が正常な場合の処理
    if( xhr.status === 200 ) {

        //データ取得処理を書く

    }
};

・他にもあるけどよく見るやつ

200 成功  特に問題なく通信が成功した状態
401 エラー   認証が必要なため通信できない状態
403 エラー   アクセスが禁止されていて通信できない状態
404 エラー   情報が存在しないために通信できない状態
500 エラー   サーバー側の不具合で通信できない状態
503 エラー   サーバーに負荷がかかって通信できない状態

xhr.onreadystatechange（）と同じようにつかえる他のメソッドもあるのでケースバイケースで使い分けましょう。
ステータスに名前がついているようなものなので、下記のほうがわかりやすいかも！！

onloadstart : リクエストが開始した時
onprogress : リクエストが完了するまで周期的に実行される。受信したデータを確認することも可能。
onabort : abortメソッドによってリクエストが中断された時
onerror : リクエストでエラーが発生した時
onload : リクエストが完了した時
ontimeout : リクエストがタイムアウトした時

・GET通信
xhr.open('GET', 'http://sample.com/test.php?q=hogehoge');というようにかきます。

検索とかした時に　xhr.open('GET', 'http://sample.com/test.php?q=hogehoge');　のようにURLと続けてサーバーに送信したい情報を「?q=hogehoge」のようにつけて書きます。


・POST通信（基本的に書き方はGET通信とかわらないです）

・.setRequestHeader()をつけて「content-type」を指定してあげる必要があります。指定しないとうまくデータがとれないことがあります。
・.send()　GETのときにURLに続けて送信したかった情報を、send()内に書いて送信します。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://sample.com');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send( 'q=hogehoge' );