AJAX는 대화형 웹 응용프로그램을 만들기 위한 웹 개발 기술이다.
기존 웹 애플리케이션은 동기 요청을 사용하면 서버와 정보를 전송한다.
폼 양식을 작성하고 제출을 누르면 서버의 새 정보가 있는 새 페이지로 이동한다는 의미이다.
하지만 AJAX를 사용한다면 자바스크립트가 서버에 요청하여 결과를 해석하여 현재 화면을 업데이트 하게 된다.
클라이언트는 이러한 화면 갱신 없이 데이터가 서버로 전성되었다는 사실을 알지 못해도 서버 데이터를 수신할 수 있게 된다.
AJAX는 서버 소프트웨어와는 별개의 독립적인 웹 브라우저 기술이며 기술 자체로는 프론트엔드로 분류가 된다.
하지만 서버 전송 이후 back-end와 연동되기 때문에 back-end와 혼동할 수 있다.
자바스크립트는 서버와 비동기 상호작용을 수행하기 위한 XMLHttp Request 객체를 이용한다.
AJAX의 장단점
장점
1. 웹 페이지의 속도 향상 (전체 갱신이 아닌 필요한 데이터만 받아서 처리하기에 동기 방식보다 속도가 빠르다.)
2. 서버에서 데이터만 전송하면 되므로 응답에 대한 코드 작성 양이 줄게 된다.
3. 기존 웹에서 불가능했던 다양한 기능을 가능하게 한다. (무한 스크롤, 아이디 중복확인 등)
단점
1. 연속적으로 데이터를 요청하면 서버 부하를 증가시킬 수 있다.
2. AJAX를 쓸 수 없는 브라우저에 대한 이슈가 있다.
<h3>simple string ajax</h3>
<input type="text" name="name" id="param">
<button onclick="sendName();">서버로 전송</button>
<br>
<p id="result"></p>
HttpRequest를 전송할 수 있는 객체를 생성한다.
지역 변수로 작성하는 것이 좋다.
서버의 응답에 따른 로직을 작성한다.
0 : request가 초기화 되지 않음
1 : 서버와 연결이 성사 됨
2 : 서버가 request를 받음
3 : request 요청을 처리하는 중
4 : request에 대한 처리가 끝났으며 응답할 준비가 완료됨(DONE)
지원 브라우저 여부나 이 외에도 다양하게 신경써서 처리해야하는 것들이 많아서 직접 javascript를 이용한다기 보다는 jquery를 이용하는 편이다.
전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align="center">javascript ajax</h1>
<h3>simple string ajax</h3>
<input type="text" name="name" id="param">
<button onclick="sendName();">서버로 전송</button>
<br>
<p id="result"></p>
<script>
function sendName(){
const httpRequest = new XMLHttpRequest();
const serverAddress = "/chap01/javascript";
httpRequest.onreadystatechange = function(){
/* 서버의 응답에 따른 로직을 여기 작성한다. */
if(httpRequest.readyState === XMLHttpRequest.DONE) {
if(httpRequest.status === 200) {
/* 응답 상태가 성공인 경우 */
document.getElementById('result').innerText = httpRequest.responseText;
} else {
/* 요구를 처리하는 과정에서 문제가 발생 되었음
400 or 500에 대한 처리를 주로 함 */
document.getElementById('result').innerText = '요청 응답에 실패하였습니다.';
}
}
};
let name = document.getElementById('param').value;
/* 요청 방식, 요청 url, 비동기 방식 사용 여부(true 기본값) */
httpRequest.open('GET', serverAddress + '?name=' + name);
httpRequest.send();
}
</script>
</body>
</html>
서블릿 코드
package com.greedy.section01.javascript;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/javascript")
public class JavascriptAjaxTestServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String output = name + "님 환영합니다.";
response.setContentType("text/plain; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(output);
out.flush();
out.close();
}
}
jQuery를 사용하면 브라우저 호환성을 고려하지 않아도 편리하게 ajax를 사용할 수 있다.
먼저 jquery를 사용하려면 jquery라이브러리가 있어야한다.
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
다운로드로 가서 CDN쪽으로 내려가서 GoogleCDN을 선택해준다.
3버전으로 복사해서 index.html에 붙여넣기한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" name="name" id="param">
<button id="sendServer">서버로 전송</button>
<br>
<p id="result"></p>
<script>
$("#sendServer").click(function(){
const name = $("#param").val();
$.ajax({
url : "/chap02/jquery",
data : { name : name },
method : "GET",
success : function(data, textStatus, xhr){
$("#result").text(data);
console.log(textStatus);
console.log(xhr);
},
error : function(xhr, status){
console.log(xhr);
console.log(status);
}
});
});
</script>
</body>
</html>
서블릿 생성
package com.greedy.section01.jquery;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/jquery")
public class JQueryAjaxTestServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String output = name + "님 환영합니다.";
response.setContentType("text/plain; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(output);
out.flush();
out.close();
}
}
'TIL > Ajax' 카테고리의 다른 글
| [Ajax] ajax 요청 후 stream을 이용한 문자열 응답 (0) | 2022.03.11 |
|---|
