実践jQuery講座 Ajaxの実装方法
どうもこんにちは！InomaCreateのKoheiです。
今回は、jQueryのAjaxの実装方法を紹介したいと思います。
具体的には、Ajaxを使って、以下のような郵便番号を入力し、住所を表示する簡単なサイトを作ってみます。
※今回郵便番号検索については、無料で使える
解説動画
動画解説もあります。記事と合わせてどうぞ！
Ajaxとは？
Ajaxとは、Ajaxは「Asynchronous JavaScript And XML」 の略で、Javascriptでサーバー側と非同期通信を行う手法のことです。これだけだとよくわからないと思いますので、通常のホームページの表示とAjaxを利用した表示を比較して説明していきます。
通常のホームページの表示は、ブラウザからWebサーバーに対して、リクエストして、HTML,CSS,JavaScriptファイル等をブラウザ側へ返します。ブラウザは、受け取ったHTML,CSS,JavaScriptを元にページを表示します。
一方、Ajaxとは、JavaScript側がWebサーバーにリクエストして、応答データもJavaScript側で受け取る仕組みです。
これによって、ページ全体を書き換えなくても、ページの特定の部分のみ、表示を書き換えたりすることができる仕組みです。
※Ajaxは、JavaScriptで書くこともできますが、jQueryを使っても可能です。今回はjQueryで記載する方法を説明します。
今回作る郵便番号検索サイト 概要
では、実際に今回作成する郵便番号検索サイトの概要を説明します。
今回、郵便番号から住所を検索する仕組みは、
※API・・・ Application Programming Interface
今回は、zipcloudという無料のWebシステムを使います。これは、郵便番号のリクエストを渡すと、Webシステムが検索して住所情報の結果を返してくれるというシステムです。
まず作成するページ内で郵便番号を入力し、検索ボタンを押すと、Ajaxを使って、郵便番号データ配信サービス(zipcloud)へリクエストします。その際、入力した郵便番号コードを渡します。
郵便番号データ配信サービス(zipcloud)は、受け取った郵便番号から、住所を検索し、結果をJSONP形式で返します。
jQueryで受け取った住所情報をページに反映して表示させます。
このように、Ajaxを使うと、ページ全体を更新せずに、一部分のみ表示を書き換えることが可能です。
それでは、実際に実装していきましょう。
今回も練習素材を用意していますので、以下からダウンロードしてやってみてください。
実装
HTML部
まずは、HTML部分から実装します。
index.htmlに以下を追加しましょう。
16行目は、郵便番号を入力する欄です。17行目は、検索ボタンです。
18-19行目の”search_result”は、後から検索結果を挿入するためのdivタグです。jQuery側で参照します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/my_script.js"></script> </head> <body> <div class="container"> <main> <h1>WebAPIサンプル(郵便番号検索)</h1> <p>郵便番号を入力してください(※7桁半角英数字)</p> <input type="text" id="zip_code" value="" placeholder="郵便番号" maxlength="7"> <button type="button" id="search_button">検索</button> <div id="search_result"> </div> </main> </div> </body> </html>
jQuery部
続いて、my_script.jsを開き、以下を追加しましょう。
$(function(){
$("#search_button").click(function () {
// リクエストパラメータ作成
var param =
{
zipcode: $('#zip_code').val(),
limit:1
}
$.ajax({
type: "GET",
cache: false,
data: param,
url: "https://zipcloud.ibsnet.co.jp/api/search",
dataType: "jsonp",
success: function (data) {
if (data.status == 200) {
var result_txt = '';
if(data.results==null){
result_txt += '<div>該当する住所がありません</div>';
}
else {
result_txt += '<div>住所：'+data.results[0].address1+data.results[0].address2+data.results[0].address3+'</div>'+
'<div>カナ:'+data.results[0].kana1+data.results[0].kana2+data.results[0].kana3+'</div></br>';
}
$('#search_result').html(result_txt);
}
else {
$('#search_result').html(data.message); // エラー表示
}
}
});
});
});
2行目は、検索ボタンがクリックされたときに呼ばれる関数です。
この中に、ajax通信の処理を記載していきます。
まず、4行目〜8行目で郵便番号検索システム(zipcode)に対して渡すパラメータを設定します。
設定するパラメータは、今回利用するzipcodeの仕様に合わせて設定していきます。zipcodeのAPI仕様は、以下サイトを参考にしてください。
なお、limitは、1に設定しています。※limitは、郵便番号から複数の検索結果が出た場合の上限値です。今回簡略化するため、上限は1に設定します。
次に、10行目以降の$.ajax({ がajaxでデータを取得する処理です。
16行目以降が通信に成功したときに処理される関数です。
dataに実際zipcodeからの応答データが入っています。
どういう形式で情報が入っているかは、zipcodeのサイトに詳しく記載されています。
取得したデータを住所として、組み立てて、serarch_resultに挿入しています。
実装が終わったら、ファイルを保存して、ブラウザで起動してみましょう。
好きな郵便番号を入力して該当する住所が表示されればOKです。
最後に
以上、jQueryでAjaxを実装する方法を紹介しました。
Ajaxを使えば、ページの一部分のみの更新なので、通信量の削減や、ユーザービリティ向上が期待できると思います。
今回の記事でAjaxの仕組みが少しでも理解いただけたら幸いです。
それでは！！
