Ajax는 Asynchronous JavaScript and XML의 약자로, 웹 페이지에서 동적인 컨텐츠를 비동기적으로 로드하는 기술
이 기술은 기존에는 전체 페이지를 새로고침하여 데이터를 가져오던 방식을 대체할 수 있게 해준다.
Ajax는 JavaScript를 사용하여 웹 페이지와 서버 간의 데이터 교환을 수행함.
이 기술은 XMLHttpRequest 객체를 사용하여 서버로부터 데이터를 가져옴. 이를 통해 사용자는 웹 페이지를 새로고침하지 않고도 새로운 데이터를 받아볼 수 있음
Ajax는 많은 웹 사이트와 애플리케이션에서 사용되며, 구글 지도나 페이스북 등의 대형 서비스에서도 사용됨.
Ajax를 사용하고싶을때 넣어줘야하는 스크립트
<script src="js/httpRequest.js"></script>
<script>
function send() {
//form태그가 없어서 비어있는 함수로 만든다.
let dan = document.getElementById("dan").value;
//유효성 체크
//Ajax를 통해 dan을 파라미터로 전달
let url = "ex01_gugudan_ajax.jsp";
let param ="dan="+dan; //jsp변수 띄어쓰기 금지
// 콜백 메서드
sendRequest(url, param, resultFn, "GET");
}ex01_gugudan_ajax.jsp
로 넘어와서 파라미터를 전달받아 해결한 값(str)을 콜백메서드(resultFn)를 통해 자동 전달한다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//ex01_gugudan_ajax.jsp?dan=5
int dan = Integer.parseInt(request.getParameter("dan"));
//for문을 통해 html형태로 작성
String str = "";
for(int i = 1; i<=9; i++){
//변수에 값을 담을 수 있지만 printf와 같은 기능!
str += String.format( "%d X %d = %d<br>",dan,i,dan*i );
}
%><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%= str %>
</body>
</html>ex01_gugudan.jsp로 넘어와서
콜백메서드(Ajax로 요청된 결과를 처리하기 위한 메서드) 준비
function resultFn() {
//console.log( xhr.readyState + "/" + xhr.status );
// 필수적으로 사용
if( xhr.readyState == 4 && xhr.status == 200 ){
// 결과를 가지고 돌아온 데이터를 읽어온다.
let data = xhr.responseText;
//alert(data);
document.getElementById("disp").innerHTML = data;
}
}
</script>// xhr.readyState
// 0 : 초기화 오류
// 1,2,3 : 현재페이지 로드중
// 4 : 로드완료
// xhr.status
// 200 : 이상없음
// 404 : 경로 없음, 500 : 서버 에러
<body>
단 : <input id="dan">
<input type="button" value="결과보기" onclick="send();">
<br>
<div id="disp"> </div>
</body>
// 결과를 가지고 돌아온 데이터를 읽어온다.
let data = xhr.responseText;
alert(data);
'JSP' 카테고리의 다른 글
| [JSP_12 중요!] EL 표기법 (간결하게 jsp 표현 가능) (0) | 2023.03.20 |
|---|---|
| [JSP_11] JSON 표기법 (0) | 2023.03.20 |
| [JSP_09] 성적 관리 테이블 만들기 ( 생성, 추가, 삭제, 수정) (0) | 2023.03.16 |
| [jsp_05] JSP에서 JDNI연결 (0) | 2023.03.15 |
| [JSP_04] 이클립스(eclipse)에서 (데이터 베이스)DB 연동하기 전 개발 환경 설정 / DBCP = maxActive (0) | 2023.03.14 |
