RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのエンジニアブログ

イベント詳細についてはこちらをクリック

jQueryを用いてAjaxの学習をした

はじめに

こんにちは。新卒2年目のtaku_76です。 今回はAjaxについてざっくりしたことしか分かっていなかったので少し時間を確保してコードから学習することにしました。

Ajaxとは

以下はWikipediaの引用です。

Ajax(エイジャックス[1][2]、アジャックス[3])は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である[4]。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る[5]。 AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた[5][6][7]。

他のサイトも見てみましたが、簡単に表すとJavaScriptを用いてサーバと非同期通信を行う手法で、 Ajaxを用いることでWebページの内容をリロードなしで変更することができます。

ローカル環境で実装してみる

まずは、ロジック理解のために通信先をローカルファイルにして実装してみます。

index3.html

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Ajaxを利用してローカルの外部ファイルを読み込む</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    //URL指定
                    url: 'sample.json',
                    //データ形式指定
                    dataType : 'json',
                    //通信に成功した場合の処理
                    success: function( data ) {
                        var message = jsonParser(data);
                        $( '#sample-text' ).html( message );
                        $( '#sample-text' ).html( obj.code );
                        $( '#sample-result' ).html( '<hr/><font color="blue">読み込み成功</font><hr/>' );
                    },
                    //通信に失敗した場合の処理
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG</font>' );
                    }
                } );
            }
        );
        $('#clear').click(function(){
            $( '#sample-text' ).html('');
            $( '#sample-result' ).html('');
        });
    } );
    function jsonParser(data) {
        var message = data.code;
        message = message + '<br/>';
        message = message + data.message;
        return message;
    }
</script>

</head>
<body>

    <h3>Ajaxを利用してjson形式のファイルを読み込みパースする</h3>
    <p>
        <input type="button" id="ajax-button" value="読み込む"/>
        <input type="button" id="clear" value="clear" onclick="OnButtonClick"/>
        <br/>
    </p>
    <div id="sample-result"></div>
    <div id="sample-text"></div>


</body>
</html>

以下が今回読み込むsample.jsonです。

{
    "code" : "100",
    "message" : "メッセージ"
}

Webブラウザで表示したのち、読み込むボタンを押すことによってjsonファイルの中身が表示されました。

f:id:taku_76:20190610235252p:plain
index3.html

Ajaxで外部APIへ通信する

以下のコードで外部のAPIへアクセスすることができます。 今回使用しているAPIは、地域毎の天気予報をJson形式で返すAPIです。 無料で会員登録無しで使うことができます。

    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    //天気予報をJson形式で返すAPI
                    url: 'http://weather.livedoor.com/forecast/webservice/json/v1?city=400040',
        //通信方法
                    type:'GET',
      //データ形式を指定
                    dataType : 'json',
                    //通信に成功した場合の処理
                    }).done(function(data){
                        alert("成功!");
                        $( '#sample-text' ).html( data.link );
                    //通信エラーになった場合の処理
                    }).fail(function(data){
                        alert("失敗!");
                    });
        });
    });

idがsample-textJsonファイルのlinkを表示しています。

おわりに

今回はAjaxについて基礎的な学習を行いました。
実践で使うことによってより理解が深まりますので、今回は手間を省くために会員登録の必要のない天気予報のAPIを利用しましたが、 次は使ってみたい外部のAPIを探し何か作ってみようと思います。

参考にした記事

javatechnology.net

Copyright © RAKUS Co., Ltd. All rights reserved.