JavaScript [Javascript, ajax] XMLHttpRequest, jQuery Ajax 예제

2021.05.17 12:52

졸리운_곰 조회 수:597

[Javascript, ajax] XMLHttpRequest, jQuery Ajax 예제

Asynchronous JavaScript and XML의 약자로, 페이지 새로고침 없이 JavaScript로 서버에 정보를 요청해서 받은 후 일부만 로드할 수 있게 하는 기법이다.

XMLHttpRequest Ajax 버튼을 클릭하면, XMLHttpRequest을 이용해서 데이터를 주고받고,

jQuery Ajax 버튼을 클릭하면, jQuery의 $.ajax()를 이용해서 데이터를 주고받는 예제입니다.

서버 쪽은 Spring의 @RestController를 사용했습니다.

	`<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 코드입니다.

	`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에 표시합니다.

	`$("#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의 코드는 같은 기능을 다른 방법을 이용해서 구현한 것입니다.

	`@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 요청 성공!"을 더해서 리턴합니다.

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;`
	`}`

	`}`