jQuery를 이용한 AJAX(Asynchronous JavaScript and XML)
jQuery를 이용한 AJAX는 웹 페이지에서 비동기적으로 서버와 데이터를 교환하는 기술을 뜻한다. jQuery는 AJAX 요청을 보내고 응답을 처리하는 데 사용되는 간편한 메소드와 기능을 제공한다.
사용방법
1. jQuery 라이브러리를 웹 페이지에 추가한다. <script> 태그를 사용하여 jQuery 라이브러리 파일을 포함시킬 수 있다.
예시)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
2. AJAX 요청을 보내고 응답을 처리할 JavaScript 코드를 작성한다. 일반적으로 jQuery의 $.ajax() 함수나 간편한 $.get() 함수 또는 $.post() 함수를 사용한다.
$.ajax({
url: 'server.php', // 요청을 보낼 서버의 URL
method: 'POST', // 요청 메소드 (GET, POST 등)
data: { name: 'John', age: 25 }, // 요청에 포함할 데이터
dataType: 'json', // 응답의 데이터 타입 - 요소값 : text, html, script, xml, json 등
success: function(response) {
// AJAX 요청이 성공했을 때 실행할 코드
console.log(response);
},
error: function(xhr, status, error) {
// AJAX 요청이 실패했을 때 실행할 코드
console.log('Error:', error);
}
});
$.ajax(settings) : AJAX 기능을 사용하여 웹프로그램을 요청하여 응답받아 처리하기 위한 메소드
→ 매개변수에는 AJAX 기능을 구현하기 위한 정보를 Object객체로 표현하여 전달한다.
→ 매개변수에 전달되는 Object 객체의 요소의 이름은 정해져 있으며 값 또는 함수로 요소값 표현
→ $.get() 또는 $.post() 메소드를 사용하여 AJAX 기능 구현 가능
$.post(url[, data][, success][, dataType]) : AJAX 기능을 사용하여 웹프로그램을 POST 방식으로 요청하여 응답받아 처리하기 위한 메소드
예제)
[welcome_one.jsp]
: [welcome_two.jsp] 문서를 AJAX 기능으로 요청하여 실행결과를 응답받아 태그를 변경하여 클라이언트에게 전달하는 JSP 문서
- jQuery 라이브러리의 AJAX 관련 메소드 사용
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<%-- jQuery 라이브러리 포함 --%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jQuery AJAX</h1>
<hr>
<label for="name">이름 : </label>
<input type="text" id="name">
<button type="button" id="btn">입력완료</button>
<hr>
<div id="message"></div>
<script type="text/javascript">
$("#btn").click(function() {
var name=$("#name").val();
if(name=="") {
$("#message").text("이름을 입력해 주세요.");
return;
}
$("#name").val("");
//$.ajax(settings) : AJAX 기능을 사용하여 웹프로그램을 요청하여 응답받아 처리하기 위한 메소드
$.ajax({
type: "post",//요청방식 설정 - 생략된 경우 GET 방식으로 요청
url: "welcome_two.jsp",//요청 웹프로그램의 URL 주소 설정
data: "name="+name,//요청 웹프로그램에게 전달할 값 설정
dataType: "html",//응답결과에 대한 문서형식 - 요소값 : text, html, script, xml, json 등
//정상적인 응답결과를 제공받아 처리할 명령을 작성하는 함수 설정 - 상태코드 : 200
// => 속성값으로 설정된 함수의 매개변수에는 자동으로 응답결과를 제공받아 저장
success: function(result) {
$("#message").html(result);
},
//비정상적인 응답결과를 제공받아 처리할 명령을 작성하는 함수 설정 - 상태코드 : 4XX or 5XX
// => 속성값으로 설정된 함수의 매개변수에는 자동으로 XMLHttpRequest 객체를 제공받아 저장
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
});
</script>
</body>
</html>
$.ajax() 메소드 대신 $.post() 메소드를 이용해 AJAX 기능 구현이 가능하다.
$.post("welcome_two.jsp", "name="+name, function(result) {
$("#message").html(result);
}, "html");
[welcome_two.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<%=name %>님, 환영합니다.
</body>
</html>
예제2)
[books_one.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- [books_two.jsp] 문서를 AJAX 기능으로 요청하여 실행결과를 XML 데이터로 응답받아 태그를
변경하여 클라이언트에게 전달하는 JSP 문서 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jQuery AJAX</h1>
<hr>
<div id="bookList"></div>
<script type="text/javascript">
$.ajax({
type: "get",
url: "books_two.jsp",
//요청 웹프로그램에 응답결과의 문서형태과 dataType 속성값이 맞지 않을 경우 200 에러코드 발생
dataType: "xml",
success: function(xmlDoc) {
//alert(xmlDoc);//[object XMLDocument]
var count=$(xmlDoc).find("book").length;
if(count==0) {
$("#bookList").html("<p>검색된 교재가 하나도 없습니다.");
return;
}
var html="<p>검색된 교재가 "+count+"권 있습니다.</p>";
html+="<ol>";
$(xmlDoc).find("book").each(function() {
var title=$(this).find("title").text();
var author=$(this).find("author").text();
html+="<li><b>"+title+"</b>["+author+"]</li>";
});
html+="</ol>";
$("#bookList").html(html);
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
</script>
</body>
</html>
[books_two.jsp]
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 책정보를 XML 형식의 데이터로 제공하는 JSP 문서 --%>
<books>
<book>
<title>Java의 정석</title>
<author>남궁성</author>
</book>
<book>
<title>JSP 웹프로그래밍</title>
<author>오정임</author>
</book>
<book>
<title>스프링 입문</title>
<author>유이치</author>
</book>
</books>
예제3)
[songs_one.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- [songs_two.jsp] 문서를 AJAX 기능으로 요청하여 실행결과를 JSON 데이타로 응답받아 태그를
변경하여 클라이언트에게 전달하는 JSP 문서 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jQuery AJAX</h1>
<hr>
<h2>음원챠트(<span id="now"></span> 현재 기준)</h2>
<div id="songList"></div>
<script type="text/javascript">
$.ajax({
type: "get",
url: "songs_two.jsp",
dataType: "json",
success: function(obj) {
//alert(obj);//[object Object]
$("#now").html(obj.now);
var html="<ol>";
$(obj.songs).each(function() {
html+="<li><b>"+this.title+"</b>["+this.singer+"]</li>";
});
html+="</ol>";
$("#songList").html(html);
},
error: function(xhr) {
alert("에러코드 = "+xhr.status);
}
});
</script>
</body>
</html>
[songs_two.jsp]
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 현재 날짜와 시간 및 음원챠트를 JSON 형식의 데이타로 제공하는 JSP 문서 --%>
<%
String now=new SimpleDateFormat("yyyy년 MM월 dd일 HH시").format(new Date());
%>
{
"now":"<%=now %>",
"songs":[
{"title":"퀸카(Queencard)", "singer":"(여자)아이들"},{"title":"I AM", "singer":"IVE(아이브)"}
,{"title":"Spicy", "singer":"aespa"},{"title":"이브, 프시케 그리고 푸른 수염의 아내", "singer":"LE SSERAFIM(르세라핌)"}
,{"title":"UNFORGIVEN(feat. Nile Rodgers)", "singer":"LE SSERAFIM(르세라핌)"},{"title":"Kitsch", "singer":"IVE(아이브)"}
,{"title":"헤어지자 말해요", "singer":"박재정"},{"title":"사랑은 늘 도망가", "singer":"임영웅"}
,{"title":"모래 알갱이", "singer":"임영웅"},{"title":"우리들의 블루스", "singer":"임영웅"}
]
}
'학원 > 복기' 카테고리의 다른 글
[AJAX] XSL 문서 / XSLT 예제 (0) | 2023.07.06 |
---|---|
[AJAX] jdbc 연결 / CDATA (0) | 2023.07.06 |
[AJAX] CSV / XML / JSON (0) | 2023.07.04 |
[AJAX] 브라우저 캐싱(Browser Caching) (0) | 2023.07.04 |
[AJAX] GET/POST 방식 요청 (0) | 2023.07.04 |