AJAX를 이용해 서버에서 계산하여 결과 출력하기

web.xml -> index.html 파일만 남기고 다 삭제

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
  <display-name>AJAX</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

index.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX연습</title>
</head>
<body>
<h1>1부터 빈칸에 적은 숫자까지 총합은?</h1>
<input type="text">
<button onclick="sendServer();">계산하기</button>
<div id="output"></div>
<script>
//입력창
const input = document.querySelector('input[type="text"]');
//출력할 태크
const output = document.getElementById('output');

//AJAX를 사용하기 위한 객체
const request = new XMLHttpRequest(); //ajax 객체 생성

//버튼을 누르면 아래 함수가 실행된다.
	    function sendServer() {
      //버튼을 누르면 ajax로 서버로 http 요청
      let v = input.value;
      let url = "sum.jsp?val=" + v;  // 서버 요청 주소와 파라미터로 입력한 값을 보냄
      request.open('GET', url, true); //Get메소드, 요청주소 설정
      request.send(); //요청함
      request.onreadystatechange = function () {
    	  //요청단계가 성공적이면 결과를 받음 . 
        if (request.readyState == 4 && request.status == 200) {
          let val = request.responseText; //서버로부터 받은 요청 결과
          console.log(val);// 콘솔에 확인. 
        }
      }
    }
</script>
</body>
</html>

sum.jsp 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//var 파라미터 받기
	String val = request.getParameter("val");
	int n = Integer.parseInt(val);//숫자로 변환
	//out.println(n); 파라미터로 전송받은 값이 잘 출력되는지 확인하기 (확인완료)
	int total = 0;
	for(int i = 1; i<=n ; i++){
		total += i;
	}
	out.print(total); //총합을 결과로 출력=> AJAX로 결과 받아감
%>

1) 파라미터 전송받은 값 잘 출력되는지 확인 하기

화면은 바뀌지 않고 데이터만 왔다 갔다함

응답을 자바스크립트로 받아서 콘솔에 출력

index.html

console.log(val) => output.textContent=val; 로 수정

화면출력

출처 : https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest.

(request.readyState == 4 && request.status == 200) 에 대한 내용

readyState 4 = 데이터를 전부 받은 상태 , status 200= 요청 성공

출처 : https://blog.naver.com/shdlsdo/220590134013

httpRequest.readyState==4 란 무엇인가?

httpRequest.status==200 * onreadyStateChange에 등록된 callback 함수는 readyState라는 프로퍼티의 ...

blog.naver.com

참고하기 : http://www.tcpschool.com/ajax/ajax_server_response

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

Integer.parseInt 관련 내용

https://colossus-java-practice.tistory.com/32

[자바 프로그래밍 기초] 5. Integer.parseInt(String타입의 값)

오늘은 지난 번 charAt()에 이어서 또다른 변환방법에 대해서 알아볼 것이다. 이번에도 String타입을 이용해 다른 형태로 변환시키는 것이다. 1. parseInt()란? 이전에 봤던 charAt()은 String타입의 문자열

colossus-java-practice.tistory.com

'FRONTEND > 기타' 카테고리의 다른 글

id로 DB검색하여 결과 출력 (0)	2023.10.04
AJAX로 구구단 출력 (1)	2023.10.04
JSON 란? (0)	2023.10.04
색상 코드 사이트 (0)	2023.09.26
무료 아이콘 및 무료 사진 다운로드 사이트 (0)	2023.09.26

'FRONTEND > 기타' 카테고리의 다른 글

티스토리툴바