Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
郵便番号APIに接続し郵便番号を入れると住所が自動入力されるようにする。
今回はzipcloudというサービスを利用させていただく。
●エクリプス新規動的プロジェクトからzipajaxlessonを作成する。
●proxyパッケージを作成し、その中に新規サーブレットZipProxy.javaを以下のように作成する。
proxy.ZipProxy.java
package proxy;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ZipProxy")
public class ZipProxy extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//リクエストパラメーター取得
String zip = request.getParameter("zip");
//APIのURLを元にURLインスタンス作成
URL url = new URL("http://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zip);
//接続
HttpURLConnection con = (HttpURLConnection) url.openConnection();
//通信方法指定
con.setRequestMethod("GET");
//内容を取得(スプーン)
InputStream is = con.getInputStream();
//スプーンからコップ
InputStreamReader isr = new InputStreamReader(is, "UTF-8");
//コップからバケツ
BufferedReader br = new BufferedReader(isr);
//文字列連結用のインスタンス作成
StringBuffer sb = new StringBuffer();
//一行分の文字列を格納する変数
String line;
//文末まで回すループ
while ((line = br.readLine()) != null) {
//行を文字列として連結していく
sb.append(line);
}
//コンテントタイプをjsonに指定
response.setContentType("application/json;charset=UTF-8");
//出力するためのインスタンス作成
PrintWriter out = response.getWriter();
//出力
out.print(sb.toString());
}
}
●続いてWebContentフォルダの直下にindex.htmlを以下のように作成する。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>郵便番号API|Ajax通信</title>
</head>
<body>
<label for="zip">郵便番号</label>
<input type="text" id="zip"><br>
<label for="address">住所</label>
<input type="text" id="address">
<script>
'use strict';
document.addEventListener("DOMContentLoaded",function(){
var address=document.getElementById("address");
var zip=document.getElementById("zip");
zip.addEventListener("keyup",function(){
if(zip.value.length >= 7){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data=JSON.parse(xhr.responseText);
address.value=data.results[0].address1+data.results[0].address2+data.results[0].address3;
}
}
};
xhr.open("GET","/zipajaxlesson/ZipProxy?zip="+zip.value);
xhr.send(null);
}
});
});
</script>
</body>
</html>
●フォームに郵便番号を入力してみよう。住所が自動入力される。
(今回は正常系のみを考慮した)
コメント