1. Ajax란?
Asynchronous JavaScript and XML의 약자로, 페이지 새로고침 없이 JavaScript로 서버에 정보를 요청해서 받은 후 일부만 로드할 수 있게 하는 기법이다.
2. 예제 설명
XMLHttpRequest Ajax 버튼을 클릭하면, XMLHttpRequest을 이용해서 데이터를 주고받고,
jQuery Ajax 버튼을 클릭하면, jQuery의 $.ajax()를 이용해서 데이터를 주고받는 예제입니다.
서버 쪽은 Spring의 @RestController를 사용했습니다.
3. HTML 코드
<h3>XMLHttpRequest/jQuery Ajax</h3>
<button id="btnXMLHttpRequest">XMLHttpRequest Ajax</button>
<button id="btnjQuery">jQuery Ajax</button>
<div id="divAjax" style="width: 250px; height: 50px; margin-top: 5px; border: 1px solid black"></div>예제의 결과를 확인하기 위한 간단한 HTML 코드입니다.
4-1. XMLHttpRequest 코드
var btn = document.querySelector("#btnXMLHttpRequest");
btn.addEventListener('click', function(){
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function () {
var data = JSON.parse(oReq.responseText);
var div = document.querySelector("#divAjax");
div.innerHTML = data.result;
});
oReq.open("GET", "<%=request.getContextPath()%>/ajax?type=XMLHttpRequest");
oReq.send();
});XMLHttpRequest를 이용해서 /ajax에 type=XMLHttpRequest 파라미터를 GET방식으로 보낸 후, 받은 데이터를 divAjax에 표시합니다.
4-2. $.ajax() 코드
$("#btnjQuery").click(function(){
$.ajax({
url : "<%=request.getContextPath()%>/ajax",
data : "type=jQuery",
type : "GET",
success : function(data){
$("#divAjax").html(data.result);
}
});
});$.ajax()를 이용해서 /ajax에 type=jQuery 파라미터를 GET방식으로 보낸 후, 받은 데이터를 divAjax에 표시합니다.
4-1과 4-2의 코드는 같은 기능을 다른 방법을 이용해서 구현한 것입니다.
5. Controller 코드
@RestController
public class SampleController {
@GetMapping(path="/ajax")
public Map<String, Object> ajax(@RequestParam(name="type") String type){
Map<String, Object> map = new HashMap<>();
String result = type + " Ajax 요청 성공!";
map.put("result", result);
return map;
}
}파라미터로 받은 type 값 뒤에 " Ajax 요청 성공!"을 더해서 리턴합니다.
6. 전체 코드
sample.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax</title>
<script src="<%=request.getContextPath() %>/js/jquery-3.3.1.js"></script>
</head>
<body>
<h3>XMLHttpRequest/jQuery Ajax</h3>
<button id="btnXMLHttpRequest">XMLHttpRequest Ajax</button>
<button id="btnjQuery">jQuery Ajax</button>
<div id="divAjax" style="width: 250px; height: 50px; margin-top: 5px; border: 1px solid black"></div>
<script>
/* XMLHttpRequest를 이용한 Ajax */
var btn = document.querySelector("#btnXMLHttpRequest");
btn.addEventListener('click', function(){
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function () {
var data = JSON.parse(oReq.responseText);
var div = document.querySelector("#divAjax");
div.innerHTML = data.result;
});
oReq.open("GET", "<%=request.getContextPath()%>/ajax?type=XMLHttpRequest");
oReq.send();
});
/* jQuery를 이용한 Ajax */
$("#btnjQuery").click(function(){
$.ajax({
url : "<%=request.getContextPath()%>/ajax",
data : "type=jQuery",
type : "GET",
success : function(data){
$("#divAjax").html(data.result);
}
});
});
</script>
</body>
</html>
SampleController.java
package sample.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SampleController {
@GetMapping(path="/ajax")
public Map<String, Object> ajax(@RequestParam(name="type") String type){
Map<String, Object> map = new HashMap<>();
String result = type + " Ajax 요청 성공!";
map.put("result", result);
return map;
}
}'JavaScript' 카테고리의 다른 글
| JavaScript width, height 구하기, jQuery width(), height() 구하기 (0) | 2019.08.29 |
|---|---|
| 일반 함수의 this, bind()와 화살표 함수의 this 비교 (0) | 2019.08.22 |