Ajax通信

JavaScript

Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。
今回サーバーサイドはJavaを利用する。

●エクリプス新規動的プロジェクトからajaxlessonを作成する。

●新規サーブレットからcontroller.Hello.javaを以下のように作成する。
controller.Hello.java

package controller;

import java.io.IOException;
import java.io.PrintWriter;

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("/Hello")
public class Hello extends HttpServlet {
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String name=request.getParameter("name");
		name=name==null? "名無し":name;
		try {
			Thread.sleep(2000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		response.setContentType("text/plain;charset=UTF-8");
		PrintWriter out=response.getWriter();
		out.print("こんにちは"+name+"さん");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);
	}

}

●サーバーで実行してみよう。「こんにちは名無しさん」と表示されれば成功だ。Thread.sleepを使って擬似的に時間がかかる処理にしている。なお、以下のようにクエリパラメーターで名前を渡すとその名前が表示されることも確認しておく。


無効なURLです

●続いてWebContentフォルダの直下にgetSample.htmlを以下のように作成する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax体験</title>
</head>
<body>
<form>
名前:<input type="text" id="name">
<input type="button" id="btn"  value="送信">
</form>
<div id="result"></div>
<script>
'use strict';
//DOMContentLoadedはwindow.onloadとほぼ同じだが、画像の読み込みを待たない。
//画像を読み込んでから処理を走らせたいばあいはonload,そうでない場合はこちらを使うとよい
document.addEventListener("DOMContentLoaded",function(){
	document.getElementById("btn").addEventListener('click',function(){
		var result=document.getElementById("result");
		//XMLHttpRequestオブジェクト生成
		var xhr=new XMLHttpRequest();
		//onreadystatechangeは通信の状態が変化したときに走る
		//0...未初期化,1...ロード中,2...ロード済み,3...一部の応答を取得,4...すべての応答データを取得
		xhr.onreadystatechange=function(){
			if(xhr.readyState===4){//通信が完了したとき
				if(xhr.status===200){//正常に通信できたら
					result.textContent=xhr.responseText;//テキストとして取得し、resultに反映させる
				}else{
					result.textContent="サーバーエラーが発生しました。";
				}
			}else{
				console.log("readyState:"+xhr.readyState);
				result.textContent='通信中・・・';
			}
		};
		//通信準備
		xhr.open('GET','/ajaxLesson/Hello?name='+encodeURIComponent(document.getElementById('name').value));
		//通信開始(引数はpost通信の時にパラメータを指定する。)
		xhr.send(null);
	});
});

</script>
</body>
</html>

●続いてAjaxでポスト通信をしてみる。postSample.htmlを以下のように作成(先ほどとの違いは下部のみ)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax体験</title>
</head>
<body>
<form>
名前:<input type="text" id="name">
<input type="button" id="btn"  value="送信">
</form>
<div id="result"></div>
<script>
'use strict';
//DOMContentLoadedはwindow.onloadとほぼ同じだが、画像の読み込みを待たない。
//画像を読み込んでから処理を走らせたいばあいはonload,そうでない場合はこちらを使うとよい
document.addEventListener("DOMContentLoaded",function(){
	document.getElementById("btn").addEventListener('click',function(){
		var result=document.getElementById("result");
		//XMLHttpRequestオブジェクト生成
		var xhr=new XMLHttpRequest();
		//onreadystatechangeは通信の状態が変化したときに走る
		//0...未初期化,1...ロード中,2...ロード済み,3...一部の応答を取得,4...すべての応答データを取得
		xhr.onreadystatechange=function(){
			if(xhr.readyState===4){//通信が完了したとき
				if(xhr.status===200){//正常に通信できたら
					result.textContent=xhr.responseText;//テキストとして取得し、resultに反映させる
				}else{
					result.textContent="サーバーエラーが発生しました。";
				}
			}else{
				console.log("readyState:"+xhr.readyState);
				result.textContent='通信中・・・';
			}
		};
		
		//通信準備(POST)
		xhr.open('POST','/ajaxLesson/Hello');
		//コンテントタイプを指定する
		xhr.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=UTF-8');
		//通信開始(パラメータをkey=val&...で渡す)
		xhr.send('name='+encodeURIComponent(document.getElementById('name').value));
	});
});

</script>
</body>
</html>

JSONを返却するサーバーサイド作成

●下からgson.jarファイルをダウンロード


●WEB-INF/lib/ファルダのにgson.jarをコピペで配置する。
●modelパッケージを作成しその中にPerson.javaを以下のように作成する。

package model;

import java.io.Serializable;

public class Person implements Serializable{
	private String name;
	private int age;
	public Person(){}
	public Person(String name,int age){
		this.name=name;
		this.age=age;
	}
}

●controllerパッケージ内に新規サーブレットPersonAPI.javaを以下のように作成する。

package controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import model.Person;

@WebServlet("/PersonAPI")
public class PersonAPI extends HttpServlet {
	 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Gson gson=new Gson();
		List<Person> list=new ArrayList<>();
		list.add(new Person("John",21));
		list.add(new Person("Paul",19));
		String json=gson.toJson(list);
		response.setContentType("application/json;charset=UTF-8");
		PrintWriter out=response.getWriter();
		out.print(json);
	}	
}

●WebContentの直下にgetJson.htmlを以下のように作成する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getJson</title>
</head>
<body>
<button id="btn">受信</button>
<table id="table" border="1"></table>
<script>
'use strict';
document.addEventListener('DOMContentLoaded',function(){
	var table=document.getElementById("table");
	document.getElementById('btn').addEventListener("click",function(){
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.readyState===4){
				if(xhr.status===200){
					var data=JSON.parse(xhr.responseText);
					if(data===null){
						console.log("parseErr");
					}else{
						for(var i=0;i<data.length;i++){
							var tr=document.createElement("tr");
							var td=document.createElement("td");
							td.textContent=data[i].name;
							tr.appendChild(td);
							td=document.createElement("td");
							td.textContent=data[i].age;
							tr.appendChild(td);
							table.appendChild(tr);
						}
						
					}
				}else{
					console.log("err");
				}
			}
		};
		xhr.open("GET",'/ajaxLesson/PersonAPI');
		xhr.send(null);
	});
});


</script>

</body>
</html>

●受信ボタンを押してみよう。表が作成されれば成功だ。

コメント

タイトルとURLをコピーしました