Ajaxの使い方を徹底解説！基本的な書き方と実装方法は？POST通信とGET通信・jQueryでの利用方法も確認しよう

​JavaScriptでサーバーと通信を行う技術がAjaxです。あまり馴染みがなく、どう使えば良いのか分からないという人も多いのではないでしょうか。

今回はAjaxの使い方・コードの書き方などについて解説します。

Ajaxの使い方を徹底解説

Ajaxの使い方について

Ajaxは、JavaScriptでサーバー側と非同期通信を行うための技術です。

また、Ajaxを使えばサーバーと通信した状態で処理を行うことが可能です。

つまり、ページを更新することなくページの内容を入れ替えることができる、非同期処理が可能となります。

Ajaxの特徴や具体的な使い方についてみていきましょう。

Ajaxの特徴

Ajaxはページを部分的にも非同期の状態で変更ができ、デスクトップアプリケーションにより近い状態での使用が可能です。

XMLHttpRequestを使い、通信結果に応じてダイナミックHTML(DHTML)で動的にアプローチしページの一部を書き換えることができます。

では次にXMLHttpRequestによる通信について解説しましょう。

XMLHttpRequestによる通信について

Google マップ、FacebookなどのようにXMLHttpRequestを利用したWebアプリケーションは非常に多く存在しています。

AjaxはJavascriptでXMLHttpRequestを送り、indexアクションなどで実行。

Javascript等でファイルを自動的に検索して、ファイル内容を実行します。

またXMLHttpRequestは、表示しているドキュメントと同じオリジンとしか通信できませんでした。

しかしXMLHttpRequest Level 2が実装されていると、オリジンを超えて通信することができるようになってきています。

XMLHttpRequest Level2が実装されているブラウザは以下の3種です。

• Firefox
• Chrome
• Safari

これらは別ドメインと通信することが非常に容易かつ、通常のAjax処理と同じようにするだけで利用することができます。

このようにAjaxは、今までできなかったことが新機能として追加され進化しているのです。

JSONについて

JSONとは

JSONとはJavaScript Object Notationの略で、XMLHttpRequest などと同様のテキストベースのデータフォーマットです。

JSONはXMLHttpRequest と比べると簡潔に構造化されたデータを記述することができます。

記述が容易で人間が理解しやすいデータフォーマットであり、JavaScriptのオブジェクト表記構文のサブセットです。

例えば、JSONとXMLHttpRequestで同じデータを作成した場合には、記述内容の量に違いが生じます。

XMLHttpRequestの場合は、すべての情報をタグで囲んだテキストノートとして記述し、閉じタグが必要です。

また、データとして表現する場合に、記述方法として「属性」と「テキストノート」としての記述をする必要もあります。

JSONの場合はXMLHttpRequestのようなことをする必要がなく、カッコに対応する閉じカッコ以外は必要ありません。

そしてXMLHttpRequest と比べるとタイプ数も少ないです。

通信量を少なくすることができ、可読性も高いため多くの人に理解されやすく作成しやすいメリットがあります。

JSONはJavaScriptのサブセットなのでeval()関数で評価しJavaScriptオブジェクトに変換することができます。

eval()関数は、引数で渡された文字列をJavaScriptコードとして評価するものです。

その結果を返すことからJavaScriptとの親和性が高く、Ajaxでのデータ交換フォーマットとしても利用されています。

Ajaxは、JavaScriptでサーバーからXMLHttpRequest データを取得し、取得したデータを動的に反映しています。

ですがこのXMLHttpRequest を使わずにJSONを利用することで、冗長な通信時のデータ量を削減することが可能です。

AjaxはJavaやPHPなどが実装されますが、主要なプログラミング言語にはJSONを使用したライブラリが存在しています。

JavaScriptだけでなく言語をこえたデータ交換としてJSONは利用されているのです。

Ajaxの利用制限

Ajax にはいくつかの制限があります。

• 文字コードは、原則として「UTF-8」のみしか使えない

他の文字コードを使うと文字化けしてしまうため文字コードは、原則として「UTF-8」しか使えません。

• クロスドメインの制限がある

Ajax ではセキュリティ上の理由から、HTMLと同一ドメイン上にあるファイルしか取得できません。

異なるドメイン上のファイルを取得する方法には、PHPなどのサーバーサイドプログラムを利用する方法があります。

しかしその場合には、セキュリティに十分に注意する必要があります。

自分が管理していないサーバーのファイルを読み込むため、不正に書き換えられたファイルを読み込む可能性があるため注意が必要です。

Ajaxの基本的な書き方と実装方法

基本的な書き方

基本的なプログラムの書き方は、以下に記載した通りです。

1. <script>
2. $(function(){
3. $.ajax({
4. url: ‘ここに取得したいURLまたはディレクトリを入力’
5. }).done(function(data){
6. /* 通信成功時 */
7. }).fail(function(data){
8. /* 通信失敗時 */
9. }).always(function(data){
10. /* 通信成功・失敗問わず */
11. });
12. });
13. </script>

これにサンプルのプログラムを作ると以下のようになります。

GETを使う場合

GETを使用した通信でURL:https://yotuya.com/における「Ajax通信が成功したかしないか」を表示する単純なサンプルプログラムです。

1. <script>
2. $(function(){
3. //.sampleをクリックしてajax通信を行う
4. $(‘.sample_btn’).click(function(){
5. $.ajax({
6. url: ‘/ajax/test.html’,
7. /* 自サイトのドメインであれば、https://yotuya.com/ というURL指定も可 */
8. type: ‘GET’,
9. dataType: ‘html’
10. }).done(function(data){
11. /* 通信成功時 */
12. $(‘.result’).html(data); //取得したHTMLを.resultに反映
13. }).fail(function(data){
14. /* 通信失敗時 */
15. alert(‘通信失敗！’);
16. });
17. });
18. });
19. </script> 

Ajaxの実装方法(Javascriptに実装する場合)

jQueryやaxiosなどのライブラリにAjaxは実装されることが多いですが、まずはJavascriptへの実装方法を解説しましょう。

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

Ajax によるXMLHttpRequestによる具体的な通信方法は、次のようになります。

最初に『XMLHttpRequest』を元とする『new』を使ったオブジェクトを生成してください。

1. 1.var xhr = new XMLHttpRequest();

次に「xhr(XMLHttpRequest)」を使って、「どのサーバーに？」「どんな方法で？」「いつデータを取得するか？」を決めます。

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

1. 1. var xhr = new XMLHttpRequest();
2. 2
3. 3. xhr.open(【どんな方法で？】, 【どのサーバーに？】);
4. 4. xhr.send();
5. 5
6. 6. xhr.onreadystatechange = function() {
7. 7. if (xhr.readyState === 4 && xhr.status === 200) {
8. 8
9. 9. //データを取得後の処理を書く
10. 10. }

11. 11. }

サ－バ応答時の処理を定義

「XMLHttpRequestオブジェクト」は、readyState/statusプロパティで通信の状態や応答ステータスを確認可能です。

これらが変化したタイミングでコールバック関数を起動するようにしましょう。

コールバック関数はonreadystatechangedプロパティで設定します。

通信が完了して成功しているのかどうかが分からないと、目的のデータを取得できません。

そのため「readyState」を使って条件分岐の処理を記述するのが一般的です。

通常、「readyState」の値が「4」であれば、データを取得して通信が終了している状態のため、この数値を使用します。

また、「State」の数値が「200」になったら、特に問題なく通信が成功した状態になったことになるのです。

「200」になったらデータ取得処理を実行するようにプログラミングを行いましょう。

「&&」を使用して「readyState」と「status」を別々に条件分岐するより、同時に確認する方が効率的です。

readyStateによる条件分岐について

「readyState」の値が「4」であれば、サーバーからデータを取得する処理を行うようにプログラミングを行いました。

「4」以外のそれぞれの数値の意味については、以下の通りになります。

通信の状態を表していますが、それぞれの状態を表示しても意味がないため、「４」の通信完了状態を条件分岐としました。

「status」を使用してエラーメッセ－ジを取得する

「onreadystatechange」の中で「status」を確認することで、エラーのプログラムができます。

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

この「200」の意味ですが、成功したことを表し「特に問題なく通信が成功した状態」を意味しています。

この他に、いくつかある中で主要なものをリストアップしました。

【statusの主要な値】

今回は基本的に、サーバーと正常な通信をしている場合はstatusの値が「200」なため、これと条件分岐とします。

サーバーに要求データ（リクエスト）を送信する

OPENメソッドは次のような書式です。

• XMLHttpRequestオブジェクト.OPEN（HTTPメソッド、URL、非同期モードで通信するか、ユーザー名、パスワード）
• ユーザー名とパスワードは認証が必要なページのみを指定する
• HTTPメソッドは数百バイト以内ならGET、それ以上大きいならPOSTを使用する。
• URLの末尾に？キ－名＝値＆の形式で情報を追加する。
• 異なるドメインには送信できない。URLは相対パスを指定する。
  

最後にsendメソッドでリクエストを送信する

リクエストを実際にサーバーへ送信するには「send」メソッドを使いましょう。

引数にはサーバーへ送りたいデータを記述し「POST」の場合には、サーバーへ送るデータをここで指定します。

「GET」の場合には、パラメータとして送りたいデータをURLの後ろに記述して送るため引数には「null」を記述してください。

また「open」メソッドで作成したHTTPリクエストを「send」メソッドを使ってサーバーへリクエストを送信するという処理になります。

Ajaxのプログラムについて

Javascriptの場合は、IEのバージョンごとに別の書き方をするため、クロスブラウザ対応が必要です。

また書き方が冗長なため面倒である、というデメリットがあります。

このためクロスブラウザ問題も気にする必要等がない、jQueryやaxiosなどの専用ライブラリを使用することも多いです。

そのメリットとしては、より簡単にプログラムができるという点になります。

実装方法を記載しましたが次にＰＯＳＴ等の通信方法について解説しましょう。

POST通信とGET通信について

「POST通信」は「GET通信」よりも大容量のデータを送信することができます。当然、受信することも可能です。

「GET通信」による通信は少量のデータしか送信できません。

これは「GET通信」で送信処理を行う場合、URLに「?」を付けて任意のデータを同時に送信する必要があるからです。

GET通信では、「?q=」に続けて送信したいデータをURLに含めて一緒に送信してください。

URLは文字数に制限があるため送信できるデータの容量はどうしても少なくなり、通信量が制限されます。

「POST」通信のはデータ送信にURLの情報を含めません。

そのため大容量のデータが送信できますが、記述方法が少し変わるので注意が必要です。

POST通信の方法

「POST」の場合「XMLHttpRequest」のオブジェクトを作成し、「open」「send」で通信を始めましょう。

「open」の引数には、通信方法として「POST」を指定し目的の「URL」を記述します。

次に、新しく「setRequestHeader()」を使って「content-type」を指定しなければなりません。

これがない場合には、データを正しく受信できない場合があります。

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

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

GET通信について

POST通信と同じように「XMLHttpRequest」のオブジェクトを作成して「open() / send()」で通信開始です。

「open」の引数に、通信方法として今回は「GET」を指定。

「GET」は、基本的にサーバからデータを取得することを目的に通信を行います。

勿論、記載したように少量のデータであれば送信を行うことは可能です。

1. 1. var xhr = new XMLHttpRequest();
2. 2
3. 3. xhr.open(‘GET’, 【URLを記述】);
4. 4. xhr.send();
5. 5
6. 6. xhr.onreadystatechange = function() {
7. 7. if(xhr.readyState === 4 && xhr.status === 200) {
8. 8
9. 9. //データを取得後の処理を書く
10. 10. }
11. 11. }

GET通信によりデータを取得する方法

サーバの場所を示す「URL」を「open()」の引数に指定し、サーバーと通信が成功すればファイルの情報を取得することができます。

1. xhr.open(‘GET’, ‘http://・・・・/test’);

また、その情報を取得するためには以下のような「responsetText」を使います。

1. 1. xhr.onreadystatechange = function() {
2. 2. if(xhr.readyState === 4 && xhr.status === 200) {
3. 3.
4. 4. console.log( xhr.responseText );
5. 5. }
6. 6. }
   

「readyState」「status」を使って通信に問題がないかを確認しましょう。

そしてサーバからデータを取得できる状態になったら、「responsetText」を使って情報を取得することになります。

jQueryの利用方法

jQueryはJavaScriptで記述されているので、Ajax通信においても出来ることは同じです。

しかし、記述方法がとても簡単に書けるように工夫されているのが大きな特徴といえます。

基本的なプラグラムは、以下の通りです。

1. 1. $.ajax({
2. 2. url: 【どのサーバに？（サーバのURLなど）】,
3. 3. type: 【どんな方法で？（GET / POSTなど）】,
4. 4
5. 5. //通信状態に問題がないかどうか
6. 6. success: function(data) {
7. 7
8. 8. //データ取得処理を書く
9. 9
10. 10. },
11. 11. //通信エラーになった場合の処理
12. 12. error: function(err) {
13. 13
14. 14. //エラー処理を書く
15. 15
16. 16. }
17. 17. });
    

オブジェクト形式で記述できるため、コードが見やすく記載事項も少なくなります。そのため非常に分かりやすいのが特徴です。

また、「readyState」「stauts」の条件分岐も簡単になり、エラーコードなどの予備知識が無くても実装できます。

Ajax を利用すると、ネットワークを介する呼び出しになって煩雑になりがちです。

しかしjQueryを利用すると、そんな煩わしいエラー処理を簡単に行うこともできます。

GET通信、POST通信と比べるとエラー処理についてあまり気にする必要がありません。

＜関連記事＞
jQueryとは？jQueryの使い方を初心者向けに解説！jQueryでできることは？ダウンロードから導入手順もご紹介

最後に

Ajaxについて解説してきました。

基本的なJavaScriptのプログラミングが書けることできれば、Ajaxの有効な機能を生かしたプログラムを作成することができます。

Ajax通信にもいろいろな手法があることを理解しましょう。

SHIFTフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。