[Web] - AJAX

sue·2024년 2월 8일

📒국비학원 [Web]

목록 보기

20/21

1. ajax 글자 띄우기

✏️ Test1.

💻 입력

아작스

⬇️ helloAjax.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	var xmlHttp;
	
	function ajaxRequest() {
		
		xmlHttp = new XMLHttpRequest();
		
		xmlHttp.open("get","helloAjax_ok.jsp",true);
		xmlHttp.onreadystatechange = viewMessage;
		xmlHttp.send(null);
		
	}
	
	function viewMessage() {
		
		var responseText = xmlHttp.responseText;
		
		var divE = document.getElementById("printDiv");
		
		divE.innerHTML = responseText;
		
	}

</script>



</head>
<body>


<h1>Hello AJax</h1>
<input type="button" value="클릭" onclick="ajaxRequest();"/>

<br/><br/>
<div id="printDiv" style="border: 1px solid red; width: 50%"></div>

</body>
</html>

⬇️ helloAjax_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>


어렵지만 재밌는 AJax!!!

2. "GET"방식으로 보내기

✏️ Test2.

💻 입력

⬇️ ajaxGetPost.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	var xmlHttp;
	
	function ajaxRequestGet() {
		
		xmlHttp = new XMLHttpRequest();
		
		var f = document.myForm;
		
		var data = f.greeting.value; //<input type="text" name="greeting"/> -> greeting을 뜻함
	
		if(data==""){
			alert("데이터를 입력하세요!");
			f.greeting.focus();
			return;
		}
		xmlHttp.open("GET", "ajaxGetPost_ok.jsp?greeting="+data,true); //비동기방식으로 보낼거임
		xmlHttp.onreadystatechange = viewMessage; //viewMessage = callback 함수 -> 함수 만들어야함
		xmlHttp.send(null);
	}

	function viewMessage() {
		
		var divE = document.getElementById("printDiv");
		
		if(xmlHttp.readyState==1||
				xmlHttp.readyState==2||
					xmlHttp.readyState==3){
			
			divE.innerHTML = "<img src='./image/processing.gif' width='50' height='50'/>" //지금 실행중이야~라는 이미지를 넣을거임
			
		}else if(xmlHttp.readyState==4){
			
			divE.innerHTML = xmlHttp.responseText; //받아서 뿌리면 됨
			
		}
		
	}
	

</script>


</head>
<body>

<h1>AJaxGetPost</h1>
<hr/>
<form action="" name="myForm">
	<input type="text" name="greeting"/>
	<input type="button" value="Get 전송" onclick="ajaxRequestGet();"/>
</form>

<div id="printDiv" style="border: 1px solid blue; widows: 50%"></div>


</body>
</html>

⬇️ ajaxGetPost_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//넘어오는 데이터가 있으니까 받아야함
	String greeting = request.getParameter("greeting");
	
	//임의로 처리시간 만들어주기
	for(int i=0;i<35000;i++){
		System.out.print("기다려..처리중...");
	}
	
%>

<%="server : " + greeting %>

	for(int i=0;i<35000;i++){
		System.out.print("기다려..처리중...");
	}

3. "POST"방식으로 보내기

✏️ Test3.

💻 입력

⬇️ ajaxGetPost.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	var xmlHttp; //여기에 3가지 객체가 들어가있음 (아래 if문 3개)
	
	function getXmlHttpRequest() { //누가 실행시키냐면 -> 스크립트 맨 아래쪽에 많이 적어둠
		
		if(window.ActiveXObject){
			
			//객체 생성 방법
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				
			} catch (e) {
				
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				
			}
		}else{
			
			xmlHttp = new XMLHttpRequest();
			
		}
	}
	
	function ajaxRequestGet() {

		var f = document.myForm;
		
		var data = f.greeting.value; //<input type="text" name="greeting"/> -> greeting을 뜻함
	
		if(data==""){
			alert("데이터를 입력하세요!");
			f.greeting.focus();
			return;
		}
		xmlHttp.open("GET", "ajaxGetPost_ok.jsp?greeting="+data,true); //비동기방식으로 보낼거임
		xmlHttp.onreadystatechange = viewMessage; //viewMessage = callback 함수 -> 함수 만들어야함
		xmlHttp.send(null);
	}

	function ajaxRequestPost() {

		var f = document.myForm;
		
		var data = f.greeting.value; //<input type="text" name="greeting"/> -> greeting을 뜻함
	
		if(data==""){
			alert("데이터를 입력하세요!");
			f.greeting.focus();
			return;
		}
		xmlHttp.open("POST", "ajaxGetPost_ok.jsp",true); //POST방식 -> 데이터 가지고갈 수 없음
		xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
		xmlHttp.onreadystatechange = viewMessage; 
		xmlHttp.send("greeting="+data);
	}
	
	
	function viewMessage() {
		
		var divE = document.getElementById("printDiv");
		
		if(xmlHttp.readyState==1||
				xmlHttp.readyState==2||
					xmlHttp.readyState==3){
			
			divE.innerHTML = "<img src='./image/processing.gif' width='50' height='50'/>" //지금 실행중이야~라는 이미지를 넣을거임
			
		}else if(xmlHttp.readyState==4){
			
			divE.innerHTML = xmlHttp.responseText; //받아서 뿌리면 됨
			
		}
		
	}
	
	//function getXmlHttpRequest() { // 얘가 실행시킴
	window.onload = function () {
		getXmlHttpRequest();
	}
	
	
	
</script>


</head>
<body>

<h1>AJaxGetPost</h1>
<hr/>
<form action="" name="myForm">
	<input type="text" name="greeting"/>
	<input type="button" value="Get 전송" onclick="ajaxRequestGet();"/>
	<input type="button" value="Post 전송" onclick="ajaxRequestPost();"/>
</form>

<div id="printDiv" style="border: 1px solid blue; widows: 50%"></div>


</body>
</html>

4. 유효한 아이디가 아닙니다

✏️ Test4.

💻 입력

⬇️ ajaxId.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	var xmlHttp = new XMLHttpRequest();
	
	function requestGet() {
		
		var f = document.myForm;
		
		var params = "?userId=" + f.userId.value;
		
		xmlHttp.open("GET", "ajaxId_ok.jsp" + params, true);
		xmlHttp.onreadystatechange = viewMessage;
		xmlHttp.send(null);
	}

	function viewMessage() {
		
		if(xmlHttp.readyState==4){
			
			if(xmlHttp.status=200){
				
				//위 조건에 맞을 때 데이터 받아내기 
				var str = xmlHttp.responseText;
				
				var divE = document.getElementById("resultDiv");
				
				divE.innerHTML =  str;
				
			}
		}else{
			
			var divE = document.getElementById("resultDiv");
			divE.innerHTML = "<img src='./image/loading.gif' width='15' height='15'/>"
		}
	}
	
</script>


</head>
<body>


<h1>Ajax ID 확인</h1>
<hr/>

<form action="" name="myForm">

아이디 : <input type="text" name="userId" onkeyup="requestGet();"/>
</form>

<div id="resultDiv" style="color: red; border: 1px solid; width: 40%"></div>

</body>
</html>

⬇️ ajaxId_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userId = request.getParameter("userId");
	String str = "";
	
	if(!userId.equals("")){
		
		if(userId.startsWith("suzi")){
			
			str = userId + "는 유효한 아이디 입니다";
		
		}else{

			str = userId + "는 유효한 아이디가 아닙니다";
		
		}
		
	}
	
%>


<%=str %>

5. 시간 보여주기 (서버시간 x)

```
`setTimeout("requestTime()",1000);` 
```

setTimeout : 자기자신을 내가 원하는 시간에 맞춰서 계속 반복되어서 실행하는 것

✏️ Test5.

💻 입력

⬇️ clock.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="<%=cp%>/data/js/ajaxUtil.js"></script>
<script type="text/javascript">

	//var xmlHttp = new XMLHttpRequest();
	
	function printClientTime() {
		
		var clientTime = document.getElementById("clientTime");
		
		var now = new Date();
		
		var timeStr = now.getFullYear() + "년 " + (now.getMonth()+1) + "월 " + now.getDate() + "일 " 
		+ now.getHours() + "시 " + now.getMinutes() + "분 " + now.getSeconds() + "초";
		
		clientTime.innerHTML = timeStr;
		
		setTimeout("printClientTime()",1000);
	}

	function requestTime(){
		
		//서버찾아가야함
		//xmlHttp.open("GET", "clock_ok.jsp",true);
		//xmlHttp.onreadystatechange = printServerTime;
		//xmlHttp.send(null);
		
		sendRequest("clock_ok.jsp", null, printServerTime,"GET");
		
		setTimeout("requestTime()",1000);
		
	}
	
	function printServerTime() {
		
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				
				var serverTime = 
					document.getElementById("serverTime");
				
				serverTime.innerHTML = xmlHttp.responseText;
				
			}
		}
		
	}
	
	
	window.onload = function () {
		printClientTime();
		requestTime();
	}

</script>
</head>
<body>

1.현재 클라이언트 시간은 <b><span id="clientTime"></span></b>입니다.<br/>
2.현재 서버 시간은 <b><span id="serverTime"></span></b>입니다.<br/>

</body>
</html>

⬇️ clock_ok.jsp

<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>

<%=new Date() %> <!-- 서버의 시간 -->

6.CSV

✏️ Test6.

💻 입력

csv : , 쉼표로 구분 / 서로 기종간의 호환을 위해
setTimeout(newsTitle,3000); : 계속 변하는거

⬇️ newsTitleCSV.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">

.news{
	font-size: 9pt;
	display: block;
	margin: 0 auto;
	background: lightgray;
	color: blue;
	border: 1px dashed black;
	width: 50%;
}

.newsError{
	font-size: 9pt;
	display: block;
	margin: 0 auto;
	background: orange;
	color: red;
	border: 1px dashed black;
	width: 50%;
}


</style>

<script type="text/javascript" src="<%=cp%>/data/js/ajaxUtil.js"></script>

<script type="text/javascript">

	function newsTitle() {
		
		//hideNewsTitle();
		
		sendRequest("newsTitleCSV_ok.jsp",null,displayNewsTitle,"GET");
		
	}
	
	function displayNewsTitle() {
		
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				
				var csvStr = xmlHttp.responseText;
				//alert(csvStr);
				
				var csvArray = csvStr.split("|");
				
				var countStr = csvArray[0];
				//alert(countStr);
				
				if(countStr==0){
					alert("News가 없다");
					return;
				}
				
				var csvData = csvArray[1];
					//alert(csvData);
					
				var newsTitleArray = csvData.split("*");
					//alert(newsTitleArray.length);
					
				var html = "";
				
				html += "<ol>";
				
				for(var i=0; i<newsTitleArray.length;i++){
					var newsTitle = newsTitleArray[i];
					html += "<li>" + newsTitle + "</li>";
				}
				
				html += "<ol>";
				//alert(html);
				
				var newsDiv = document.getElementById("newsDiv");
				newsDiv.innerHTML = html;
			}
		}
		
	}
	
	function showNewsDiv() {
		var newsDiv = document.getElementById("newsDiv");
		newsDiv.style.display = "block";
	}
	
	function hideNewsDiv() {
		var newsDiv = document.getElementById("newsDiv");
		newsDiv.style.display = "none";
	}
	
	window.onload = function() {
		newsTitle();
	}




</script>

</head>
<body>

<h2>헤드라인 뉴스</h2>

<hr/>
<br/>

<div onmouseover="showNewsDiv();" onmouseout="hideNewsDiv();" style="display: block; border: 3px solid; width: 50%; margin: 0 auto;">뉴스보기</div>

<div id="newsDiv" class="news"></div>

<hr/>

</body>
</html>

⬇️ newsTitleCSV_ok.jsp //뉴스기사


<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>


<!-- ! = 전역변수로 빠지기 -->
<%!

	String[] newsTitle = { 

			"김경율, 윤 대통령 '명품백' 입장에 '다섯글자로 아쉽습니다'",
			"명동 상권이 달라졌다… 외국인 관광객 증가에 '1위 상권' 탈환",
			"'저 성인인데요' 거짓말에 속아 술·담배 판매한 업주는 '구제'",
			"법원 '대통령실, 윤 대통령 부산 횟집 회식비 공개해야'",
			"가슴이 먹먹···얼음 침대 위 북극곰의 '불안한 쪽잠'",
			"'선거법 위반' 임종성, 징역 4월·집유 2년 확정···의원직 상실"
			
	};

	/*
	6|김경율, 윤 대통령 '명품백' 입장에 '다섯글자로 아쉽습니다'[2024-02-02 오후2:21]*
	명동 상권이 달라졌다… 외국인 관광객 증가에 '1위 상권' 탈환[2024-02-02 오후2:21]*
	.
	.
	.
	*/


%>


<%
	out.print(newsTitle.length + "|"); //배열안에 있는 데이터 6(줄)개가 들어옴 
	
	for(int i = 0; i<newsTitle.length;i++){
		out.print(newsTitle[i]+"[" + new Date() + "]");
		
		if(i!=(newsTitle.length-1)){
			out.print("*");
		}
		
		
	}

%>
---

![](https://velog.velcdn.com/images/_ddu2ni/post/7e9594ae-6932-4cf9-8ac0-c7a5d5dde074/image.png)



![](https://velog.velcdn.com/images/_ddu2ni/post/fa7b7e1f-2e97-458e-b331-e6713f1a1f3f/image.png)

---

sue

이전 포스트

[Web] - Spring tiles / AJAX

다음 포스트

[Web] - AJAX

📒국비학원 [Web]

1. ajax 글자 띄우기

2. "GET"방식으로 보내기

3. "POST"방식으로 보내기

4. 유효한 아이디가 아닙니다

5. 시간 보여주기 (서버시간 x)

setTimeout : 자기자신을 내가 원하는 시간에 맞춰서 계속 반복되어서 실행하는 것

6.CSV

[Web] - Spring tiles / AJAX

[Web] - DOM 객체 / JS

0개의 댓글