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 |