Light Purple Pointer

index.html ๋ณต์‚ฌํ•ด์„œ 

ex1.html ์ƒ์„ฑ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX์—ฐ์Šต</title>
</head>
<body>
<h1>์›ํ•˜๋Š” ๊ตฌ๊ตฌ๋‹จ์˜ ์ˆซ์ž?</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 = "gugu.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);// ์ฝ˜์†”์— ํ™•์ธ. 
         output.innerHTML=val;//<br>๊ฐ™์€ ํƒœ๊ทธ๋„ ๊ฐ™์ด ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•จ
        }
      }
    }
</script>
</body>
</html>

 

 

gugu.jsp ์ƒ์„ฑ

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	//์ „๋‹ฌ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐ›์•„ ์ˆซ์ž๋กœ ๋ณ€ํ™˜
	String val = request.getParameter("val");
	int n = Integer.parseInt(val);

	for(int i = 1; i<=9 ; i++){
		String s = String.format(" %d X %d = %d <br/>", n, i, n*i );
		out.print(s);
	}
%>

 

 

๊ฒฐ๊ณผ ์ถœ๋ ฅ

 

 

์ถœ๋ ฅํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๊ฒฝ์šฐ ์ž…๋ ฅ์ฐฝ ์ดˆ๊ธฐํ™” ํ•˜๊ณ  , ํฌ์ปค์Šค ์žก๊ธฐ

 

ex1.html ์ถ”๊ฐ€

         input.value = '';
         input.focus();

 

'FRONTEND > ๊ธฐํƒ€' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

jQuery ?  (1) 2023.10.05
id๋กœ DB๊ฒ€์ƒ‰ํ•˜์—ฌ ๊ฒฐ๊ณผ ์ถœ๋ ฅ  (0) 2023.10.04
AJAX๋ฅผ ์ด์šฉํ•ด ์„œ๋ฒ„์—์„œ ๊ณ„์‚ฐํ•˜์—ฌ ๊ฒฐ๊ณผ ์ถœ๋ ฅํ•˜๊ธฐ  (0) 2023.10.04
JSON ๋ž€?  (0) 2023.10.04
์ƒ‰์ƒ ์ฝ”๋“œ ์‚ฌ์ดํŠธ  (0) 2023.09.26
ใ„ด

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”