[AJAX] jQuery를 이용한 AJAX 사용

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

개뿌

[AJAX] jQuery를 이용한 AJAX 사용

jQuery를 이용한 AJAX(Asynchronous JavaScript and XML)

'학원 > 복기' 카테고리의 다른 글

티스토리툴바

[AJAX] jQuery를 이용한 AJAX 사용

jQuery를 이용한 AJAX(Asynchronous JavaScript and XML)

'학원 > 복기' 카테고리의 다른 글

'학원/복기' Related Articles

티스토리툴바