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を使って擬似的に時間がかかる処理にしている。なお、以下のようにクエリパラメーターで名前を渡すとその名前が表示されることも確認しておく。
●続いて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>
●受信ボタンを押してみよう。表が作成されれば成功だ。
コメント