자바 스크립트 문법보다 AJAX를 사용하면 코드를 더 간략하게 사용할 수 있다.
jQuery 라이브러리에 있는 $.ajax() 메서드 사용하기.
□ $.ajax() == 비동기 처리를 구현할수있게하는 메서드
■ AJAX : 비동기적으로 데이터를 주고받는 기술. 즉, 페이지를 새로고침하지 않고도 서버와 데이터를 주고 받을 수 있음.
□ AJAX는 jQuery가 만든 것이 아니고, 자바스크립트의 원래 기능이다.
jQuery는 AJAX를 더 쉽게 사용할 수 있도록 도와주는 라이브러리일 뿐이다.
>> AJAX는 자바스크립트의 기본 기능이며, jQuery에 의존하지 않음.
$.ajax()를 사용하면 XMLHttpRequest보다 쉽게 AJAX를 사용할 수 있다!
최근에는 JQuery대신 fetch API를 많이 사용하는 추세.
페이지를 이동하지 않는 비동기 방식을 사용하고자 한다.
AJAX & jQuery 사용하는 절차
1. onkeydown 이벤트 등록
■ onKeydown : 사용자가 키를 눌렀을 때 이벤트 발생
<td>
<input type="text" name="mid" required onkeydown="check()">
</td>■ 키보드를 눌렀을 때 check() 함수가 발생한다.
2. check() 함수 선언
□ <body> 태그 안에 <script> 태그를 추가하여 check() 함수를 생성
function check() { // 입력, 출력
var mid = document.getElementsByName("mid")[0].value;
// name이 mid인 <input> 요소에서 값을 가져온다.
// s가 붙어있는데 그 이유는 여러개의 값이 있을 수 있기 때문. 배열이 오므로 인덱스로 받는다.
var result = document.getElementById("result") // HTML 요소를 불러오는 코드. ID값을 불러옴
}이건 자바스크립트 코드인데 자바 스크립트는 비동기 요청을 지원하지 않는다. 따라서 다양한 JS 라이브러리를 사용해야한다.
>> JS 라이브러리 중 하나인 jQuery 사용할 것.
function check() { // 입력, 출력
var mid = $("input[name='mid']").val();
// name='mid'인 input요소의 값을 받아와서 mid 변수에 저장
var result = $("#result"); // 제이쿼리로 요소 자체를 가져옴
// id로 설정했으니까 "#요소명"으로 가져옴
// 결과 메세지가 표시될 곳
}■ jQuery를 사용하면 JS 코드가 굉장히 짧아진다.
3. 결과를 보여줄 span 요소 추가
<td>
<input type="text" name="mid" required onkeydown="check()">
<span id="result"></span>
</td>■ 인라인 태그인 <span>을 추가하여 결과값을 보여줄 공간을 만들었다.
>> 인라인 태그이기 때문에 아이디 입력칸 바로 옆에 생성될 것
4. $.ajax() 메서드를 사용하기위한 jQuery 라이브러리를 등록해야함 == CDN
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">스크립트 가장 상위에 CDN에서 복붙해온 라이브러리를 import해온다. 외부 라이브러리 추가!
CDN에서 복붙만 하면 제이쿼리 라이브러리를 가져다 쓸 수 있다.
5. $.ajax() 메서드 활용
$.ajax({
url: "서버_주소", // 요청을 보낼 서버의 URL
type: "GET", // HTTP 요청 방식 (GET, POST, PUT, DELETE)
data: { key: "value" }, // 서버로 보낼 데이터
dataType: "json", // 서버에서 받을 데이터 타입 (json, text, xml 등)
success: function(response) {
console.log("응답 성공:", response);
},
error: function(xhr, status, error) {
console.log("에러 발생:", error);
}
});ajax의 기본 구조는 다음과 같다.
$.ajax({ // 제이쿼리 객체 표현. ajax 메서드를 쓴다.
type : "POST", // POST 형식으로 보낸다.
url : "/day031/check", // /프로젝트명/요청명(서블릿파일에서 설정한 요청명)
data : { mid : mid }, // 보내는 데이터
dataType : "text", // 받을(반환될) 데이터 타입
success : function(response){
console.log("비동기 처리 성공 ["+response+"]");
if(response == "true"){
result.text("아이디 사용 가능");
result.css("color","green");
}
else{
result.text("아이디 사용 불가능");
result.css("color","red");
}
},
error : function(){
console.log("에러 발생");
}
});
}
</script>
$.ajax(){} 는 AJAX 요청을 보낼 때 사용하는 메서드로, 비동기로 서버와 통신할 수 있다.
제이쿼리로 요소를 짧고 쉽게 불러올 수 있고, ajax로 비동기 처리를 구현할 수 있다.
AJAX 메서드 안에는
- 요청 타입
- 요청을 보낼 URL
- 서버로 보낼 데이터 : {key:value} 형태
- 요청 성공 시 실행할 함수
- 요청 실패 시 실행할 함수
를 작성한다.
6. 응답해줄 서버(.java, 서블릿 파일) 코드 생성
@WebServlet("/day031/check")
public class CheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("서버 도착 성공 ["+request.getParameter("mid")+"]");
PrintWriter out = response.getWriter();
if(new Random().nextInt(2)<=0) {
out.print("true");
}
else {
out.print("false");
}
}
}이 파일은 백엔드 코드.
@WebServlet 으로 객체를 생성해주고 ajax와 동일한 요청명을 작성하여 이 서블릿으로 요청이 오도록 한다.
위 AJAX 메서드에서는 POST 요청을 보내고 있으니 doPost() 는 쓰일 일이 없다. 하지만 만약을 대비해서 들어올 경우 doPost로 보내준다.
ajax 메서드가 POST요청을 보내므로 doPost() 메서드에서 구현을 한다.
① 서블릿(백)이 요청 확인
먼저 서버 도착에 성공했다는 점을 알기 위해 파라미터 값을 확인하는 로그를 남겨준다. 사용자의 요청(request)이므로 request.getParamener("데이터명")로 가져온다.
② 서블릿(백)이 처리 & 응답
랜덤 수로 성공하도록 한다. 만약 0이 나오면 "true"를 ajax로 보내 아이디 사용 가능을 띄우고, 1이 나오면 false를 보내 아이디 사용 불가를 띄운다.
③ AJAX(클라이언트)에서 응답 받아 처리
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("서버 도착 성공 ["+request.getParameter("mid")+"]");
PrintWriter out = response.getWriter();
if(new Random().nextInt(2)<=0) {
out.print("true");
}
else {
out.print("false");
}
}서블릿(백)에서 성공일 시에는 "true"를 출력하고, 실패일 시에는 "false"를 띄우도록 한댔으니 반응으로 true나 false가 오게 되는 것이다. (백에서 보내는 response 그대로 옴)
＊ 기본은 text. dataType 종류로는 "text", "json", "xml", "html", "script" 등이 있다.
json의 경우에는 데이터를 js 객체로 변환해서 돌려준다.
만약 true가 반환되면 텍스트는 사용 가능, 색은 그린으로 지정하며
false 반환 시 텍스트는 사용 불가능, 색은 레드로 지정한다.
만약 에러가 나면 에러 발생 로그를 띄운다.
공부하면서 추가로 찾아본 정보
1. JSP & SERVLET 대신 일반 JAVA 파일로 해도 되는가?
AJAX는 프론트엔드(브라우저)에서 실행되는 JS 코드로, 서버(백엔드)와 비동기 통신하기 위해 HTTP 요청을 보내고 응답받는다.
현재는 이 AJAX 요청(HTTP 요청)을 JSP/Servlet이 받아서 처리하고 응답하는 중.
일반 자바 파일로도 할 수 있지만, 일반 자바 파일이 스스로 서버로 작동할 수 없기 대문에 스프링 부트, 서블릿, REST API 등 서버 역할을 할 수 있는 것들이 있어야 한다. (일반 자바파일이 직접 HTTP 요청을 받을 수 없으니까)
>> 스프링 부트는 서버 기능까지 전부 포함된 프레임 워크. Tomcat 등을 다운받지 않아도 자체적으로 서버를 실행해준다. 다만, 스프링은 아님!! 스프링은 서버 기능을 하는 WAS를 설치해주어야 한다.
2. WAS (Web Applicaiton Server)
: 웹 서버 역할.
1) 웹 서버 : 웹 브라우저 클라이언트로부터 HTTP 요청을 받아들이고 HTML 문서와 같은 웹 페이지를 반환하는 프로그램
- 클라이언트가 웹 브라우저에서 어떠한 페이지 요청을 하면 웹 서버에서 그 요청을 받아서 정적 컨텐츠를 제공한다.
- 정적 컨텐츠란 단순 HTML 문서, JS, CSS 등.
- 동적 컨텐츠를 요청 받으면 WAS에게 해당 요청을 넘기고, WAS가 처리하여 그 결과를 클라이언트에게 전달한다.
2) WAS : 인터넷 상에서 HTTP 프로토콜을 통해 사용자의 컴퓨터나 장치에 애플리케이션을 수행해주는 미들웨어. 주로 동적 서버 컨텐츠를 수행하여 웹 서버와 구별되며, 주로 DB 서버와 같이 수행된다.
- 웹 서버와 웹 컨테이너가 합쳐진 형태
- 웹 서버 단독으로 처리할 수 없는 DB 조회, 다양한 로직 처리가 필요한 동적 컨텐츠를 제공함 -> 사용자의 다양한 요구 반영
- JSP, Servlet 등 구동환경을 제공해준다.
3. PrintWriter out = response.getWriter();
PrintWriter 객체 생성.
클라이언트(웹 브라우저)에게 데이터를 출력하기 위해 사용되는 코드.
웹 브라우저에 응답을 보낼 수 있는 출력 스트림을 생성.
'IT > Frontend' 카테고리의 다른 글
| 자바스크립트 공부 (1) | 2025.03.06 |
|---|---|
| [쉽게 배우는 H.C.J] Chapter 4 - 부트스트랩 (0) | 2025.03.04 |
| [쉽게 배우는 H.C.J] Chapter 4 - Advanced CSS 추가 기능 (0) | 2025.02.28 |
| [쉽게 배우는 H.C.J] Chapter 4 - 미디어 쿼리 (0) | 2025.02.28 |
| [쉽게 배우는 H.C.J] Chapter 4 - CSS 주요 속성과 값 (0) | 2025.02.26 |