! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !
AjaxApp
■■■ AJAX ■■■
더보기
○ 개요
AJAX 는 XML 에 기반한 종합 기술로
★비동기★ 자바스크립트 XML (Asynchronous Javascript And Xml)을 줄인 말로
:모든 요청이 끝날 때까지 기다리지않고 카페에서 주문 후 진동벨 받고 커피 나올때까지 하고싶은거 하는...
자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술이다.
AJAX 는 하나의 독립된 기술이... 아니다.
화면은 HTML + CSS 로 구성 및 작성하고
화면에 대한 조작과 상호 작용은 문객체모델(Document Object Model : DOM)로 처리하고
데이터 교환은 XML 형식으로 처리하며,
데이터 변환과 검색은 XML 기술인 XSL 과 XPath 를 사용하며,
비동기 통신에는 웹 브라우저 안에 내장되어 있는
XMLHttpRequest 객체를 사용하고
이 모~~~~든 것을 하나로 묶어보는 개념으로
Javascript / jQuery 를 사용하는 것.
이것을 AJAX 라고 한다.
○ 특징
- 비동기 자바스크립트 XML
- 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용
- 처리 과정
① HTTP 요청을 보냄 (_http:프로토콜)
→ ② XML 문서를 응답으로 받은
→ ③ 자동으로 XML 객체가 생성
→ ④ 자바스크립트는 XML 객체에 접근하여 다양한 작업을 수행
==> HTML+CSS, DOM, XML, XSLT, XPath, XMLHttpRequest, Javascript(jQuery)를 합쳐서 사용
○ 장점
- 비동기 통신을 사용함으로써 데이터를 보내고 나서도
클라이언트는 다른 작업을 수행할 수 있다.
- 데이터만 들어가 있는 형식으로 응답을 받기 때문에
전통적인 웹 어플리케이션 방식에 비해 서버측 처리 속도가 빠르고
전송 데이터의 양도 훨씬 적다.
- 응답으로 받은 XML 문서를 XML 객체로 접근하여 스크립트로 조작하고
XPath를 사용하여 XML 문서를 검색하거나 XSL 을 사용하여 변환을 할 수 있다.
따라서 실행 속도가 빠르다.
- 불필요한 데이터 요청을 최소화할 수 있고
많은 일이 클라이언트인 웹 브라우저에서 처리될 수 있다.
※ XPath(Xml PATH Language)
W3C 표준으로 확장 생성 언어 문서의 구조를 통해
지정한 구문을 사용하여 항목을 배치하고 처리하는 방법을 기술하는 언어이다.
XML 표현보다 더 쉬운 약어로 되어 있으며,
XSL 변환과 XML 지시자 언어에 쓰이는 언어이다.
APath 는 XML 문서의 노드를 정의하기 위하여 경로석을 사용하며,
수학 함수와 기타 확장 가능한 표현들을 포함하고 있다.
※ XSL(eXtensible Stylesheet Language)
XSL 은 XML 의 표현 방식을 지정할 때 사용하는 언어이다.
XSLT, XPath, XSL-FO의 세 가지 파트로 구성되어 있다.
○ 단점
- 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.
- AJAX 는 클라이언트 풀링 방식으로 실시간 서비스를 제공할 수 없다.
(_아이디 중복 검사해서 없다고 불러왔는데 갑자기 뿅하고 생기면 구별할 수 없다.-> 실시간 연동이 안된다.)
- AJAX 가 포함된 HTML 페이지가 속한 서버가 아닌 다른 서버로 요청을 보낼 수 없고,
클라이언트 PC의 파일에 접근할 수도 없다.
○ 기존 웹 사이트에서 AJAX 를 활용하면 효과가 있는 경우
또는, AJAX 어플리케이션으로 개발할 필요가 있는 경우
- 웹 페이지를 전환하지 않고 현재 페이지에서 다른 동작을 수행하고자 할 때
(_ex)검색어 자동완성(글자 하나하나 써질때마다 데이터베이스에서 검색))
- 불필요한 팝업을 사용하여 처리하는 작업을 다른 방법을 통해 대체하고자 할 때
- 여러 번 불필요한 화면을 다시 출력할 때
(_ex)아이디 중복검사 할 때 팝업이 뜨면서 다시 아이디를 입력하라고 하는...)
- 특정한 데이터를 반복 사용하면서 다양한 작업을 수행할 때
○ 주의사항
- 뒤로가기 버튼 사용의 어려움
AJAX 는 Javascript 를 사용하여 동작하기 때문에
페이지 단위의 브라우저에서 사용자 경험(UX)과 다르게 작동하는 경우가 있다.
특히, 뒤로가기 버튼의 기능 상실로 AJAX를 유해한 기술로 평가하기도 한다.
(뒤로가기 버튼은 웹 서핑을 수행하는 사용자들이
일반 클릭 다음으로 많이 사용하는 기술이므로...)
하지만, 이미 iframe을 사용한 해결책이 제시된 바 있다.
또한, AJAX를 활용한 서비스 사용 경험이 증대될수록 이런 문제는
줄어들 것으로 전망하고 있다. (_이미 많이 줄어든 상태)
- 진행상황 파악의 어려움
XMLHttpRequest 를 통해 통신을 하는 경우
웹 페이지 로딩과는 달리 사용자에게 아무런 진행 정보가 주어지지 않는다.
그래서 아직 요청이 완료되지 않았는데 사용자가 해당 페이지를 떠나거나
기다림을 참지 못한 사용자가 다른 기능을 수행함으로써 오작동을 일으킬
우려가 발생하게 된다.
이 경우, 사용자의 요청이 처리중에 있다는 표시를 화면에 보여주는 방법을 사용할 수 있다.
중간 중간 "loading" 상태 표시를 통해 사용자의 요청이 처리중임을 알려주는 방법을 예로 들 수 있다.
이러한 상태는 XMLHttpRequest.readyState 의 상태를 통해 판단할 수 있다.
또한, 이와 같은 상황에 맞는 이미지를 활용할 수도 있다.
○ 참고 사이트
- 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 객체를 생성할 수 있다.
AjaxTest01.html
↓ "Content 바꾸기" 버튼을 통해 바꾸기
<!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()의 역할을 하는 인터넷 익스플로러의 객체
}
// ※ 브라우저에 따라 객체를 생성하는 방법의 차이만 있을 뿐
// 여기까지 수행하면 XMLHttpRequest 객체(→ AJAX 객체) 생성 완료~!!!
// 『xlmHttp』 : XMLHttpRequest 객체
// 서버로부터 응답이 오면 『readystatechange』 이벤트가 발생하게 된다.
// 『onreadystatechange』 : readystatechange 이벤트가 발생했을 때
// 동작할 수 있도록 이벤트 핸들러를 등록하는 과정. _우리가 발생시키는 것이 아님. readyState가 바뀔 때마다 동작.
// 즉, 이와 같은 이벤트가 발생하게 되면...
// 우리가 코딩한 내용처럼 동작해라~!!!
xmlHttp.onreadystatechange = function() //_onclick / onreadystatechange / on동작 //_xmlHttp.onreadystatechange = function() {}; 의 구조
{
// 응답이 올 때마다
//_확인
//alert("상태 변경~!!!");
// readyState 가 그 상황에서의 XMLHttpRequest 상태를 저장하게 된다.
// 즉, readyState 는 XMLHttpRequest 객체의 property 이다.
// ==> readyStatechange 이벤트는
// readyState 가 변경될 때 마다 발생하게 된다.
// ※ 『XMLHttpRequest』 의 『readyState』 는 0 에서 4 까지 순차적으로 변화한다.
// 0 → 요청이 초기화 되지 않음.
// 1 → 서버 연결이 이루어지지 않음.
// 2 → 요청이 수신됨.
// 3 → 요청을 처리중.
// 4 → 요청의 처리가 종료되고, 응답이 준비 됨.
// 서버로부터 응답(_올바른응답 + 에러)을 받게 되면...
if(xmlHttp.readyState==4)
{
// ※ 『XMLHttpRequest』 의 status 는 『 HTTP Status』 코드를 의미한다.
// 200 → 올바른 응답
// 40x → 클라이언트 측 에러(404 페이지 찾을 수 없음)
// 50x → 서버 측 에러(JAVA 에러)
if(xmlHttp.status==200)
{
// 이 구문을 통해 서버로부터 응답을 정상적으로 받았을 때
// 그 응답을 가져와 DOM 을 업데이트 하겠다는 의미. _DOM:Document Object Model
// 응답의 속성에는 두 가지가 있는데
// 『responseText』는 텍스트 형식의 응답일 경우 사용하게 되고
// 『responseXML』은 응답이 XML 형식(_다량의 데이터)일 경우 사용하게 된다.
document.getElementById("myDiv").innerHTML = xmlHttp.responseText; //_응답얻어내기
}
}
};
// 『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:비동기방식으로 하겠다.(ajax사용하는데 있어 약관 동의 같은 개념) false:ajax사용하지 않겠다.
xmlHttp.send(""); //_시작
}
</script>
</head>
<body>
<div id="myDiv">
<h1>AJAX 를 활용하여 이 텍스트를 바꾸어보자.</h1>
</div>
<button type="button" onclick="loadXMLDocs()">Content 바꾸기</button>
</body>
</html>ajaxTarget.txt
더보기
AJAX is not a programming language.
AJAX is technique for accessing web server from a web page.
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>
<!--
<servlet>
<servlet-name></servlet-name>
<servlet-class></servlet-class>
</servlet>
<servlet-mapping>
<servlet-name></servlet-name>
<url-pattern></url-pattern>
</servlet-mapping>
-->
<!-- 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>
<!-- 아이디 검색 -->
<!-- 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>test3ok</servlet-name>
<servlet-class>com.test.ajax.Test03_ok</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test3ok</servlet-name>
<url-pattern>/test03_ok.action</url-pattern>
</servlet-mapping>
<!-- 우편번호 주소 검색 -->
<!--test04.action -->
<servlet>
<servlet-name>test04</servlet-name>
<servlet-class>com.test.ajax.Test04</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test04</servlet-name>
<url-pattern>/test04.action</url-pattern>
</servlet-mapping>
<!--test04_ok.action -->
<servlet>
<servlet-name>test04ok</servlet-name>
<servlet-class>com.test.ajax.AjaxTest04_ok</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test04ok</servlet-name>
<url-pattern>/test04_ok.action</url-pattern>
</servlet-mapping>
<!-- 추천 검색어 -->
<!--test05.action -->
<servlet>
<servlet-name>test05</servlet-name>
<servlet-class>com.test.ajax.Test05</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test05</servlet-name>
<url-pattern>/test05.action</url-pattern>
</servlet-mapping>
<!--test05_ok.action -->
<servlet>
<servlet-name>test05ok</servlet-name>
<servlet-class>com.test.ajax.Test05_ok</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>test05ok</servlet-name>
<url-pattern>/test05_ok.action</url-pattern>
</servlet-mapping>
</web-app>
AjaxTest02.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 구성
var url = "test02.kb?n1="+n1+"&n2="+n2;
// XMLHttpRequest 객체 (→ AJAX 객체) 생성
ajax = createAjax(); //-- ajax.js
ajax.open("GET", url, true) //_ajax 객체가 생성된 이후에만 존재하면 됨.
//-- 『GET』 : 데이터 전송 및 페이지 요청 방식(POST 사용 가능, POST 사용 시 헤더 추가 필요)
// 『url』 : AJAX 요청 페이지(데이터 수신 및 응답 페이지)
// 『true』 : boolean → true(비동기), false(동기), 동기는 사용 안함.
//-- 실제 서버와의 연결이 아니고
// 일종의 환경 설정 부분으로 이해하는 것이 좋겠다.
// (실제 서버 연결은 나중에...)
// ajax 객체(XMLHttpRequest 객체)의 readyState 속성은
// 각 단계별로 변화되며, 0부터 4 까지 순차적으로 증가한다.
// 그 때 마다... 『readystatechange』 이벤트가 발생한다.
ajax.onreadystatechange = function()
{
// 이벤트가 발생할 때 마다...
// 이 영역의 코드가 실행되는 형태로 기능하게 되는데...
// 그 중에서... (0부터 4까지의 상태 중에서...)
// 4가 되는 순간이
// 요청했던 서버로부터 응답이 완료된 시점이기 때문에
// 4 인 경우... 수행해야 할 업무를 진행할 수 있도록 처리한다.
if (ajax.readyState==4)
{
// 서버로부터 응답이 완료되었다 하더라도
// 그 과정에서 데이터가 올바른 것인지, 에러 메세지를 응답받은 것인지
// 알 수 없기 때문에...
// 서버로부터 응답받은 코드를 확인한 후
// 업무를 진행할 수 있도록 처리한다.
if(ajax.status==200)
{
// 업무 진행 → 기능(동작) → 정의된 함수 호출(업무 코드를 외부로 추출)
//-- 콜백 함수(_직접 호출하는 것이 아닌 기능이 돌아가는 과정에서 호출되는 것...?)
callBack();
}
}
};
// 실제 서버에서 AJAX 요청을 한다.(즉, 이 부분이 진짜 연결 작업이다.)
ajax.send(""); //_액션배우가 "액션"소리에 액션을 시작하는 것처럼 시작하는 신호.
//-- POST 방식으로 데이터를 전송하며 페이지 요청을 하는 경우...
// send() 메소드의 인자값에 데이터를 넣는다.
//-- GET 방식으로 데이터를 전송하며 페이지 요청을 하는 경우...
// send() 메소드의 인자값에 "" 를 넣는다.
// (실무적으로 비워두는 것은 하지말자. 현재는 GET 방식의 요청이다.)
}
//함수 정의
//-- 추출된 업무 코드 기술
// → AJAX 요청이 완료된 후 호출되는 최종 업무 처리 함수
function callBack()
{
// 여기서는 두 가지 방법 중 하나로 데이터를 가져온다.
// 1. 서버에서 응답한 데이터가 텍스트일 경우(단일 데이터)
var data = ajax.responseText;
// 2. 서버에서 응답한 데이터가 XML 일 경우(다량의 데이터)
//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="rdo" value="rdo1">라디오1
<input type="radio" name="rdo" value="rdo3">라디오2
<br>
<select id="sel">
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>
</head>
</html>
test03.action
↓
AjaxTest03.java
/*===================
AjaxTest03.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 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.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="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)
{
// 업무 처리(업무 수행) → 외부로 추출 → 함수 정의 → 정의된 함수 호출
callBack();
}
};
ajax.send("");
}
// 외부로 추출된 업무 구성 → 함수 정의
// → 아이디 중복 검사의 결과(1 or 0)를 통보받아
// 사용자에게 메세지 출력 → span → #reuslt
function callBack()
{
// responseText / responseXML
var data = ajax.responseText;
data = parseInt(data);
if (data==0)
{
document.getElementById("result").innerText = "사용 가능한 아이디입니다.";
}
else
{
document.getElementById("result").innerText = "이미 사용중인 아이디입니다."
document.getElementById("id").focus();
}
}
</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>Test03_ok.java
/*===================
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;
}
}
// 최종 result에 1이 남아있으면... 이미 존재하는 id → 사용 불가
// 1로 바뀌지 않고 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);
}
}Test03_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
${result}
test04.action
↓
Test04.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 Test04 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 = "AjaxTest04.jsp";
//String view = "WEB-INF/view/AjaxTest04.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}AjaxTest04.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>AjaxTest04.jsp</title>
<link rel="stylesheet" type="text/CSS" href="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)
{
// 업무 처리(업무 수행) → 외부로 추출 → 함수 정의 → 정의된 함수 호출
callBack();
}
};
ajax.send("");
}
// 외부로 추출된 업무 구성 → 함수 정의
// → 아이디 중복 검사의 결과(1 or 0)를 통보받아
// 사용자에게 메세지 출력 → span → #reuslt
function callBack()
{
// responseText / responseXML
var data = ajax.responseText;
data = parseInt(data);
if (data==0)
{
document.getElementById("result").innerText = "사용 가능한 아이디입니다.";
}
else
{
document.getElementById("result").innerText = "이미 사용중인 아이디입니다."
document.getElementById("id").focus();
}
}
/* 주소 검색 버튼 클릭 시 호출되는 함수 정의 */
function search()
{
// 확인
//alert("함수 호출 확인~!!!");
// 데이터 수집
var addr = document.getElementById("addr").value;
// URL 준비
var url = "test04_ok.action?addr=" + addr;
// XMLHttpRequest 객체 생성(→ AJAX 객체 생성)
ajax = createAjax(); //-- ajax.js
// 설정
ajax.open("GET", url, true);
//ajax.onreadystatechange = 기능;
ajax.onreadystatechange=function()
{
if(ajax.readyState==4 && ajax.status==200)
{
//업무 수행
callBack2();
}
}
ajax.send("");
}
// 수행해야 할 업무 추출
// → 우편번호 검색 결과를 통보받아서
// 사용자에게 안내해 줄 수 있도록 처리
function callBack2()
{
// XML 문서 전체의 참조 객체. (→ 흔히 XML 문서 객체라고 한다.)
var doc = ajax.responseXML;
// XML 문서의 최상위 엘리먼트(루트 엘리먼트)
//-- 현재는... 『<list>』 엘리먼트
var root = doc.documentElement;
// 루트 엘리먼트의 모든 『<item>』 엘리먼트 반환받기
var itemList = root.getElementsByTagName("item");
// select box 초기화
document.getElementById("addrResult").innerHTML = "";
//--> 없으면 이전 검색 값에 덧붙여서 나옴
// 검색 결과 확인
if (itemList.length==0)
{
document.getElementById("addrResult").innerHTML = "<option>주소를 입력하세요.</option>";
} else
{
document.getElementById("addrResult").innerHTML = "<option value='0'>주소를 선택하세요.</option>";
}
// 검색 결과가 존재할 경우... 반복문을 순환하며 각 데이터 가져오기
for (var i=0; i<itemList.length; i++) //-- 수신한 아이템의 갯수만큼 반복 순환
{
var zipcode = itemList[i].getElementsByTagName("zipcode")[0];
var address = itemList[i].getElementsByTagName("address")[0];
// ※ 태그가 가지는 텍스트는
// 태그의 첫 번째 자식이고...
// 텍스트 노드의 값은
// nodeValue로 가져온다.
var zipcodeText = zipcode.firstChild.nodeValue;
var addressText = address.firstChild.nodeValue;
// select box 에 아이템 추가
document.getElementById("addrResult").innerHTML
+= "<option value='" + zipcodeText + "/" + addressText + "'>["+zipcodeText+"]" + addressText + "</option>";
}
}
// 검색된 주소 항목에 대한 선택이 이루어졌을 때 호출되는 함수
function selectZipCode(sel)
{
//alert("선택 확인~!!!");
// 확인
//alert(sel.value);
if (sel.value != "0")
{
// 확인
//alert(sel.value);
// 03992/서울특별시 마포구 동교로 175 (동교동)
document.getElementById("addr1").value = sel.value.split("/")[0];
document.getElementById("addr2").value = sel.value.split("/")[1];
document.getElementById("addr3").focus();
}
}
</script>
</head>
<body>
<div>
<h1>회원가입</h1>
<p> - 우편번호 검색</p>
<p> ※ url → http://localhost:3306/AjaxApp/test04.action</p>
<p> http://localhost:3306/AjaxApp/test04_ok.action</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" placeholder="동 입력">
<input type="button" value="검색하기" class="control" onclick="search()">
<br>
<select id="addrResult" class="control" onchange="selectZipCode(this)"> <!-- this를 매개변수로 넘기면서 자기자신가져오기 -->
<option>주소를 입력하세요</option>
</select>
</td>
</tr>
<tr>
<th>주소 검색 결과</th>
<td>
<input type="text" id="addr1" class="control" readonly="readonly"
style="width: 200px;">
<br>
<input type="text" id="addr2" class="control" readonly="readonly"
style="width: 400px;">
<br>
<input type="text" id="addr3" class="control" placeholder="상세주소를 입력하세요"
style="width: 400px;">
<br>
</td>
</tr>
<tr>
<th>기타등등</th>
<td>
<input type="text" id="etc" class="control"> (테스트)
</td>
</tr>
</table>
</body>
</html>AjaxTest04_ok.java
/*===================
AjaxTest04.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 AjaxTest04_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
{
// 서블릿 관련 코딩
request.setCharacterEncoding("UTF-8");
// 데이터 수신(AjaxTest04.jsp로 부터 동 이름(addr) 수신)
String addr = request.getParameter("addr"); // 서교 서교동 역삼 역삼동
// ※ 여기서도
// 앞에서와 마찬가지고 우편번호 데이터베이스가 있다고 가정하고...
// 데이터베이스 대신 직접 자료구조(ArrayList) 구성
ArrayList<ZipCodeDTO> lists = new ArrayList<ZipCodeDTO> ();
if(addr.indexOf("서교") > -1)
{
// list.add(ZipCodeDTO객체)
// list.add(new ZipCodeDTO(ZipCode, address);
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 13 (서교동)"));
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 17 (서교동, 용성빌딩)"));
lists.add(new ZipCodeDTO("04047", "서울특별시 마포구 독막로3길 18 (서교동)"));
lists.add(new ZipCodeDTO("04047", "서울특별시 마포구 독막로3길 20 (서교동)"));
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 21 (서교동)"));
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 21-3 (서교동)"));
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 21-4 (서교동)"));
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 21-6 (서교동)"));
lists.add(new ZipCodeDTO("04044", "서울특별시 마포구 독막로3길 23 (서교동)"));
lists.add(new ZipCodeDTO("04047", "서울특별시 마포구 독막로3길 24 (서교동)"));
}
else if(addr.indexOf("동교") > -1)
{
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 171 (동교동, 아람빌딩)"));
lists.add(new ZipCodeDTO("03995", "서울특별시 마포구 동교로 172 (동교동)"));
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 173 (동교동)"));
lists.add(new ZipCodeDTO("03995", "서울특별시 마포구 동교로 174 (동교동)"));
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 175 (동교동)"));
lists.add(new ZipCodeDTO("03995", "서울특별시 마포구 동교로 176 (동교동, 청휘빌딩)"));
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 177 (동교동, 동교동빌딩)"));
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 177-1 (동교동, 동교동빌딩)"));
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 179 (동교동)"));
lists.add(new ZipCodeDTO("03992", "서울특별시 마포구 동교로 179-5 (동교동)"));
}
else if(addr.indexOf("연희") > -1)
{
lists.add(new ZipCodeDTO("03696", "서울특별시 서대문구 가좌로 15 (연희동, 연궁아파트)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-5 (연희동, 해마루)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-6 (연희동)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-7 (연희동, 연희궁빌라)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-9 (연희동)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-11 (연희동)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-13 (연희동)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-14 (연희동, 주함하우스)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-15 (연희동)"));
lists.add(new ZipCodeDTO("03661", "서울특별시 서대문구 가좌로 16-16 (연희동, 구립연희어린이집)"));
}
request.setAttribute("lists", lists);
RequestDispatcher dispatcher = request.getRequestDispatcher("Test04_ok.jsp");
dispatcher.forward(request, response);
}
}Test04_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();
//check~!!!
response.setContentType("text/xml");
//-- AJAX 객체에 데이터를 돌려줄 때
// 브라우저가 이 데이터를 XMl 로 인식해야 하기 때문에
// MINE 타입을 XML 로 선언한다. _브라우저한테 네가 받은건 XML이야 최면거는 것?
// ※ (수신해서 처리해야 하는) 데이터가 단일 데이터가 아닐 경우
// XML 이나 JSON 과 같이 구조화시킬 수 있는 데이터의 형태로 전달하는 것이
// 처리 과정에서 용이하다.
// 우편번호에 대한 검색 결과는 단연히 다량의 데이터를 전송해야 하기 때문에
// 텍스트가 아닌 XMl 형태로 반환하려고 하는 것이다.
%><%-- <?xml version = "1.0" encoding="UTF-8"?> : xml이 시작된다는 구문 : 맨 앞에 아무것도 없는 위치에 와야 하지만
jsp의 정체성인 스크립릿 영역을 없앨 수 없기 때문에 앞 구문들을(스크립릿 영역을) 하나하나 다 붙여줘야 한다.
--%><?xml version = "1.0" encoding="UTF-8"?>
<list>
<c:forEach var = "item" items="${lists }">
<item>
<zipcode>${item.zipCode}</zipcode>
<address>${item.address}</address>
</item>
</c:forEach>
</list>
<!-- 네가 xml처럼 한땀한땀 그려주겠니?? XML인 척 속이는 것 -->
test05.action
↓
Test05.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 Test05 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 = "WEB-INF/view/AjaxTest05.jsp";
String view = "AjaxTest05.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}AjaxTest05.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>AjaxTest05.jsp</title>
<link rel="stylesheet" type="text/CSS" href="css/main.css">
<style type="text/css">
#search
{
width: 500px;
}
#list
{
border: 1px solid gray;
width: 500px;
position: absolute;
left: 70px;
top: 164.5px;
display: none;
}
#list .item
{
padding: 3px;
}
#list #footer
{
height: 14px;
background-color: #DDD;
text-align: right;
padding: 5px;
font-size: 9pt;
}
</style>
<script type="text/javascript" src="<%=cp%>/js/ajax.js"></script>
<script type="text/javascript">
// 검색창에서 키보드를 누를 때 마다...
// 그 때 까지의 입력된 단어를 서버로 전송하고
// 전송된 단어에 맞는 추천 검색어를 받아올 수 있도록 처리
function search()
{
// 데이터 수집(입력된 값 얻어오기)
var search = document.getElementById("search").value;
// 확인
//alert(search);
// 서버로 AJAX 를 통해 전송하기 전에 유효성 검사 -----------------------------------------
// ① 검색어가 존재할 경우에만 서버로 전송할 수 있도록 처리
if (search.replace(" ", "") == "")
{
document.getElementById("list").style.display = "none";
return;
}
// ② 입력된 검색어가 한글 완성형일 경우에만 검색 키워드를 구성하여 전송할 수 있도록 처리
// → 정규표현식 사용
var regEx = /^[가-힣]+$/;
if(!regEx.test(search))
{
return;
}
// 확인
//alert(search);
// ----------------------------------------- 서버로 AJAX 를 통해 전송하기 전에 유효성 검사
// URL 구성
var url = "test05_ok.action?search=" + search;
// ajax 객체 생성
ajax = createAjax();
// 설정
ajax.open("GET", url, true);
ajax.onreadystatechange = function()
{
if (ajax.readyState==4 && ajax.status==200)
{
// 업무 내용 수행 → 콜백 함수 호출
callBack();
}
};
ajax.send("");
}
// 업무 내용
// → XML 목록으로 받아온 추천 검색어들을
// 적당한 리스트로 생성해서 화면에 출력할 수 있도록 처리
function callBack()
{
// XML 문서 객체
var doc = ajax.responseXML;
// XML 최상위 엘리먼트(루트 엘리먼트) 접근 → 지금은 <list>인 상황
var root = doc.documentElement;
// 루트 엘리먼트를 기준으로 모든 <item> 엘리먼트 반환받기
var itemList = root.getElementsByTagName("item");
// 추천 검색어 노출지점에 대한 초기화
document.getElementById("items").innerHTML = "";
// 수신한 추천 검색어 삽입하기
for (var i=0; i<itemList.length; i++)
{
var word = itemList[i].firstChild.nodeValue;
// items(노출지점)에 추가
document.getElementById("items").innerHTML
+= "<div class='item'>" + word + "</div>"
}
// 검색어가 삽입된 목록을 최종적으로 화면에 보일 수 있도록 랜더링
document.getElementById("list").style.display = "block";
}
</script>
</head>
<body>
<div>
<h1>AJAX 실습</h1>
<p>추천 검색어</p>
</div>
<!-- ※ url → http://localhost:3306/AjaxApp/test05.action -->
<!-- ※ url → http://localhost:3306/AjaxApp/test05_ok.action -->
<div>
검색어
<input type="text" id="search" class="control" placeholder="검색어를 입력하세요." onkeyup="search()">
</div>
<div id="list">
<div id="items">
<!-- <div class="item">가나</div>
<div class="item">가다랑어</div>
<div class="item">가방</div>
<div class="item">가위 손질하기</div> -->
</div>
<div id="footer">
추천 검색어
</div>
</div>
</body>
</html>
Test05_ok.java
/*==================
Test05_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 Test05_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
{
// 완성형 한글 형태로 전송된 데이터 수신
request.setCharacterEncoding("UTF-8");
String search = request.getParameter("search");
// 확인
//System.out.println(search);
// DB 연결 및 액션 처리
// ~~~~~~ WHERE COLUMN LIKE 'search%'; 와 같은 쿼리문 구성
// 그에 따른 결과 수신
// 위와 같이 조회한 결과를 가지고 자료구조(ArrayList) 활용
ArrayList<WordDTO> lists = new ArrayList<WordDTO>();
if(search.equals("가"))
{
lists.add(new WordDTO("가나"));
lists.add(new WordDTO("가다랑어"));
lists.add(new WordDTO("가방"));
lists.add(new WordDTO("가위 손질하기"));
lists.add(new WordDTO("가방 구매"));
lists.add(new WordDTO("가방 무료 나눔"));
lists.add(new WordDTO("가방 세탁하는 방법"));
lists.add(new WordDTO("가방을 분실했을 때"));
lists.add(new WordDTO("가방끈 끊어짐"));
lists.add(new WordDTO("가방끈 손질하는 방법"));
lists.add(new WordDTO("가방끈 파손"));
lists.add(new WordDTO("가방끈 이름새"));
lists.add(new WordDTO("가방끈 추천"));
}
else if(search.equals("가방"))
{
lists.add(new WordDTO("가방 구매"));
lists.add(new WordDTO("가방 무료 나눔"));
lists.add(new WordDTO("가방 세탁하는 방법"));
lists.add(new WordDTO("가방을 분실했을 때"));
lists.add(new WordDTO("가방끈 끊어짐"));
lists.add(new WordDTO("가방끈 손질하는 방법"));
lists.add(new WordDTO("가방끈 파손"));
lists.add(new WordDTO("가방끈 이름새"));
lists.add(new WordDTO("가방끈 추천"));
}
else if(search.equals("가방끈"))
{
lists.add(new WordDTO("가방끈 끊어짐"));
lists.add(new WordDTO("가방끈 손질하는 방법"));
lists.add(new WordDTO("가방끈 파손"));
lists.add(new WordDTO("가방끈 이름새"));
lists.add(new WordDTO("가방끈 추천"));
}
request.setAttribute("lists", lists);
RequestDispatcher dispatcher = request.getRequestDispatcher("Test05_ok.jsp");
dispatcher.forward(request, response);
}
}
Test05_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();
response.setContentType("text/xml");
%><?xml version = "1.0" encoding="UTF-8"?>
<list>
<c:forEach var="item" items="${lists }">
<item>${item.word }</item>
</c:forEach>
</list>! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의하시기 바랍니다 !
'JAVA개념&실습' 카테고리의 다른 글
| WEB : [0616] AJAX 03 (0) | 2023.08.22 |
|---|---|
| WEB : [0616] AJAX 02 (0) | 2023.08.22 |
| WEB : [0612] Jquery02 (0) | 2023.08.22 |
| WEB : [0612] Jquery01 (0) | 2023.08.22 |
| WEB : [0608~0612] 방명록 페이지 구성 팀 과제02 (0) | 2023.08.22 |