[AJAX] 001. AJAX 의 개요

AJAX 의 개요

■■■ AJAX ■■■
○ 개요
   AJAX 는 XML 에 기반한 종합 기술로
   **비동기** 자바스크립트 XML(Asynchronous Javascript And Xml) 을 줄인 말로
   자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술이다.
   //-- 비동기 : 
   //-- ex) 매표소 : 매표창구에 가서 요청을 통해 표를 끊을 때
   //--              그동안 뒤에 다른 사람은 줄을 서야 업무처리가 가능함.
   //--              다만, 지갑을 두고 왔거나 행선지를 잊어버려서 찾으려면 줄에서 빠져나와야함
   //--              (일이 중단되면 다시 줄서서 기다림)
   //--     커피숍 : 주문 후 음료가 나올때 까지는 진동벨을 들고 좌석에서 다른 것 하면서 기다리다가
   //--              음료가 나오면 진동벨을 들고 음료를 찾으러 감
   //-- 옛날에는 매표소(전통방식)처리를 했는데, 비동기방식은 커피숍 같은 느낌으로 일을 처리
   
   AJAX 는 하나의 독립된 기술이... 아니다. 
   //-- 여러 기술을 섞어 쓰는 것 
   //-- + 보이는 영역에서 일을 처리하는 것이 아닌 **뒷편에서 일을 처리**함
   //-- -> 데이터의 흐름이 잘 보이지 않고, 확인이 잘 되지 않는다.
   //-- 여태까지는 계약서를 봤다면... 이제부턴 이면 계약서...
   화면은 HTML + CSS 로 구성 및 작성하고
   화면에 대한 조작과 상호작용은 문객체모델(Document Object Model : DOM)로 처리하고
   데이터 교환은 XML 형식으로 처리하며,
   데이터 변환과 검색은 XML 기술인 XSL 과 XPath 를 사용하며, 
   비동기 통신에는 웹 브라우저 안에 내장되어 있는
   XMLHttpRequest 객체를 사용하고,
   이 모든 것을 하나로 묶어주는 개념으로 Javascript / jQuery 를 사용하는 것.
   이것을 AJAX 라고 한다.
------------------------------------------------------------------------------------------------------
○ 특징
   - 비동기 자바스크립트 XML
   - 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용
   - 처리 과정
     ① HTTP 요청을 보냄
     //----- (프로토콜)
       → ② XML 문서를 응답으로 받음
       //  -------- "보이지 않는 곳"에서 쪽지를 쥐어주듯 줌
          → ③ 자동으로 XML 객체가 생성
          //          -------- AJAX 객체 : 브라우저에 따라서 조금 다름
             → ④ 자바스크립트는 XML 객체에 접근하여 다양한 작업을 수행
     ==> HTML+CSS, DOM, XML, XSLT, XPath, XMLHttpRequest, Javascript(jQuery)를 합쳐서 사용
------------------------------------------------------------------------------------------------------     
○ 장점
   - 비동기 통신을 사용함으로서 데이터를 보내고 나서도 클라이언트는 다른 작업을 수행할 수 있다. (커피숍!)
   - 데이터만 들어가 있는 형식으로 응답을 받기 때문에
     전통적인 웹 어플리케이션 방식에 비해서 서버측 처리 속도가 빠르고 전송 데이터의 양도 훨씬 적다.
     //-- 회원가입 수행 페이지에서 정보 입력하는데서 아이디 -> 중복확인
     //-- 전통적 방식 : 중복확인을 누르면 -> 스크립트만으로는 처리 불가능(DB액션처리필요)
     //--            -> 해당페이지에 머물수 없음 (채워진 값들을 다 들고갔다가 다시 넣어줘야함)
     //--               (고작 '이미 존재하는/사용가능한 아이디입니다.' 를 띄워주기 위해서!!!!.....)
     //-- -> 그래서 해당 페이지에 머물고 있는 상태에서 아이디 확인하기 위해 해당 부분만 따로 송수신
     //--    (말하자면 해당 칸에 뒤에 구멍을 내서 슥 가져가서 일처리하고 답을 가져옴)
     //-- 반드시 이런 방식으로 진행되어야한다X 진행할 수 있다O 
   - 응답으로 받은 XML 문서를 XML 객체로 접근하여 스크립트로 조작하고, 
     XPath를 사용하여 XML 문서를 검색하거나 XSL 을 사용하여 변환을 할 수 있다. 
     따라서 실행 속도가 빠르다.
   - 불필요한 데이터 요청을 최소화 할 수 있고
     많은 일이 클라이언트인 웹 브라우저에서 처리될 수 있다.
     ※ XPath(Xml PATH Language) //-- 구조나 배치에 사용
        W3C 표준으로 확장 생성 언어 문서의 구조를 통해
        지정한 구문을 사용하여 항목을 배치하고 처리하는 방법을 기술하는 언어이다.
        XML 표현보다 더 쉬운 약어로 되어있으며
        XSL 변환과 XML 지시자 언어에 쓰이는 언어이다.
        XPath 는 XML 문서의 노드를 정의하기 위하여 경로식을 사용하며, 
        수학 함수와 기타 확장 가능한 표현들을 포함하고 있다.        
     ※ XSL(eXtensible Stylesheet Language) //-- CSS 같은 느낌
        XSL 은 XML 의 표현 방식을 지정할 때 사용하는 언어이다.
        XSLT, XPath, XSL-FO 의 세 가지 파트로 구성되어 있다.
------------------------------------------------------------------------------------------------------     
○ 단점
   - 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.
     //-- 내부에서는 아이디 ( 내용 ) 을 확인할 때 아이디 인 것을 알 수 있지만 외부에서는 해당 내용이 뭔지 모름
   - AJAX 는 클라이언트 풀링 방식으로 실시간 서비스를 제공할 수 없다.
     //-- 확인하고 가입 하려고 버튼 누르는데 그 사이에 누군가가 해당 아이디를 사용하면 에러 남
   - AJAX 가 포함된 HTML 페이지가 속한 서버가 아닌 다른 서버로 요청을 보낼 수 없고, 
     클라이언트 PC의 파일에 접근할 수도 없다.
     (꼭 AJAX 가 아니더라도 대다수가 불가능한 기능이 됨 - 보안 때문에 로컬자원 접근 불가)
------------------------------------------------------------------------------------------------------
○ 기존 웹 사이트에서 AJAX 를 활용하면 효과가 있는 경우 또는 , AJAX 어플리케이션으로 개발할 필요가 있는 경우
   - 웹 페이지를 전환하지 않고 현재 페이지에서 다른 동작을 수행하고자 할 때
     //-- ex) 아이디 중복확인 예시, 검색창 아래에 뜨는 연관검색어 창(submit전)
     //--                           └> 한 글자씩 쓸 때마다 요청-응답 (전통적방식은 페이지 전환 일어남)
   - 불필요한 팝업을 사용하여 처리하는 작업을 다른 방법을 통해 대체하고자 할 때
     //-- ex) 아이디 중복확인하는데 클릭하면 새 창이 떠서 해당 창에서 확인(요청-응답) 새 페이지에서 확인하여 결과 받기
   - 여러 번 불필요한 화면을 다시 출력할 때
   - 특정한 데이터를 반복 사용하면서 다양한 작업을 수행할 때
------------------------------------------------------------------------------------------------------
○ 주의사항
   - 뒤로가기 버튼 사용의 어려움
     AJAX 는 Javascript 를 사용하여 동작하기 때문에
     페이지 단위의 브라우저에서 사용자 경험(UX)와 다르게 작동하는 경우가 있다.
     특히, 뒤로가기 버튼의 기능 상실로 AJAX를 유해한 기술로 평가하기도 한다.
     (뒤로가기 버턴은 웹 서핑을 수행하는 사용자들이 일반 클릭 다음으로 많이 사용하는 기술이므로)
     하지만, 이미 iframe 을 사용한 해결책이 제시된 바 있다. 
     또한, AJAX 를 활용한 서비스 사용 경험이 증대될수록 이런 문제는 줄어들 것으로 전망하고 있다.
     //-- 이미 이러한 문제는 대다수 해결되었음 (ex) 뒤로가기 시에 제대로 응답 불가능할 수 있습니다 등..)
   - 진행상황 파악의 어려움
     XMLHttpRequest 를 통해 통신을 하는 경우
     웹 페이지 로딩과는 달리 사용자에게 아무런 진행 정보가 주어지지 않는다.
     그래서 아직 요청이 완료되지 않았는데 사용자가 해당 페이지를 떠나거나
     기다림을 참지 못한 사용자가 다른 기능을 수행함으로써 오작동을 일으킬 우려가 발생하게된다.
     이 경우, 사용자의 요청이 처리중에 있다는 표시를 화면에 보여주는 방법을 사용할 수 있다.
     중간 중간 "loading" 상태 표시를 통해 사용자의 요청이 처리중임을 알려주는 방법을 예로 들 수 있다.
     이러한 상태는 XMLHttpReques.resdyState 의 상태를 통해 판단할 수 있다.
     또한, 이와 같은 상황에 맞는 이미지를 활용할 수도 있다.
------------------------------------------------------------------------------------------------------     
○ 참고 사이트
  - http://www.w3.org
  - http://www.w3schools.com
------------------------------------------------------------------------------------------------------
○ AJAX 의 필요성
   기존의 웹 브라우저는 서버로부터 페이지 단위로만 데이터를 수신할 수 있었다.
   때문에 간단한 상호작용을 하려고 해도 페이지 전체를 로딩해야 했고
   이것은 대역폭 낭비를 초래하게 되었다.
   하지만, AJAX 를 사용하면 XML 파일 조각 단위로 데이터를 받아올 수 있기 때문에
   전체 페이지를 다시 로드하지 않아도 페이지 일부를 동적으로 갱신할 수 있다.
------------------------------------------------------------------------------------------------------
○ AJAX 객체의 사용
   AJAX 객체를 사용하려면 먼저 AJAX 객체 생성 함수를 사용하여 AJAX 객체를 만들어야한다.
   //-- 엄밀하게는 없는 객체(여러 방식들이 합쳐져서 만들어져서 일하는 코드들이 각기 다르므로)
   //-- 단, 저 여러 방식을 합쳐서 불러 지칭해서 처리하기 위해 붙여졌다고 봐도 됨.
   인터넷 익스플로러의 경우 『new ActiveXObject("Microsoft.XMLHttp")』를 실행하며  
   모질라 웹 브라우저의 경우 『new XMLHttpRequest()』를 실행하여 AJAX 객체를 생성한다.
   인터넷 익스플로러 7.0 이후부터는 모질라 웹 브라우저 처럼
   『new XMLHttpRequest()』를 실행하여 AJAX 객체를 생성할 수 있다.
   //-- 인터넷 익스플로러 제외 나머지 브라우저 벤더들은 모질라 웹 브라우저라고 보면 됨(세부는 다르긴 함)

---

AjaxApp
- 초반에는 jQuery 를 배제하고 Script 로 구성해서 확인해본다

• AjaxTest01 + ajaxTarget.txt

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
	
	function loadXMLDocs()
	{
		// 확인
		//alert("함수 호출 확인");
		// XMLHttpRequest 객체 (→ AJAX 객체)를 담을 변수 선언
		//-- 호출하는 방법은 브라우저 마다 다르다~
		
		var xmlHttp;	//-- 변수 선언
		
		// (클라이언트 측) 브라우저의 종류나 상태에 따른 분기
		// (클라이언트 측에서) 자신이 사용중인 브라우저가 XMLHttpRequest 를
		// 지원하고 있는 상황이라면...
		if (window.XMLHttpRequest)
		{
			// 확인
			//alert("XMLHttpRequest 지원");
			
			// 이와 같은 방법으로 객체를 생성하고(이렇게)
			xmlHttp = new XMLHttpRequest();
		}
		else
		{
			// 확인
			//alert("XMLHttpRequest 지원 안함");
			
			// 이와 같은 방법으로 객체를 생성해라(저렇게)
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// └> 여기까지의 수행은 클라이언트 브라우저 측에서(서버측 스태프(?)를 이용해) 수행하게 되는 것
        //--  원래 무대 팀 스태프가 해야할 일인데 -> 무대팀(이라는 이름)이 없다면,
        //--  연출팀(실제로 무대팀 일을 하는) 스태프 데려와서 일 시켜 라고 하는 것
        
		// ※ 브라우저에 따라 객체를 생성하는 방법의 차이만 있을 뿐
		//    여기까지 수행하면 XMLHttpRequest 객체(→AJAX 객체) 생성 완료
        //--  뽑혀온 스태프가 하는 일은 동일할 것!(즉AJAX 객체인 것)
		
		// 『xmlHttp』 : XMLHttpRequest 객체
		// 서버로부터 응답이 오면 『readystatechange』 이벤트가 발생하게 된다.
		// 『onreadystatechange』: readystatechange 이벤트가 발생했을 때 동작할 수 있도록 이벤트 핸들러를 등록하는 과정
		//  즉, 이와 같은 이벤트가 발생하게 되면... 코딩한 내용처럼 동작해라~		
		xmlHttp.onreadystatechange = function()
		{
			// 응답이 올 때 마다
			// readyState 가 그 상황에서의 XMLHttpRequest 상태를 저장하게 된다.
			// 즉, readyState 는 XMLHttpRequest 객체의 property 이다.
			// ==> readystatechange 이벤트는 readyState 가 변경될 때 마다 발생하게 된다.
            //    └> 우리가 발생시킨 이벤트가 아님~
            //-- + ex) 피자 준비 중 ∥ 배달 준비 중 등 ∥주문받은 측이 알려줌. 주문자가 하는 것이 아님
			
			// ※ 『XMLHttpReauest』의 『readyState』는 0에서 4까지 순차적으로 변화한다.
			//    0 → 요청이 초기화 되지 않음
			//    1 → 서버 연결이 이루어지지 않음 
			//    2 → 요청이 수신됨
			//    3 → 요청을 처리중
			//    4 → 요청의 처리가 종료되고, 응답이 준비됨.
			//-- 에러든 뭐든 요청을 해야 받아서 알 수 있는 점
            
			// 서버로부터 응답을 받게 되면 (readyState 라는 property가 4 라면)
			if (xmlHttp.readyState==4)
			{	
				// 『XMLHttpReauest』의 status 는 『HTTP Status』코드를 의미한다.
				//  200 → 올바른 응답
				//  40x → 클라이언트 측 에러(404 페이지 찾을 수 없음)
				//  50x → 서버측 에러 (JAVA에러)
                //-- 못하겠는데? 라는 것도 응답이기 때문에...
               
				if (xmlHttp.status==200)
				{
                	//-- 응답도 받았고 그 응답이 정상적일 때~
					// 이 구문을 통해 서버로부터 응답을 정상적으로 받았을 때
					// 그 응답을 가져와 DOM 을 업데이트 하겠다는 의미
					// 응답의 속성에는 두 가지가 있는데 //--(응답 방법이 2가지)
					// 『responseText』는 텍스트 형식의 응답일 경우 사용하게 되고
					// 『responseXML』은 응답이 XML 형식일 경우 사용하게 된다.
					document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
				}
			}	
		};
        //-- 여기까지는 AJAX 객체의 설정만 해둔것 (~하고나서 ~하고 ~하고나서 ~하고..)
        //-- 아래의 코드들이 이제 설정한거 시작해줘! 하는 구문
		
		// 『XMLHttpRequest』의 『open("페이지 요청 방식", "URL", async)』는
		// XMLHttpRequest 객체를 필요한 값으로 초기화 하는데 사용하는 메소드이다.
		// GET 방식이 아닌 POST 방식으로 요청하기 위해서는
		// 『xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		//   xmlHttp.send(input1=value1&input2=value2);』
		//  와 같은 내용으로 헤더를 추가해주어야한다.
		xmlHttp.open("GET", "ajaxTarget.txt", true);
        //-- true : 비동기 / false : AJAX 안쓰겠다. 비동기 아님!
		//-- 이미 AJAX 객체 쓴다고 했는데 왜 있나..? -> 동의합니다 체크하는 것과 같음
		xmlHttp.send("");
	}	
	
</script>

</head>
<body>

<div id="myDiv">
	<h1>AJAX 를 활용하여 이 텍스트를 바꾸어보자</h1>
</div>

<button type="button" onclick="loadXMLDocs()">Content 바꾸기</button>


</body>
</html>

---

AJAX is not a programming language.
AJAX is technique for accessing web server from a web page.

---

• AjaxTest02
  + ajax.js + web.xml + Test02.java+ Test02_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();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest02.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
	.short
	{
		width: 50px;
		text-align: right;
	}
</style>
<script type="text/javascript" src="<%=cp%>/js/ajax.js"></script>
<script type="text/javascript">
	function sum()
	{
		// 확인
		//alert("함수호출확인");
		
		// 데이터 수집
		var n1 = document.getElementById("num1").value;
		var n2 = document.getElementById("num2").value;
		
		// 처리 결과 요청을 위한 URL 구성
		//--url은 임의 구성... 서블릿 필터를 통한...(서블릿 개요)
		var url = "test02.kb?n1="+n1+"&n2="+n2;
		
		//XMLHttpRequest 객체 (→ AJAX 객체) 생성
		ajax = createAjax();		//-- ajax.js
		
		// ajax 객체(XMLHttpRequest 객체)의 readyState 속성은
		// 각 단계별로 변화되며, 0 부터 4 까지 순차적으로 증가한다
		// 그 때 마다... 『readystatechange』 이벤트가 발생한다.
		ajax.onreadystatechange = function()
		{
			// 이벤트가 발생할 때 마다
			// 이 영역 코드가 실행되는 형태로 기능하게 되는데
			// 그 중에서(0 ~ 4) 
			// 4가 되는 순간이 요청했던 서버로부터 응답이 완료된 시점이기 때문에
			// 4인 경우... 수행해야 할 업무를 진행할 수 있도록 처리한다.
			if (ajax.readyState==4)
			{
				// 서버로부터 응답이 완료되었다고 하더라도
				// 그 과정에서 데이터가 올바른 것인지, 에러메세지를 응답받은 것인지 알 수 없기 때문에...
				// 서버로부터 응답받은 코드를 확인한 후
				// 업무를 진행할 수 있도록 처리한다.
				if (ajax.status==200)
				{
					// 업무진행 → 기능(동작) → 정의된 함수 호출(업무 코드를 외부로 추출 )
					//-- 콜백 함수
					callBack();
				}
			}
		};

	// open()의 경우는 ajax 생성 이후 send() 이전에만 생성되면 된다. 설정과 open() 의 순서는 상관이 없다
	//-- action 준비,, 합을 맞추는 단계
	ajax.open("GET", url, true);
	//-- 『GET』 : 데이터 전송 및 페이지 요청 방식(POST 사용가능, POST 사용시 헤더 추가 필요)
	//   『url』 : AJAX 요청 페이지(데이터 수신 및 응답 페이지)
	//   『true』: boolean → true(비동기), false(동기), 동기는 사용안함.
	//-- 실제 서버와의 연결이 아니고 일종의 환경설정 부분으로 이해하는 것이 좋겠다.
	//   (실제 서버 연결은 나중에..)
	
	//-- action!!(시작)하는 단계
	// 실제 서버에서 AJAX 요청을 한다(즉, 이부분이 진짜 연결 작업이다.)
	ajax.send("");
	//ajax.send(memberId); //-- post
	//-- POST 방식으로 데이터를 전송하며 페이지 요청을 하는 경우...
	//   send() 메소드의 인자값에 데이터를 넣는다.	
	//-- GET 방식으로 데이터 전송하며 페이지를 요청하는 경우
	//   send() 메소드의 인자 값을 (문법적으로) 비워둘 수 있다.
	//-- 단, 실무적으로 : 아무것도 넣지 않으면 브라우저에 따라서 skip 되는 경우도 발생 "" **빈문자열을 채워넣는다**.
	
	//※ 콜백 함수
	//ex) 탁상 알람 시계 -> 내가 돌려서 소리를 내면 : 내가 호출
	//                   -> 자고 일어났는데 시계가 울리는거면 : 내가 호출한것이 X
		
	}
	
	// 함수 정의
	//-- 추출된 업무 코드 기술
	//   → AJAX 요청이 완료된 후 호출되는 최종적인 업무를 처리하는 함수
	function callBack()
	{
		// 여기서는 두 가지 방법 중 하나로 데이터를 가져온다.
		
		// 1. 서버에서 응답한 데이터가 텍스트일 경우(단일 데이터)
		// → responseText
		var data = ajax.responseText;
		
		// 2. 서버에서 응답한 데이터가 XML 일 경우(다량의 데이터)
		// → responseXML
		//var data = ajax.responseXML;
		
		// 받아온 데이터를 업무에 적용한다.
		document.getElementById("result").value=data;
		
	}
	
</script>
</head>
<body>

<div>
	<h1>AJAX 기본 실습</h1>
	<hr />
</div>

<input type="text" id="num1" class="short" />
+
<input type="text" id="num2" class="short" />
<input type="button" value="=" onclick="sum()"/>
<input type="text" id="result" class="short" />

<br><br>

<h2>같은 페이지에 있는 기타 다른 요소들</h2>

<input type="text" />
<br>
<input type="checkbox" name="check" value="check1" />체크1
<input type="checkbox" name="check" value="check2" />체크2
<br>

<input type="radio" name="radio" value="rdo1"/>라디오1
<input type="radio" name="radio" value="rdo2"/>라디오2
<br>

<select id="sel">
	<option value="1">선택1</option>
	<option value="2">선택2</option>
	<option value="3">선택3</option>
</select>


</body>
</html>

---

/**
 * ajax.js 
*/

// AJAX 객체(XMLHttpRequest 객체) 변수
var ajax = null;

// AJAX 객체(XMLHttpRequest 객체) 생성 함수
function createAjax()
{
	/*
	// ActiveXObject 를 지원하는 브라우저라면...
	//-- 원래 if~else 구문 처리시에 순서가 중요하나
	//-- ActiveXObject 와 XMLHttpRequest 객체를 거르는 필터는 순서 상관X (홀수, 짝수 필터하는 것과 같은 이치)
	if (window.ActiveXObject)						//-- IE 7 이전
	{
		// 이와 같은 방식으로 XMLHttpRequest 객체를 생성해서 반환해라
		// (ActiveXObject 객체 → XMLHttpRequest 객체를 대리할 수 있는 객체)
		return new ActiveXObject("Msxml2.XMLHTTP");
		//return new ActiveXObject("Microsoft.XMLHTTP");
		//                          ----------------- (->내부적으로 "Msxml2.XMLHTTP" 값이 들어있음 )
	}
	else 											//-- 그 외 브라우저
	{
		if (window.XMLHttpRequest)					//-- XMLHttpRequest 지원 브라우저
		{
			// 이와 같은 방식으로 XMLHttpRequest 객체를 생성해서 반환해라
			return new XMLHttpRequest;
		}
		else										//-- AJAX 를 지원하지 않는 브라우저
		{
			return null;
		}
		
	}
	*/
	
	/*
	if (window.ActiveXObject)
	{
		return new ActiveXObject("Msxml2.XMLHTTP");
	}
	else if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest;
	}
	else
	{
		return null;
	}
	*/
	
	if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest;
	}
	else if (window.ActiveXObject)
	{
		return new ActiveXObject("Msxml2.XMLHTTP");
	}
	else
	{
		return null;
	}
}

---

<?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_3_1.xsd"
	id="WebApp_ID" version="3.1">
	<display-name>WebApp00</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>
	<!-- test02.kb -->
	<servlet>
		<servlet-name>test02</servlet-name>
		<servlet-class>com.test.ajax.Test02</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>test02</servlet-name>
		<url-pattern>/test02.kb</url-pattern>	
	</servlet-mapping>
</web-app>

---

/*=================
	Test02.java
==================*/

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test02 extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		// 데이터 수신(AjaxTest02.jsp)로 부터 넘어온 데이터
		int n1 = Integer.parseInt(request.getParameter("n1"));
		int n2 = Integer.parseInt(request.getParameter("n2"));
		
		// 로직 처리 (연산 처리)
		//-- 업무 내용을 처리하는 Model 에 위임 가능
		int result = n1 + n2;
		
		// 반환할 결과값 데이터 준비
		request.setAttribute("result",result);		
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("Test02_ok.jsp");
		dispatcher.forward(request, response);
	
	}
	
}

---

<%-- result 값만 받아와서 AjaxTest02.jsp 의 2가지 방법 중 하나로 값을 전달하게 됨 --%>
<%@ page contentType="text/html; charset=UTF-8"%>
${result}

---

• AjaxTest03

• AjaxTest03.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>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest03.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
	#result
	{
		width: 250px;
		color: #F33;
		font-size: small;
		/* display: none; */
		display: inline-block;
	}
</style>
<script type="text/javascript" src="<%=cp%>/js/ajax.js"></script>
<script type="text/javascript">

	/* 중복확인 버튼 클릭 시 호출되는 함수 */
	function check()
	{
		// 데이터 수집
		var id = document.getElementById("id").value;
		
		// url 준비
		var url = "test03_ok.action?id="+id;
		
		// AJAX 객체 생성(→XMLHttpRequest 객체 생성)
		ajax = createAjax();
		
		// 환경 설정(『open("메소드방식","URL", 비동기/동기)』)
		ajax.open("GET", url, true);
		
		//ajax.onreadystatechange = 기능;
		ajax.onreadystatechange = function ()
		{
			if (ajax.readyState==4 && ajax.status==200)		//-- 연결 + 받아온 응답이 정상적일 때
			{
				//-- 업무정책에 따라 400 이나 500 오류를 클라이언트에게 띄워줄 것이라면, 
				//-- ajax.status 에 관한 사항을 if 중첩으로 사용해서 처리해야한다.
				
				// 업무 처리(업무 수행) → 외부로 추출 → 함수 정의 → 정의된 함수 호출
				callBack();				
			}
		};
		
		ajax.send("");
		
	}//end check()

	// 외부로 추출된 업무 구성 → 함수 정의
	// → 아이디 중복 검사의 결과(1 or 0)를 통보 받아 
	// 사용자에게 메세지 출력 → span → #result	
	function callBack()
	{
		// responseText / responseXML
		
		var data = ajax.responseText;
		
		data = parseInt(data);
		
		if (data==0)
		{
			document.getElementById("result").innerText = "사용 가능한 아이디 입니다.";
		}
		else
		{
			document.getElementById("result").innerText = "이미 사용중인 아이디 입니다.";
		}
		
		
	}// end callBack()
	
</script>

</head>
<body>

<div>
	<h1>회원가입</h1>
	<p>- AjaxTest03.jsp</p>
	<p>- AjaxTest03.java</p>
	<p>- ajax.js</p>
	<p>- main.css</p>
	<p>- Test03_ok.java</p>
	<p>- Test03_ok.jsp</p>
	<p>- web.xml</p>
	<p>- test03.action</p>
	<p>※ url → http://localhost:3306/AjaxApp/test03.action</p>
	<p>※        http://localhost:3306/AjaxApp/test03_ok.action</p>
	<p>※ 자료구조 활용 → ArrayList → "superman", "batman", "admin"</p>
	<hr />
</div>

<table class="table">
	<tr>
		<th>아이디</th>
		<td>
			<input type="text" id="id" class="control" />
			<input type="button" value="중복검사" class="control"  onclick="check()"/>
			<span id="result"></span>
			<!-- 
			<span id="result">사용가능한 아이디입니다.</span>
			<span id="result">이미 사용중인 아이디입니다.</span>
			-->
		</td>
	</tr>
	
	<tr>
		<th>이름</th>
		<td>
			<input type="text" id="name" class="control" /> (테스트)
		</td>
	</tr>
	
	<tr>
		<th>주소</th>
		<td>
			<input type="text" id="addr" class="control" /> (테스트)
		</td>
	</tr>
	
	<tr>
		<th>기타 등등</th>
		<td>
			<input type="text" id="etc" class="control" /> (테스트)
		</td>
	</tr>
</table>


</body>
</html>

<%@ 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>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest03.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
	#result
	{
		width: 250px;
		color: #F33;
		font-size: small;
		display: none;
	}
	.explain p
	{
		font-size: small;
	}
</style>
<script type="text/javascript" src="<%=cp %>/js/ajax.js"></script>
<script type="text/javascript">

	function checkId()
	{
		//alert("작업시작~");
		
		var id = document.getElementById("id").value;
		
		if (id=="")
		{
			alert("돌아가 안입력해줘!바꿔줄 생각 없어! 니가 바꿔!");
			document.getElementById("id").focus();
			return;
		}
		
		var url = "test03_ok.action?id="+id;
		
		ajax = createAjax();
		
		ajax.onreadystatechange = function()
		{
			if (ajax.readyState==4)
			{
				if (ajax.status==200)
				{
					callBack();
				}
			}
		};
		
		ajax.open("GET", url, true);
		ajax.send("");
	}

	function callBack()
	{
		// 업무 기능 함수 정의
		var result = parseInt(ajax.responseText);
		var str = "";
		
		document.getElementById("result").style.display = "none";
		
		if (result == 1)
		{
			str = "이미 사용중인 아이디입니다.";
		}
		else
		{
			str = "사용가능한 아이디입니다.";
			document.getElementById("result").style.color = "blue";
		}
		
		document.getElementById("result").style.display = "inline";
		document.getElementById("result").innerHTML = str;
	}
</script>
</head>
<body>

<div class="explain">
	<h1>회원가입</h1>
	<p>- AjaxTest03.jsp</p>			<!-- ok -->
	<p>- AjaxTest03.java</p>		<!-- ok -->
	<p>- ajax.js</p>				<!-- ok -->
	<p>- main.css</p>				<!-- ok -->
	<p>- Test03_ok.java</p>			<!-- ok -->
	<p>- Test03_ok.jsp</p>			<!-- ok -->
	<p>- web.xml</p> 				<!-- ok -->
	<p>- test03.action</p> 			<!-- ok -->
	<p>※ url → http://localhost:3306/AjaxApp/test03.action</p>		<!-- ok -->
	<p>※        http://localhost:3306/AjaxApp/test03_ok.action</p>
	<p>※ 자료구조 활용 → ArrayList → "superman", "batman", "admin"</p>
	<hr />
</div>

<table class="table">
	<tr>
		<th>아이디</th>
		<td>
			<input type="text" id="id" class="control" />
			<input type="button" value="중복검사" class="control" onclick="checkId()"/>
			<span id="result"></span>
			<!-- 
			<span id="result">사용가능한 아이디입니다.</span>
			<span id="result">이미 사용중인 아이디입니다.</span>
			-->
		</td>
	</tr>
	
	<tr>
		<th>이름</th>
		<td>
			<input type="text" id="name" class="control" /> (테스트)
		</td>
	</tr>
	
	<tr>
		<th>주소</th>
		<td>
			<input type="text" id="addr" class="control" /> (테스트)
		</td>
	</tr>
	
	<tr>
		<th>기타 등등</th>
		<td>
			<input type="text" id="etc" class="control" /> (테스트)
		</td>
	</tr>
</table>


</body>
</html>

---

• AjaxTest03.java
  - 처음 요청 주소에 따라서 jsp 페이지로 넘겨주는 서블릿

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxTest03 extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		String view = "AjaxTest03.jsp";
		//String view = "/WEB-INF/view/AjaxTest03.jsp";
		
		RequestDispatcher dispatcher = request.getRequestDispatcher(view);
		dispatcher.forward(request, response);
		
	}
	
}

/*===============
	AjaxTest03
================*/

package com.test.ajax;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxTest03 extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/AjaxTest03.jsp");
		dispatcher.forward(request, response);
	
	}
	
	
	
}

---

• ajax.js

/**
 * ajax.js 
*/

// AJAX 객체(XMLHttpRequest 객체) 변수
var ajax = null;

// AJAX 객체(XMLHttpRequest 객체) 생성 함수
function createAjax()
{
	/*
	// ActiveXObject 를 지원하는 브라우저라면...
	//-- 원래 if~else 구문 처리시에 순서가 중요하나
	//-- ActiveXObject 와 XMLHttpRequest 객체를 거르는 필터는 순서 상관X (홀수, 짝수 필터하는 것과 같은 이치)
	if (window.ActiveXObject)						//-- IE 7 이전
	{
		// 이와 같은 방식으로 XMLHttpRequest 객체를 생성해서 반환해라
		// (ActiveXObject 객체 → XMLHttpRequest 객체를 대리할 수 있는 객체)
		return new ActiveXObject("Msxml2.XMLHTTP");
		//return new ActiveXObject("Microsoft.XMLHTTP");
		//                          ----------------- (->내부적으로 "Msxml2.XMLHTTP" 값이 들어있음 )
	}
	else 											//-- 그 외 브라우저
	{
		if (window.XMLHttpRequest)					//-- XMLHttpRequest 지원 브라우저
		{
			// 이와 같은 방식으로 XMLHttpRequest 객체를 생성해서 반환해라
			return new XMLHttpRequest;
		}
		else										//-- AJAX 를 지원하지 않는 브라우저
		{
			return null;
		}
		
	}
	*/
	
	/*
	if (window.ActiveXObject)
	{
		return new ActiveXObject("Msxml2.XMLHTTP");
	}
	else if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest;
	}
	else
	{
		return null;
	}
	*/
	
	if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest;
	}
	else if (window.ActiveXObject)
	{
		return new ActiveXObject("Msxml2.XMLHTTP");
	}
	else
	{
		return null;
	}
	
	
	
}

---

• main.css

@charset "UTF-8";

*
{
	font-family : 맑은 고딕;
	color : #343;
}

body, p , div, span, input, table, th, td, select
{
	font-size : 18px;
}

.control
{
	border: 1px solid gray;
	border-radius: 3px;
}

.table
{
	border-collapse: collapse;
	width: 100%;
}

.table th, .table td
{
	border: 1px solid gray;
	border-left: 0px;
	border-right: 0px;
	padding: 3px;
	line-height: 150%;
}

.table th
{
	font-weight: bold;
	background-color: #EEE;
}

.btn
{
	font-weight: bold;
}

input[type=button]:hover
{
	color: white;
	background-color: #595a73;
}

---

• Test03_ok.java

package com.test.ajax;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test03_ok extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}
	
	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		// 서블릿 관련 코딩
		
		// 데이터 수신 (AjaxTest03.jsp 로 부터 id 수신)
		String id = request.getParameter("id");
		
		// id 가 abcd 일 경우...
		// Model  → DB 액션 처리 요청 → DAO (처리 요청)
		//                                ---------------
		//                                DTO, Connection 활용
		//    
		// → SELECT COUNT(*) AS COUNT FROM TBL_MEMBER WHERE ID = 'abcd';
		//           -----------------
		//               수신 처리 → 1 or 0
		
		// ※ DB 구성을 별도로 하지 않았기 때문에 컬렉션 자료구조로 대신함.
		
		ArrayList<String> db = new ArrayList<String>();
		db.add("superman");
		db.add("batman");
		db.add("admin");
		
		int result = 0;
		
		for (String item : db)
		{
			if (item.equals(id))
			{
				result = 1;
				break;
			}
		}
		
		// 최종 result 에 1 이 남아있으면... 이미 존재하는 id → 사용 불가
		// result 에 0 이 계속 남아있으면... 존재하지 않는 id → 사용 가능
		
		// 이 최종 result 값을 반환하기 위해 조각 데이터를 view 에 넘긴다.
		request.setAttribute("result", result);
		
		//RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/Test03_ok.jsp");
		RequestDispatcher dispatcher = request.getRequestDispatcher("Test03_ok.jsp");
		dispatcher.forward(request, response);
		
	}// end doGetPost()
		
}// Class end

/*====================
	Test03_ok.java
 ====================*/

package com.test.ajax;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Test03_ok  extends HttpServlet
{
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		doGetPost(request, response);
	}

	protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
	{
		ArrayList<String> idArr = new ArrayList<String>();
		idArr.add("superman");
		idArr.add("batman");
		idArr.add("admin");
		
		// 서블릿 관련 코딩
		// 데이터 수신
		String id = request.getParameter("id");
		int result = 0;
		//System.out.println("result1 : "+ result);

		// 받아온 ID 가 idArr 에 들어 있는 값인지 확인 -> 있으면 1 반환
		for (int i=0; i<idArr.size(); i++)
		{
			if (idArr.get(i).equals(id))
			{
				result = 1;
				break;
			}
		}
		//System.out.println("result2 : "+ result);
		
		//result 값 set 하기
		request.setAttribute("result", result);
		
		// 주소로 이동
		RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/Test03_ok.jsp");
		dispatcher.forward(request, response);
	
	}
}

---

• Test03_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
${result}

---

• web.xml

<?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_3_1.xsd"
	id="WebApp_ID" version="3.1">
	<display-name>WebApp00</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>

	<!-- test03.action -->
	<servlet>
		<servlet-name>test03</servlet-name>
		<servlet-class>com.test.ajax.AjaxTest03</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test03</servlet-name>
		<url-pattern>/test03.action</url-pattern>	
	</servlet-mapping>

	<!-- test03_ok.action -->
	<servlet>
		<servlet-name>test03ok</servlet-name>
		<servlet-class>com.test.ajax.Test03_ok</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>test03ok</servlet-name>
		<url-pattern>/test03_ok.action</url-pattern>	
	</servlet-mapping>

</web-app>

---

• test03.action

빈 파일 ~