【JavaScript入門】Ajaxの使い方とGET・POST通信まとめ！

こんにちは、ライターのマサトです！

今回は、JavaScriptでサーバー側と通信をしながらデータの送受信が非同期で行える「Ajax」について詳しく学習をしていきましょう！

この記事では、

などの応用的な使い方に関しても解説していきます。この記事で、「Ajax」をしっかり学習して自分のスキルアップを目指しましょう！

「Ajax」とは？

それでは、まず最初に「Ajax」についての基本的な知識から学習を進めていきましょう！

Ajaxは「Asynchronous JavaScript and XML」の略で、簡単に言うとJavaScriptでサーバー側と非同期通信を行うための技術になります。

ここで言う「非同期通信」とは、サーバーと通信中であっても別の処理を引き続き行えることを意味しています。例えば、GメールやFacebook、Twitter…などがスムーズに操作できるのは非同期でサーバーと通信が行われているからですね。

逆に、Webサイトなどでリンクをクリックして別のサイトに遷移する時、画面が真っ白になってWebページの情報がサーバーから読み込まれるまで待たなければいけませんよね？これが「同期通信」であり、サーバーと通信中は別の処理ができない状態になっているわけです。

つまり、「Ajax」の技術を活用することで、サーバー側とスムーズなデータのやり取りができるだけでなく、ユーザーに待ち時間を感じさせないレスポンスの高いWeb画面を構築することも可能になるのが大きな特徴です。

「Ajax」の使い方

この章では、基本的なAjax通信処理のプログラミングについて学習していきます。

主に、「XMLHttpRequest()」によるAjax通信手法や条件分岐・エラーハンドリングについて見ていきましょう！

「XMLHttpRequest()」によるAjax通信の作り方

まずは、JavaScriptで「Ajax」を実現するプログラミング手法から学習をしていきましょう！

JavaScriptには、サーバーと非同期で通信するために「XMLHttpRequest()」というAPIが提供されています。そこで、まずはこのインスタンスを作成するところから始めましょう！

var xhr = new XMLHttpRequest();

あとはインスタンス「xhr」を使って、「どのサーバーに？」「どんな方法で？」「いつデータを取得するか？」を決めます。

一般的には、次のような形式で通信を実現します！

var xhr = new XMLHttpRequest();

xhr.open(【どんな方法で？】, 【どのサーバーに？】);
xhr.send();

xhr.onreadystatechange = function() {

    if(【いつデータを取得するか？】) {

        //データを取得した後の処理を書く
    }
}

「xhr.open()」で、実際に通信する方法（GET / POSTなど）やサーバーの場所（URLなど）を指定し、「xhr.send()」で通信を開始します。

そして、「xhr.onreadystatechange」でサーバーから取得したデータを受け取ることができます。ただし、「通信が完了しているか？」「通信が成功したか？」などをIF文で条件分岐しながら確認する必要があります。

この点については、次の章で詳しく見ていきましょう！

「readyState」による条件分岐の方法

先ほどは、サーバーからのデータを受信するために「onreadystatechange」を利用しました。

しかし、そもそも通信が完了して成功しているのかどうかが分からないと目的のデータを取得できませんよね？そこで、一般的には「readyState」を使って条件分岐の処理を記述していきます。

xhr.onreadystatechange = function() {
    if ( xhr.readyState === 4 ) {

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

    }
}

この例では「readyState」の値が「4」であれば、サーバーからデータを取得する処理を行います。

この「値」の意味は次のとおりです！

【readyStateの値】

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

このように、サーバーとの通信状態を表す「値」が5種類あります。それぞれの段階で条件分岐しても良いのですが、一般的には「4」の通信が完了しているかを条件分岐すると良いでしょう。

「status」を使ってエラーメッセージを取得する方法

次に、サーバーと通信している際に起きる「エラーハンドリング」について見ていきましょう！

先ほどは、サーバーとの通信状態だけしか見ていませんでした。しかし、実際にはサーバーと通信するとさまざまなエラーが発生することが少なくありません。

そこで、同じように「onreadystatechange」の中で「status」を確認することで、エラーハンドリングが可能です。

次のサンプル例を見てください！

xhr.onreadystatechange = function() {
    if( xhr.status === 200 ) {
 
        //データ取得処理を書く
 
    }
};

この例では、「status」の値が「200」になったらデータ取得処理を実行するようにプログラミングしています。

この値の意味ですが、いくつかある中で主要なものを以下にリストアップしておきます！

【 statusの主要な値 】

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

基本的に、サーバーと正常な通信をしている場合は、statusの値が「200」なのでこれと条件分岐するのが良いでしょう。さらに、「readyState」と「status」は別々に条件分岐するよりも同時に確認する方が効率的です！

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
 
        //データ取得処理を書く
 
    }
};

このように「&&」で一緒に確認できることも合わせて覚えておきましょう！

「GET」で通信する方法

この章では、実際にAjaxを使ってGET通信を行う方法について見ていきましょう！

基本的なGET通信のプログラム作成からデータの取得までを学んでいきます。

「GET」によるAjax通信のサンプル例

「XMLHttpRequest」を使ったAjax通信では、主に「GET」「POST」による方法でプログラムを書いていきます。

まず最初に「GET」を使った基本的なサンプル例をご紹介します！

var xhr = new XMLHttpRequest();

xhr.open('GET', 【URLを記述】);
xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {

        //データを取得後の処理を書く
    }
}

これまで学んだように、まず「XMLHttpRequest」のインスタンスを作成して「open() / send()」で通信を始めます。

「open」の引数には、通信方法として今回は「GET」を指定しました。「GET」は、基本的にサーバーからデータを取得することを目的に通信を行いますが、少量のデータであれば送信を行うことも可能です。

「GET」でデータを取得する方法

次に、「GET」通信でサーバーからデータを取得する方法について見ていきましょう！

まずは、サーバーの場所を示す「URL」を「open()」の引数に指定します。例えば「http://sample.com」というサーバーにある「test.json」というファイルと通信するのであれば、次のようになります。

xhr.open('GET', 'http://sample.com/test.json');

これで、サーバーと通信が成功すれば「test.json」ファイルの情報を取得することができます。

そして、その情報を取得するためには「responsetText」を使います。

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {

        console.log( xhr.responseText );
    }
}

まずはこれまで通り、「readyState」「status」を使って通信に問題がないかを確認します。そして、サーバーからデータを取得できる状態になったら、ここで初めて「responsetText」を使って情報を取得するわけです。

この一連の流れはAjax通信の基本となるので、何度か練習して慣れておくようにしておきましょう！

「POST」で通信する方法

次に、「POST」による通信を行ってみましょう！「POST」は、基本的に大容量のデータを送信することを目的に通信を行いますが、もちろんデータの取得も可能です。

先ほど、「GET」による通信は少量のデータしか送信できないと説明しましたが、それには理由があります。それは、「GET」で送信処理を行う場合は、URLに「?」を付けて任意のデータを送信する必要があるからです。

xhr.open('GET', 'http://sample.com/test.php?q=hogehoge');

この場合、「?q=」に続けて送信したいデータ（この場合はhogehoge）をURLに含めて一緒に送信します。

つまり、URLは文字数に制限があるので送信できるデータの容量はどうしても少なくなるわけです。反対に、「POST」によるデータ送信はURLに情報を含めないので大容量のデータが送信できるのですが、記述方法が少し変わるので要注意です。

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' );

「POST」の場合も同様に「XMLHttpRequest」のインスタンスを作成し、「open」「send」で通信を始めます。「open」の引数には、通信方法として「POST」を指定し目的の「URL」を記述します。

次に、新しく「setRequestHeader()」を使って「content-type」を指定しなければいけないのですが、これがないとデータを正しく受信できない場合があるので忘れないようにしましょう。

最後に「send」の引数として、「GET」ではURLに含めていた情報をここへ記述すれば完成です。

JSONファイルの取得例

簡単な実践例としてサーバーからJSONファイルを取得する通信プログラムを作成してみましょう！

今回はGitHubが提供しているAPIを使って、実際にサーバーからデータを取得してみます。

GitHubは「https://api.github.com」にアクセスすることで、さまざまなデータを取得できるJSONファイルを返してくれます。

例えば、「javascript」に関連したリポジトリ情報を取得するには、次のようなURLを送信すればOKです。

https://api.github.com/search/repositories?q=javascript

このURLを、「GET」を使って通信してみましょう！

次のコード例を見てください！

var url = "https://api.github.com/search/repositories?q=javascript";
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.send();

xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
      
    console.log( JSON.parse(xhr.responseText) );
      
  }
}

実行結果

Object {total_count: 283778, incomplete_results: false, items: Array(30)}

この例では、「XMLHttpRequest」のインスタンスを作成し、「open」「send」を使って通信を始めています。

「open」の引数として、通信方法を「GET」にして「URL」を先ほどのGitHubへのアドレスに設定しています。そして、「readyState」「status」が成功しているのを確認して、GitHubから取得したデータを「responseText」を使って出力しています。

ちなみに、「responseText」で取得したデータは文字列なので、もしJSONファイルなどであれば「JSON.parse()」を使ってJSON形式に変換しておくと良いでしょう。

jQueryによるAjax通信例

さて、JavaScriptによる基本的なAjax通信を覚えたところで、「jQuery」による手法についても触れておきましょう！

基本的にjQueryはJavaScriptで記述されているので、Ajax通信においても出来ることは同じです。しかしながら、記述方法がとても簡単に書けるように工夫されているのが大きな特徴と言えるでしょう。

基本的なAjax通信サンプルを「jQuery」のプログラムに置き換えると次のようになります。

$.ajax({
    url: 【どのサーバーに？（サーバーのURLなど）】,
    type: 【どんな方法で？（GET / POSTなど）】,

    //通信状態に問題がないかどうか
    success: function(data) {

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

    },
    //通信エラーになった場合の処理
    error: function(err) {

        //エラー処理を書く

    }
});

このように、オブジェクト形式で記述できるため、コードが見やすく初心者でも扱いやすいですね。また、「readyState」「stauts」の条件分岐も簡単になり、エラーコードなどの予備知識が無くても実装できるので便利です。

ただし、jQueryのソースコードを見ると分かりますが、やっていることはこれまで解説した「XMLHttpRequest()」と同じです。そのため、「Ajax」を勉強するならまずは基本となるJavaScriptでプログラムが書けるようにしておくのがベストでしょう！

まとめ

今回は、JavaScriptでサーバーと非同期通信ができる「Ajax」について学習をしました！

ここで、ポイントをおさらいをしておきましょう。

 

上記の内容を踏まえて、ぜひ自分でも通信プログラムを作成してデータの送受信に慣れておくようにしましょう！