はじめに
こんにちは。新卒２年目の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ファイルの中身が表示されました。
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-textにJsonファイルのlinkを表示しています。
おわりに
今回はAjaxについて基礎的な学習を行いました。
実践で使うことによってより理解が深まりますので、今回は手間を省くために会員登録の必要のない天気予報のAPIを利用しましたが、
次は使ってみたい外部のAPIを探し何か作ってみようと思います。
参考にした記事
http://javatechnology.net/ajax/biginer-start-up/javatechnology.net
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com
