Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
郵便番号APIに接続し郵便番号を入れると住所が自動入力されるようにする。

今回はzipcloudというサービスを利用させていただく。

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>

●フォームに郵便番号を入力してみよう。住所が自動入力される。
(今回は正常系のみを考慮した)