안녕하세요 JJU_DEVELOPER입니다.
이번 시간에는 제이쿼리 비동기 방식 연동에 대해 알아보겠습니다.
제이쿼리에서 많이 쓰이는 부분으로 잘 알아보도록 하겠습니다~!
우리는 자바라는 랭귀지를 이용해서 WAS를 구현하고 DataBase 오라클을 사용하여 웹사이트를 구현할 것입니다.
<시작 전 준비사항>
1. 이클립스 설치
2. apache-tomcat-9.0.41 을 다운로드
3. 이클립스의 포트와 오라클의 포트가 같은지 확인하여 8080으로 오라클에서 사용하고 있으면
오라클의 포트 번호를 다른것으로 변경!
0. 서버 < - > 클라이언트 이 둘을 이어주는 그대...★
우선 아래 내용을 설명하기 전에 서버를 먼저 이해를 해보겠습니다.
수업에서 제이쿼리 비동기 방식 연동과 웹서버를 설치를 했는데...? 우선 기초가 없어서
왜??라는 물음표가 끊이질 않아, 기초 정리를 해두었으니 아래 글을 읽기 전 필수로
지식공유를 클릭하셔서 기초 개념을 숙지 후 보시길 추천드립니다~!
⭐지식공유⭐_클라이언트 사이드와 서버 사이드의 개념과 차이점 Client-side / Server-side & Ajax 장단
안녕하세요 jju_developer입니다. 오늘은 제이쿼리 비동기 방식 연동에 대해 설명하다가 따로 설명을 드려야 할 것 같은 정보가 있어서!! 글을 정리하여 적어봅니다~ 책을 읽다보면 서버사이드와 클
jju240.tistory.com
1. 제이쿼리 비동기 방식 연동
1-1 비동기 방식의 Ajax
컴퓨터에서 서버에 자료를 요청할 때 현재 보고 있는 페이지의 화면전환 없이 서버에 요청한 자료를 전송받을 수 있는 방법이 바로!!
비동기 방식 -> Ajax (Asynchronous Javascript and XML)의 메서드입니다.
현재 페이지가 아닌 외부에서 제공하는 XML(eXtensible Markup Language)이나 JSON(Javascript Object Notation) 파일의
데이터를 불러올 수 있습니다.
<동기방식?>
방문자가 자료를 요청하면 반드시 서버 컴퓨터를 거쳐야만 자료를 요청할 수 있습니다.
이 방식으로 자료를 요청하면 잠시 페이지가 서버 스크립트 페이지로 갱신되어 화면이 깜빡거리고(wait), 그동안 사용자는 어떤 작업도 할 수 없게 됩니다. 이러한 방식은 동기방식이라고 합니다.
그렇다면, 비동기 방식은 무엇일까요?
<비동기방식?>
Ajax를 사용해 방문자가 서버에 자료를 요청했을 경우,
서버 스크립트 페이지를 거치지 않아도 자료를 받아 올 수 있습니다.
즉 방문자(client)는 서버에 자료를 요청하는 사이에 다른 작업을 할 수 있습니다.
즉, 비동기화되어 기다리지 않고 다른 일을 할 수 있습니다.
[정리]
비동기 방식인 Ajax를 사용하여,
사용자가 Server에 자료를 요청할 경우 Server Script 페이지를 거치지 않아도 자료를 받아올 수 있습니다.
Client는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있습니다.
예시로 카페나 블로그 게시글에 댓글을 달 때 페이지 전환 없이 다는 것, 페이스북의 댓글 기능, 구글의 지도 등에 사용되고 있습니다. (즉, waitng time이 없습니다~!!)
1-2 웹 서버 설치하기
Web Server 웹 서버란?
- 컴퓨터를 웹사이트를 제공할 수 있게 서버로 만들어주는 서비스
- 대표적으로 아파치, NginX, IIS 등
웹 서버의 기본적인 역할
- 웹 서버가 운영하는 웹사이트를 방문한 클라이언트가, HTML, CSS, JSP 등의 파일을 볼 수 있도록 디렉터리를 개방
- 클라이언트가 특정 주소 입력 시 원하는 화면을 브라우저에서 출력하게 도와줌
- 기본적으로 정적인 웹 사이트를 제공
⭐Apache HTTPS : 웹서버(정적페이지만 지원)
위의 설명 중 웹 서버는 기본적으로 정적인 웹 사이트를 제공하여 동적인 웹 사이트는 웹 서버로 제공할 수없습니다!
그렇기 때문에 아파치를 이용해 동적인 웹사이트를 제공하는 것입니다.
예를 들어, 아파치랑 PHP, MySQL을 연동해 PHP 웹사이트를 제공할 수 있고,
이러한 방식을 APM 방식(Apache, PHP, MySQL)이라고 합니다.
그렇다면 톰캣은 무엇일까요?
톰캣을 이해하기 위해 우선 WAS에 대해서 간단히 설명하겠습니다.
Web Application Server WAS란?
- Web Application Server의 약자
- 자바, JSP 등으로 만든 웹 또는 API 애플리케이션을 실행할 때 사용
- 웹과 서버 사이의 애플리케이션
- 동적인 웹 사이트를 제공할 때 사용
⭐Apache Tomcat: (WAS) 웹 어플리케리션 서버(정적과 동적페이지를 지원)
위의 설명에서 WAS는 동적인 웹 사이트를 제공할 때 사용한다 하였고,
이것이 WAS의 핵심적인 역할입니다.
애플리케이션이라는 단어처럼, 웹과 서버 사이에서 동적으로 작동하는 프로그램을 WAS라고 합니다.
이러한 WAS의 역할을 하는 프로그램 중 하나가 바로 '톰캣'입니다.
톰캣은 완벽하게 WAS는 아니지만 WAS와 비슷한 역할을 수행합니다.
1-3 Apache Tomcat이란?
Apache Tomcat은 자바 서블릿을 이용하여 데이터 요청에 대한 응답을 자바코드로 처리하고, 해당 내용을 유저에게 리턴해주는 구조입니다.
Python을 이용한 Django, Ruby를 이용한 Ruby on Rails, Javascript를 이용한 Node.js 처럼
Apache Tomcat을 이용하여 Java를 이용한 웹 서비스를 생성할 수 있습니다.
현재, 다양한 기업들에서 이를 이용하여 다양한 웹 서비스를 생성하고 있습니다.
이때 서블릿(servlet)을 사용하는데, Sevlet이란 자바 웹 애플리케이션의 구성 요소 중 JAVA 언어를 사용하여 동적인 처리를 하는 역할을 담당합니다. 서블릿(servlet)은 WAS에 동작하는 JAVA 클래스이며, HttpServlet을 상속받아야 합니다.
동적 사이트를 제공할 때 아파치와 톰캣은 같이 사용됩니다.
클라이언트에 요청에 대한 응답 프로세스는 보통 다음과 같습니다.
클라이언트가 사이트에 동적인 요청을 하면
👇
WAS를 통해 동적인 요청을 처리하고
👇
아파치와 같은 웹서버가 처리된 요청을 제공
톰캣과 같은 WAS 프로그램은 단독으로 정적인 리소스나 동적인 요청에 대한 처리가 가능합니다.
앞서 말씀드렸듯이, 웹 서버 역시 정적 페이지뿐만 아니라 동적인 페이지의 처리도 가능합니다.
하지만, WAS와 웹 서버가 단독으로 사용 가능함에도, 여러 이유들 때문에 보통 웹 서버와 WAS를 같이 사용합니다.
※ php + apache (server), jsp + (apache) tomcat
※ php 언어는 아파치 서버에서만 작동하므로 아래 예제는 아파치 서버가 설치된 환경에서 테스트해야 작동합니다.
반면 jsp 언어는 tomcat에서 작동됩니다.
2. Ajax 관련 메서드
| 메소드 | 설명 |
| $.ajax() | 비동기식 Ajax를 이용하여 HTTP 요청을 전송함. |
| $.get() | 전달받은 주소로 GET 방식의 HTTP 요청을 전송함. |
| $.post() | 전달받은 주소로 POST 방식의 HTTP 요청을 전송함. |
| $.getScript() | 웹 페이지에 스크립트를 추가함. |
| $.getJSON() | 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음. |
| .load() | 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함. |
2-1 $.ajax() 메서드
jQuery는 Ajax와 관련된 다양하고 편리한 많은 메서드를 제공합니다.
그중에서도 $.ajax() 메서드는 모든 jQuery Ajax 메서드의 핵심이 되는 통합적인 메서드입니다.
$.ajax() 메서드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공합니다.
// 기본형
$.ajax({ url: "전송 페이지"(액션 페이지),
type: "전송 방식"(get, post 방식),
data: "전송할 데이터", dataType: "요청한 데이터 타입"("html","xml","json","text","jsonp"),
success: function(result){ 전송 성공하면 실행할 실행문들;
}
});
- url : 요청 URL (클라이언트가 HTTP 요청을 보낼 서버의 주소)
- settings : key/value 쌍으로 된 Ajax 요청 Set ( optional )
- url : 요청 URL (클라이언트가 HTTP 요청을 보낼 서버의 주소)
- data : 요청과 함께 서버에 보내는 string 또는 json
- success(data, textStatus, jqXHR) : 요청이 성공일 때 실행되는 callback 함수
- dataType : 서버에서 내려온 data 형식. ( default : xml, json, script, text, html )
<form action="member.jsp" method="post" name="member" id="member">
action에서 어디로 서버로 보내는지에 대한 주소가 있습니다.
<body>
<form action="member.jsp" method="post" name="member" id="member">
<fieldset>
<legend>회원가입</legend>
<p>
<label for="username">이름</label> <input type="text" name="username"
id="username" />
</p>
<p>
<label for="passwd">비밀번호</label> <input type="password"
name="passwd" id="passwd" />
</p>
<p>
<input type="submit" value="확인" />
</p>
</fieldset>
</form>
<h1 id="txt1"></h1>
</body>여기서
입력한 이름값이 name = "username"으로 넘어가는 것입니다.
이렇게 전달을 해서 이제 처리를 해야 하는 자바스크립트를 짜볼까요?
$(function() {
$("#member").on("submit",function(){
//폼에서 멤버를 제줄하게 되면 function을 실행해라!
let d = $(this).serialize();
});폼요소를 serialize 한다는 것은
username = jj240 & passwd = 1234 처럼 일렬로 d에 담겠다는 뜻입니다.
d에 어떻게 담겼는지 볼까요?
$(function() {
$("#member").on("submit",function(){
let d = $(this).serialize();
alert(d);
});
이제 ajax 메서드를 정의해 봅시다~!!
<전체 코드>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Ajax</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#member").on("submit", function() {
//폼에서 멤버를 제줄하게 되면 function을 실행해라!
let d = $(this).serialize();
alert(d);
$.ajax({
url : "welcome.jsp", //jsp 정의가 사전에 되어있다. 정의 : 환영합니다.
type : "post", //포스트 방식으로 데이터를 담는다.
data : d, // 전송할 데이터는 d다.
success : function(result) { //성공한것 : 환영합니다.를 result에 담는다.
$("#txt1").html(result); //html방식으로 담아라
}
});
return false;//form에 action 페이지로 이동하는 것을 차단한다.
});
});
//]]>
</script>
</head>
<body>
<form action="member.jsp" method="post" name="member" id="member">
<fieldset>
<legend>회원가입</legend>
<p>
<label for="username">이름</label> <input type="text" name="username"
id="username" />
</p>
<p>
<label for="passwd">비밀번호</label> <input type="password"
name="passwd" id="passwd" />
</p>
<p>
<input type="submit" value="확인" />
</p>
</fieldset>
</form>
<h1 id="txt1"></h1>
</body>
</html><welcome,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>Insert title here</title>
</head>
<body>
환영합니다. ${param.username}님
</body>
</html>앞으로도 주로 ajax를 통해서 서버 쪽에 요청을 할 것입니다.
서버쪽에 받은 데이터를 result에 담고 내가 원하는 콘텐츠 부분에 보이게끔 하는 코드입니다~!
GET 방식은 파라미터가 다 보이고
POST 방식은 GET 방식과는 다르게 URL에 파라미터를 담지 않고, 데이터를 http메시지의 body에 담아서 전송합니다.
2-2 .load() 메서드
load() 메서드는 선택한 요소에서 호출하는 유일한 jQuery Ajax 메서드입니다.
load() 메서드는 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 표시합니다.
또한, 선택자를 URL 주소와 함께 전송하면, 읽어 들인 HTML 코드 중에서 선택자와 일치하는 요소만을 배치합니다.
// 기본형
$(요소 선택).load(url, data, 콜백 함수)
$(function() {
$("#d1").load("document_1.txt");
});
현재 있는 파일에서는 바디의 내용은 '내용'밖에 없습니다.
하지만 load를 통해서 다른 document에 있는 텍스트를 가져올 때 사용하면 됩니다.
2-3 . $.post() 메서드
아까 위에서 serialize 했던 방식을 하나씩 문장을 만들어서 읽는 방법입니다.
<script type="text/javascript">
/*
- $.post() 함수는 post방식으로 서버와 통신하는 jQuery 함수이다.
- $.post() 함수는 서버의 welcome.jsp 페이지를 post방식으로 요청한다.
*/
$(function() {
$("#member").on("submit", function() {//"확인"버튼을 눌렀을 때..
let username = $("#username").val(); // 서버로 보낼 데이터를 입력창에서 얻어온다.
let passwd = $("#passwd").val();
let sendData = 'username=' + username + '&passwd=' + passwd;
alert(sendData);
$.post( // 문자열 형식의 데이터를 welcome.jsp 파일로 보낸다.
"welcome.jsp", sendData, function(msg) {
$('#txt1').html(msg);
});
return false;
});
});
</script>결과는 $.ajax() 메서드의 예제와 동일합니다.
2-4 $.get() 메서드
다큐멘터리가 준비가 되면 바로 실행을 하는데,
겟방식으로 실행합니다.
$.get('item.xml', function(data) {
->서버 쪽에 있는 xml이라는 형태로 된 데이터 저장 불러온다는 뜻입니다.
다 불러오면 (data)라는 게 서버 쪽에서 온 xml 파일에 있는 내용을 받을 수 있습니다.
$(function() {
$.get('item.xml', function(data) {
$("#treeData").append(
"<tr><td>id</td>" + "<td>name</td>"
+ "<td>price</td>" + "<td>description</td>" + "</tr>");
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
let $item = $(this); // 6개의 item태그중 현재 처리중인 item태그를 this로 접근한후에 이를
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
});
});
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>여기서 data가 xml에 있는 모든 데이터라는 점을 명심하시고 코드를 보셔야 합니다.
<코드해석>
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
-> xml에 있는 것 아이템을 하나씩 찾는다.
let $item = $(this);
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
treeData는 테이블입니다.
각각의 아이템들의 이름을 적어서 그거에 해당되는 내용을 가져온 것입니다.
만약 우리가 강사님이 만든 서버의 주소를 구글에 똑같이 입력한다면 접속이 가능한가요?
넵, 동일하게 접속하여 볼 수 있습니다.
접속한 우리가 클라이언트, 강사님 컴퓨터가 서버가 되는 것입니다.
결과적으로 Ajax는 브라우저에서 돌아가는 것이고(원하는 위치에 브라우저에 띄워줌) 따라서
클라이언트에서 사용하는 것입니다. (때로는 프런트에서 사용한다고도 하죱)
2-5 $.getJSON() 메서드
get방식으로 요청하고 응답을 jason 형식으로 받을 때 사용합니다.
우리가 ajax는 요청, 전송방식, 데이터, 데이터 타입에서 받는 데이터 타입을 지정했는데,
getJSON방식은 이미 보낼 때는 get방식, 받는 것은 JSON방식으로 받겠다고 정해놓은 것입니다.
제이슨 데이터는 보시다시피, 키와 벨류로 구분되어 XML보다 용량을 줄일 수 있습니다.
$(function() {
$.ajax({
url : "rank.json", //데이터를 요청할 URL 주소
dataType : "json", //데이터 타입 설정
success : function(result) { //데이터 성공적으로 요청되었을 때...
$.each(result.rank, function(i, d) {
$("#wrap ol").append("<li>" + d["k"] + "</li>");
})
}
});
3. XML 데이터 요청하기
XML은 HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)입니다.
이 언어는 사람과 기계가 동시에 읽기 편한 구조로 되어 있습니다.
그러나 XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로만 만들어졌습니다.
또한, XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의할 수 있습니다.
<정리>
XML은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있습니다.
XML은 주로 데이터를 배포하는 목적으로 사용됩니다.
XML의 특징
XML의 중요한 특징은 다음과 같습니다.
1. XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어입니다.
2. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해줍니다.
3. XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋습니다.
4. XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 합니다.
5. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어집니다.
▶ XML 주석
- <!-- 으로 시작하여 -->으로 끝난다.
- 시작태그에는 느낌표가 있지만 종료 태그에는 느낌표가 없다.
▶CDATA
- Character DATA의 약자이다. 문자 데이터를 XML 데이터로 해석하지 않고 그대로 표현하는 것을 의미한다.
- <![CDATA[ 특수문자 혹은 노출하고 싶은 문자열을 적어준다 ]]>
- <![CDATA[ 와 ]]> 에는 공백을 포함하면 안 된다.
▶ XML 요소
- 아래처럼 시작과 종료 태그로 한 쌍이 되어야 한다.
- <시작태그명> 요소내용 </종료태그명>
XML의 주요 예시는 다음시간에 계속 이어서 진행하겠습니다~!!
그럼 지금까지 제이쿼리(jQuery) 비동기 방식 연동, Apache Tomcat설명 및 Ajax에 대한 주요 메서드에 대해서
간단한 예시와 함께 살펴보았습니다.
오늘도 수고하셨습니다 ^.^)/
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| [JSP] 전화번호 입력시 자동 하이픈 넣기 (0) | 2024.06.27 |
|---|---|
| 자바스크립트(JavaScript) 사용자 환경 개발 예제 (0) | 2023.01.16 |
| ⭐지식공유⭐_클라이언트 사이드와 서버 사이드의 개념과 차이점 Client-side / Server-side & Ajax 장단점, 구성요소 총정리!!! (4) | 2023.01.14 |
| 제이쿼리(jQuery) 이벤트 등록 메서드, 마우스, 키보드, 포커스 이벤트 개념 및 종류 설명!! (0) | 2023.01.12 |
| 제이쿼리(jQuery) 객체 조작, 속성 조작 메서드 (0) | 2023.01.12 |