-
728x90
AJAX는 Asynchronous JavaScript And XML의 약자로 자바스크립트를 이용하여 서버와 브라우저간 비동기적으로 데이터 교환을 할 수 있는 통신 방식의 개념이다.
AJAX를 사용하면 웹 페이지 일부만을 갱신하고자 할때 전체 페이지를 렌더링 할 필요없이 갱신이 필요한 부분만 로드하여 갱신하여 빠르고 다양하게 동작하는 동적 웹 페이지의 구현이 가능하다.
반면 서버에서 클라이언트로 먼저 요청할 수 없고, 페이지의 이동이 없기 때문에 히스토리가 남지 않고 반복적인 데이터를 요청하게 되면 느려지거나 작동하지 않을 수 있다.
AJAX를 구현하기 위한 절차 익히기
1. XMLHttpRequest 객체
XMLHttpRequest 객체는 Ajax의 가장 핵심적인 구성요소로 웹 브라우저가 서버와 데이터를 교환할 때, 백그라운드에서 지속적이고 비동기적인 서버 통신을 할 수 있는 기능을 제공한다. 페이지의 일부만을 업데이트 할 수 있도록 한다.
const xhr = new XMLHttpRequest();2. 서버에 request 전달
open()
서버에 보낼 AJAX 요청의 형식을 설정한다.
open(전달 방식, URL주소, 동기여부);- 전달방식 : get, post 방식 중 하나를 선택
- URL주소 : 요청을 처리할 서버의 파일 주소
- 동기여부 : 요청을 동기식으로 전달할지 비동기식으로 전달할지 선택(기본 : true, 비동기)send()
서버 요청시 전송데이터를 보낸다.
- GET 방식의 경우 URL에 붙여 보내므로 null 값으로 처리
- POST 방식은 데이터를 key-value로 저장하여 전달3. 서버로 받은 response 처리
Call Back 함수
XMLHttpRequest는 요청과 관련된 상태값을 저장하며 그 값이 변경시 마다 event를 발생시킨다.
xhr.onreadystatechange = function(){ ... }onreadystatechange : 요청에 대한 상태가 변화할 때 마다 발생하는 event를 처리한다.
readyState
request로 보낸 데이터 처리 상태를 나타내는 것으로 상태값 반환을 통해 서버로 부터 응답 여부를 확인 할 수 있다.
이때 XMLHttpRequest.DONE(‘4’)과 같다면 서버로 부터 정상적으로 응답처리할 준비가 되었음을 의미한다.
아래 표는 readyState의 상태값의 설명이다.
구분 설명 0(uninitialized) request가 초기화되지 않음 1 (loading) 서버와의 연결이 성사됨 2 (loaded) 서버가 request를 받음 3 (interactive) request(요청)을 처리하는 중 4 (complete) request에 대한 처리가 끝났으며 응답할 준비가 완료됨 status
XMLHttpRequest 객체가 접속한 서버페이지의 상태를 출력하며, 정상적인 호출은 200, 페이지가 없음은 404를 출력한다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title> </head> <body> <h2>Ajax</h2> <button onclick="sendRequest()">요청 보내기</button> <p id="text"></p> <script> function sendRequest(){ const xhr = new XMLHttpRequest(); xhr.open('GET', 'Ajax_ok.jsp?userid=son&userpw=777', true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ document.getElementById('text').innerHTML = xhr.responseText; } } } </script> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String userid = request.getParameter("userid"); // son String userpw = request.getParameter("userpw"); // 777 out.println(userid); // son out.println(userpw); // 777 %>
728x90'프로그래밍 > JSP' 카테고리의 다른 글
JSP 회원가입 만들기 (0) 2022.11.26 JSP 로그인 만들기 (0) 2022.11.25 세션(session) (0) 2022.11.21 쿠키(cookie) (0) 2022.11.18 HTTP Request/Response & GET/POST 방식 구현 (0) 2022.11.16