ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

JS

Ajax ์‹œ์ž‘

๐Ÿ”ฅ fire 2010. 7. 12. 21:33

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<title>ajax01</title>
<script type="text/javascript">
 window.onload = function() {
  //id๋ผ๋Š” ์•„์ด๋””๋ฅผ ๊ฐ€์ง„์š”์†Œ ๊ฒ€์ƒ‰
  var id = document.getElementById("id");

  //์ด๋ฒคํŠธ ๋“ฑ๋ก
  id.onkeyup = function() {
   startEvent();
  }
 }

 function startEvent() {
  //====================================================================
  //1. XMLHttpRequest๊ฐ์ฒด์ƒ์„ฑ
  var req = null;

  //====================================================================
  //๊ฐ์ฒด ํƒ์ง€๊ธฐ๋ฒ•์œผ๋กœ ๊ฒ€์‚ฌ? ํ•œ๋‹ค.
  if(window.XMLHttpRequest) {
   //๋น„MS์ชฝ ์ด๋ฉด
   req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   //MS์ชฝ
   try {
    req = new ActiveXObject("Msxml2.XMLHTTP");
   } catch(e) {
    try {
     req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
     req = null;
    }
   }
  }

  if (req == null) {
   alert("XMLHttpRequest๊ฐ์ฒด ์ง€์›ํ•˜์ง€ ์•Š์Œ !!! ");
   return;
  }

  //====================================================================
  //id๋ผ๋Š” ์š”์†Œ๋ฅผ ์ฐพ์ž
  var id = document.getElementById("id");

  //id๊ฐ’ ์ฝ๊ธฐ
  var data = id.value;

  //====================================================================
  //์ด ์ •๋ณด๋ฅผ ์„œ๋ฒ„์˜ ์ฃผ์†Œ์— ๋ง๋ถ™์—ฌ์•ผ ํ•œ๋‹ค.
  var url = "ajax01Process.jsp";
  url += "?id=" + encodeURIComponent(data);
  //get๋ฐฉ์‹์—์„œ๋Š” url ๋’ค์— ํŒŒ๋ผ๋ฏธํ„ฐ ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•ด ๋ณด๋‚ด์•ผ ํ•˜๊ณ ,
  //๊ทธ ๋ฐ์ดํ„ฐ๊ฐ€ URLEncoding๋˜๋„๋ก ์ˆ˜์ •ํ•ด์•ผ ํ•œ๋‹ค.
 
 
  //====================================================================
  //2. XMLHttpRequest ๊ฐ์ฒด์— ๋Œ€ํ•œ ์„ค์ •
  req.open("GET", url, true);
  req.onreadystatechange = function() {
   //์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต์„ ๋ฐ›๋Š” ๊ณผ์ •์— ์žˆ๋‹ค๋ฉด ํ˜ธ์ถœ๋˜๋Š” ์ฝ”๋“œ
   // ๋จผ์ € ์‘๋‹ต์ด ์™„๋ฃŒ๋˜์—ˆ๋Š”๊ฐ€?  
   if(req.readyState == 4) {
    //๊ทธ๋ฆฌ๊ณ  ์‘๋‹ต์˜ ๊ฒฐ๊ณผ๊ฐ€ ์„ฑ๊ณต์ ์ธ๊ฐ€?
    //message๋ผ๋Š” ์•„์ด๋”” ์š”์†Œ๋ฅผ ์ฐพ์ž.
    var msg = document.getElementById("message");
   
    if(req.status == 200) {
     //ํ˜„์žฌ ๋ฌธ์„œ์˜ DOM์„ ์ด์šฉํ•˜์—ฌ ๋ถ€๋ถ„์—…๋ฐ์ดํŠธ ์ž‘์—…ํ•œ๋‹ค.
     msg.style.color = "blue";
     msg.innerHTML = req.responseText;
    } else {
     //์‹คํŒจ์˜ ์ƒํƒœ๋ฅผ ๋ฐ›์•˜๋‹ค๋ฉด
     msg.style.color = "red";
     msg.innerHTML = "์‹คํŒจ : " + req.statusText;
     
    }
   }
  };
  req.send(null);  //get๋ฐฉ์‹์—์„œ๋Š” null์„ ์ง€์ •.
   
 
 }
</script>
</head>
<body>
 <input type="text" id="id" />
 
 <div id="message"></div>
</body>
</html>

'JS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

ajax ๋‘๋ฒˆ์งธ  (0) 2010.07.13
Ajax ์‹œ์ž‘_์ฒ˜๋ฆฌํŽ˜์ด์ง€  (0) 2010.07.12
DOM ๊ฐ์ฒด 02  (0) 2010.07.09
DOM ๊ฐ์ฒด 01  (0) 2010.07.09
JSON ์ด์šฉํ•œ ๊ฐ์ฒด toString  (0) 2010.07.09
๋Œ“๊ธ€