Ajax

クライアント側

test.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

test.js（jQueryにより）

function verify(){

var jqueryObj = $("#userName");

var userName = jqueryObj.val();

var url = "login?name=" + encodeURI(encodeURI(userName));

// ★HTMLの場合（GET）

$.get(

convertURL(url),

null,

function (data){

var result = $("#result"); // 書き方１

result.html(data);

});

// ★HTMLの場合（POST）

$.post(

"login",

"name=" + encodeURI(encodeURI(userName)),

callback); // 書き方２

// ★XMLの場合

$.ajax({

type:"post",

url:"login",

data:"name=" + encodeURI(encodeURI(userName)),

dataType:"xml",

success:callbackXml

});

// ★JSONの場合

$.ajax({

type:"post",

url:"login",

data:"name=" + encodeURI(encodeURI(userName)),

dataType:"json",

success:callbackJson,

error: function(){

alert('fail');

}

});

// ★JSONPの場合

$.ajax({

type: "get",

async: false,

url: "login?name=" + encodeURI(encodeURI(userName)),

dataType: "jsonp",

jsonp: "callback",

jsonpCallback:"handler",

success: function(data){

var resultObj = $("#result");

resultObj.html(data.age + ' | ' + data.address);

},

error: function(){

alert('fail');

}

});

}

function callback(data){

var result = $("#result");

result.html(data);

}

function callbackXml(data){

var jqueryObj = $(data);

var msg = jqueryObj.children();

var text = msg.text(); //messageが配列

var resultObj = $("#result");

resultObj.html(text);

}

function callbackJson(data){

var resultObj = $("#result");

resultObj.html(data.age + ' | ' + data.address);

}

// キャッシュを防ぐため

function convertURL(url){

var timstamp = (new Date()).valueOf();

if(url.indexOf("?") >= 0){ //?があるかどうか

url += "&t="+ timstamp;

}else{

url += "?t="+ timstamp;

}

return url;

}

test.js（オリジナルのJavaScriptにより）

function verify(){

var userName = document.getElementById("userName").value;

if(window.XMLHttpRequest){

//firefox, Mozillor, Opera, Safari, IE7, IE8

xmlhttp = new XMLHttpRequest();

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXObject){

//IE6, IE5.5, IE5

var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

for( var i = 0;i < activexName.length;i++){

try{

xmlhttp = new ActiveXObject(activexName[i]);

break;

}catch(e){

}

}// if-else

if(!xmlhttp){

alert("XMLHttpRequestの作成が失敗");

return;

}

xmlhttp.onreadystatechange = callback;

// ★GETの場合

xmlhttp.open(

"GET",

"login?name=" + encodeURI(encodeURI(userName)),

true); // true:非同期

xmlhttp.send(null);

// ★POSTの場合

xmlhttp.open(

"POST",

"login",

true);

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlhttp.send("name=" + encodeURI(encodeURI(userName)));

}

function callback(data){

// 4：やり取りの処理が完了

if(xmlhttp.readyState == 4){

// 200：成功

if(xmlhttp.status == 200){

var responseText = xmlhttp.responseText;

var divNode = document.getElementById("result");

divNode.innerHTML = responseText;

}

★通信方法

Fetch API

A modern replacement for XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

fetch('/user?ID=12345', {

method: 'get'

})

.then(response => response.json())

.then(jsonData => console.log(jsonData))

.catch(err => {

...

}

var input = document.querySelector('input[type="file"]')

var data = new FormData()

data.append('file', input.files[0])

data.append('user', 'andy')

fetch('/upload', {

method: 'POST',

body: data

})

Axios

https://github.com/axios/axios

npm install axios

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

var input = document.getElementById('file');

var data = new FormData();

data.append('file', input.files[0]);

data.append('user', 'andy');

var config = {

onUploadProgress: function(progressEvent) {

var percentCompleted =

Math.round( (progressEvent.loaded * 100) / progressEvent.total );

}

};

axios.put('/upload', data, config)

.then(function (res) {

output.innerHTML = res.data;

})

.catch(function (err) {

output.innerHTML = err.message;

});

jQuery

$.ajax({

url: '/user?ID=12345',

type: "GET",

dataType: "json",

success: function (data) {

console.log(data);

}

fail: function () {

console.log("Error!")

}

});

var formData = new FormData();

formData.append('file', $('#file')[0].files[0]);

$.ajax({

url : '/upload',

type : 'POST',

data : formData,

processData: false,

contentType: false,

success : function(data) {

console.log(data);

}

});

サーバ側

web.xml

<servlet-name>MyServlet</servlet-name>

<servlet-class>com.test.servlet.MyServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>MyServlet</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>

MyServlet.java

public class MyServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public MyServlet() {

super();

}

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// ★HTMLの場合

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

if(name == null || name.length() == 0){

out.println("未入力！");

return;

}

name = URLDecoder.decode(name, "utf-8");

out.println("こんにちは, " + name + "様");

// ★XMLの場合

response.setContentType("text/xml;charset=utf-8");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

if(name == null || name.length() == 0){

out.println("未入力！");

return;

}

StringBuilder sb = new StringBuilder();

sb.append("<msg>");

name = URLDecoder.decode(name, "utf-8");

sb.append(name);

sb.append("</msg>");

out.println(sb.toString());

// ★JSONの場合

response.setContentType("application/json;charset=utf-8");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

if(name == null || name.length() == 0){

out.println("未入力！");

return;

}

String json = "{\"name\" : \"%s\",\"age\": 23,\"address\": \"東京\"}";

name = URLDecoder.decode(name, "utf-8");

out.println(String.format(json, name));

// ★JSONPの場合

response.setContentType("application/json;charset=utf-8");

PrintWriter out = response.getWriter();

String name = request.getParameter("name");

if(name == null || name.length() == 0){

out.println("未入力！");

return;

}

String json =

"handler({\"name\" : \"%s\",\"age\": 23,\"address\": \"東京\"});";

name = URLDecoder.decode(name, "utf-8");

out.println(String.format(json, name));

}

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

doGet(request, response);

}

★deferred

$.when($.ajax("test1.php"), $.ajax("test2.php"))

.done(function(){ ... })

.fail(function(){ ... });

或いは

$.when($.ajax("test.php"))

.then(successFunc, failureFunc);

※then(arg1)とdone(arg1)同様

//改善前

var $info = $("#xxx");

$.ajax({

url:"/service/json/",

data: {

json: JSON.stringify({

"name": "value"

})

},

type:"POST",

success: function(response){

$info.text(...);

}

});

//改善後

var $info = $("#xxx");

$.ajax({

url: "/service/json/",

data: {

json: JSON.stringify({

"name": "value"

})

},

type: "POST"

})

.then(function (response) {

$info.text(...);

})

.then(function () {

$info.append("...");

})

.done(function () {

$info.append("...");

});

或いは

.then(function (response) {

$info.text(...); // 成功の場合

},

function () {

$info.text("..."); // 失敗の場合

})

.always(function () { // Javaのfinallyに相当

$info.append("...");

});