Everything has an expiration date
[AjaxJquery] 20240102 [프로그램소스] 본문
[Ajax & Jquery]/Program source (Ajax & Jquery)
[AjaxJquery] 20240102 [프로그램소스]
Jelly-fish 2024. 1. 4. 02:55
AjaxJquery04
$.ajax( { type:○ , url:○ , data:○ , success:function(args) , beforeSend:function() , error:function() });
Jquery의 `$.ajax()` 함수를 통한 비동기 Ajax 데이터 송수신 처리 - HTML, XML
params="변수1=" + $("#변수1이 작성된 엘리먼트 id").val() + "&변수2=" + $.("#변수2가 작성된 엘리먼트 id").val();
① [AjaxTest01, AjaxTest02, AjaxTest03]
→ AjaxTest_ok.jsp 페이지에서 `HTML 텍스트` or `${result}` 만 구성한 경우
【AjaxTest_ok.jsp 페이지 구성】 - 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(); %> <!--======================================================================--> <!-- EL (JSTL) --> <!-- 이전 페이지에서 컨트롤러를 거치지 않고 건너온 데이터를 수신. (param) --> <!--======================================================================--> <!-- [ AjaxTest01, AjaxTest02 ] --> 변수1 : <b>${param.변수1 }</b> <br> 변수2 : <b>${param.변수2 }</b> <!-- [ AjaxTest03 ] --> ${result} <!--======================================================================-->
【AjaxTest.jsp 의 jQuery 구성】 - HTML을 받아와서 처리할 경우
$.ajax( { type:"POST or GET" , url:"데이터 전송 페이지 url" , data:params , success:function(args) { 페이지 요청 완료시 처리할 기능·동작 // 【 args : 요청 페이지에서 수신한 결과 데이터 】 $("#결과 텍스트를 삽입할 엘리먼트 id").html(args); // 【 입력값 초기화 및 포커스 】 $("#사용자가 입력한 엘리먼트 id①").val(""); $("#사용자가 입력한 엘리먼트 id②").val(""); $("#사용자가 첫 번째로 입력해야 할 엘리먼트의 id").focus(); } , beforeSend:function() { 데이터를 url에 전송하기 전에, 확인할 사항 처리 (반환값 true or false) } , error:function(e) { alert(e.responseText); } });
② [AjaxTest04] - AjaxTestok.jsp 페이지에서 XML 로 구성한 경우
【AjaxTest_ok.jsp 페이지 구성】 - XML<%@ 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 변수1 = request.getParameter("변수1"); String 변수2 = request.getParameter("변수2"); // 이 페이지의 내용 타입을 text로 구성된 xml 로 설정. response.setContentType("text/xml"); %><?xml version="1.0" encoding="UTF-8"?> <!--【 태그 내부의 속성에 접근 : $(객체).attr 】--> <!--【 태그 사이에 적힌 텍스트에 접근 : $(객체).find("찾을 태그명").text() 】--> <root> <반복되지 않는 태그>값1</반복되지 않는 태그> <% for (int i = 1; i <= 5; i++) { %> <반복되는 큰 태그 id="아이디"> <반복되는 작은 태그1>${세션에 저장된 값1}</반복되는 작은 태그1> <반복되는 작은 태그2>$(세션에 저장된 값2}</반복되는 작은 태그2> </반복되는 큰 태그> <% } %> </root>
【AjaxTest.jsp 의 jQuery 구성】 - XML 을 받아와서 처리할 경우$.ajax( { type:"POST or GET" , url:"데이터 전송 페이지 url" , data:params // 변경 사항 ① : 요청 페이지로부터 받아오는 dataType 지정. , dataType:"xml" , success:function(args) { 페이지 요청 완료시 처리할 기능·동작 var out = ""; // 큰 태그가 여러 개 구성되어 있을 경우 // 그 태그 각각에 대한 속성이나, 내부 태그의 내용을 out 문자열에 추가. $(args).find("반복되는 큰 태그").each(function() { // ① 큰 태그 객체 가져오기 var item = $(this); // ② 반복되는 큰 태그의 속성값 가져오기 var 속성 = item.attr("속성명"); //-- ex: "id" // ③ 반복되는 큰 태그 내부의 반복되는 작은 태그 텍스트 가져오기 var 반복되는 작은 태그1 텍스트 = item.find("반복되는 작은 태그1").text(); var 반복되는 작은 태그2 텍스트 = item.find("반복되는 작은 태그2").text(); // ④ 이 페이지(View)의 HTML에 표시할 문자열 형식 추가하기 out += "▶ 속성 : " + 속성 + "<br>"; out += "▶ 태그1: " + 태그1 + "<br>"; out += "▶ 태그2: " + 태그2 + "<br>"; }); // ⑤ 최종적으로 완성된 문자열 형식을 이 페이지의 엘리먼트 html 로 넣어주기 $("#문자열을 삽입할 엘리먼트 id").html(out); // ⑥ 사용자 입력값 초기화 및 포커스 $("#사용자 입력값1").val(""); $("#사용자 입력값2").val(""); $("#사용자 첫 번째 입력값").focus() } , beforeSend:function() { 데이터를 url에 전송하기 전에, 확인할 사항 처리 (반환값 true or false) } , error:function(e) { alert(e.responseText); } });
AjaxTest01.jsp
01
AjaxTest01.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>AjaxTest01.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendBtn").click(function()
{
// 테스트
//alert("확인~!!!");
// data 구성
var params = "name=" + $.trim($("#name").val())
+ "&content=" + $.trim($("#content").val());
// check~!!!
// ※ jQuery 의 ajax() 함수 사용(호출)
/*
$.ajax();
↓
$.ajax(
{
type:"POST" // 데이터 전송 및 페이지 요청 방식
, url:"AjaxTest01_ok.jsp" // 요청 페이지 URL
, data:params // 요청 페이지(AjaxTest01_ok.jsp)에서 수신하게 되는 데이터
, success:동작 // 페이지요청 및 데이터전달이 성공했을 떄의 처리
, befoerSend:반환값확인 // 요청 전 확인해야 할 항목 처리(true/false)
, error:동작 // 처리과정에서 문제가 발생했을 때의 처리
});
*/
$.ajax(
{
type:"POST"
, url:"AjaxTest01_ok.jsp"
// ★③번 파라미터 : data:params
, data:params // url 지정 페이지로 넘길 값 // check~!!!
, success:function(args)
{
$("#resultDiv").html(args);
$("#name").val("");
$("#content").val("");
$("#name").focus();
}
/* 전송하기 전에, 데이터가 제대로 입력되었다면 (true) 아니라면 (false) */
// ★⑤번 파라미터 : beforeSend:showRequest
, beforeSend:showRequest // true / false // check~!!!
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function showRequest()
{
if (!$.trim($("#name").val()))
{
alert("이름을 입력해야 합니다.");
$("#name").focus();
return false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<hr>
</div>
<div>
이름 <input type="text" id="name" class="txt">
<br /><br />
내용
<textarea rows="3" cols="50" id="content"></textarea>
<br /><br />
<input type="button" value="등록하기" id="sendBtn">
</div>
<br /><br />
<div id="resultDiv">
</div>
</body>
</html>
AjaxTest01_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();
%>
<%
// AjaxTest01_ok.jsp
/*
String name = request.getParameter("name");
String content = request.getParameter("content");
*/
%>
<%--
이름 : <b><%=name %></b>
<br>
내용 : <b><%=content %></b>
<br>
--%>
<!--============================-->
<!-- EL (JSTL) -->
<!--============================-->
이름 : <b>${param.name }</b>
<br>
내용 : <b>${param.content }</b>
<br>
<!--============================-->
AjaxTest02.jsp
01
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="<%=cp %>/css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendBtn").click(function()
{
// 테스트
//alert("확인~!!!");
// data 구성
var params = "name=" + $.trim($("#name").val())
+ "&content=" + $.trim($("#content").val());
// check~!!!
// ※ jQuery 의 ajax() 함수 사용(호출)
/*
$.ajax();
↓
$.ajax(
{
type:"POST" // 데이터 전송 및 페이지 요청 방식
, url:"AjaxTest01_ok.jsp" // 요청 페이지 URL
, data:params // 요청 페이지(AjaxTest01_ok.jsp)에서 수신하게 되는 데이터
, success:동작 // 페이지요청 및 데이터전달이 성공했을 때의 처리
, beforeSend:반환값확인 // 요청 전 확인해야 할 항목 처리(true/false)
, error:동작 // 처리과정에서 문제가 발생했을 때의 처리
});
*/
$.ajax(
{
type:"POST"
, url:"AjaxTest02_ok.jsp"
// ★③번 파라미터 : data:params
, data:params // url 지정 페이지로 넘길 값 // check~!!!
, dataType:"xml" //-- check~!!!
// 다른 페이지(AjaxTest02_ok.jsp) 에서 받아올 때의 데이터 타입을 작성한 것.
// → 다른 형식으로 데이터를 받을 때는 이와 같이 타입을 넘겨줄 수 있다.
//, async:false //-- 동기(Ajax 를 안 쓰겠다는 의미~!!!)
, success:function(args)
{
var out = "";
out = ">> 게시물 개수 : " + $(args).find("total_dataCount").text() + "<br>";
// ====== XML 에서 <total_dataCount> 엘리먼트 속 text를 찾아라.
// → 5
//======================================================
// 태그 comment 엘리먼트의 데이터 각각에 접근하면서
// 각각의 comment 속성 값들을 out 문자열에 추가해 준다.
//======================================================
$(args).find("comment").each(function()
{
var item = $(this);
var num = item.attr("num");
//--> num 속성에 대한 값을 가져온다.
var name = item.find("name").text();
//--> name 엘리먼트의 텍스트를 가져온다.
var content = item.find("content").text();
//--> content 엘리먼트의 텍스트를 가져온다.
// 하나씩 가져온 값 들을 문자열에 추가해 준다.
out += "<br>==========================";
out += "<br> 번호 : " + num;
out += "<br> 이름 : " + name;
out += "<br> 내용 : " + content;
out += "<br>==========================";
});
$("#resultDiv").html(out);
$("#name").val("");
$("#content").val("");
$("#name").focus();
}
/* 전송하기 전에, 데이터가 제대로 입력되었다면 (true) 아니라면 (false) */
// ★⑤번 파라미터 : beforeSend:showRequest
, beforeSend:showRequest // true / false // check~!!!
/* 『showRequest()』
요청을 보내기 전 체크하는 함수.
return false 이거나, return true 이므로...
beforeSend:true, beforeSend:false 와 같은 형태.
만약, beforeSend:true 이면
<form onsubmit=true> 와 같이 무조건적으로 바로 요청을 보내는 것과 똑같다.
, beforeSend:return true 로 구성하면 체크해야할 사항 없이 바로 요청 전송.
*/
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function showRequest()
{
if (!$.trim($("#name").val()))
{
alert("이름을 입력해야 합니다.");
$("#name").focus();
return false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<hr>
</div>
<div>
이름 <input type="text" id="name" class="txt">
<br /><br />
내용
<textarea rows="3" cols="50" id="content"></textarea>
<br /><br />
<input type="button" value="등록하기" id="sendBtn">
</div>
<br /><br />
<div id="resultDiv">
</div>
</body>
</html>
AjaxTest02_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();
%><%
// AjaxTest02_ok.jsp → XML 구성
String name = request.getParameter("name");
String content = request.getParameter("content");
response.setContentType("text/xml");
%><?xml version="1.0" encoding="UTF-8"?>
<%--
<lists>
<total_dataCount>5</total_dataCount>
<c:forEach var="i" begin="1" end="5" step="1">
<comment num=${i }>
<name><%=name %>+${i }</name>
<content><%=content %>+${i }</content>
</comment>
</c:forEach>
</lists>
--%>
<lists>
<total_dataCount>5</total_dataCount>
<%
for (int i=1; i<=5; i++)
{
%>
<comment num="<%=i %>">
<name><%=name + i %></name>
<content><%=content + i %></content>
</comment>
<%
}
%>
</lists>
AjaxTest03.jsp
01
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>
<!-- AjaxTest03 -->
<servlet>
<servlet-name>ajaxtest03</servlet-name>
<servlet-class>com.test.ajax.AjaxTest03Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxtest03</servlet-name>
<url-pattern>/ajaxtest03.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>ajaxtest03ok</servlet-name>
<servlet-class>com.test.ajax.AjaxTest03OkController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxtest03ok</servlet-name>
<url-pattern>/ajaxtest03ok.do</url-pattern>
</servlet-mapping>
</web-app>AjaxTest03Controller.java
/*========================
AjaxTest03Controller.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;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class AjaxTest03Controller extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
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="<%=cp %>/css/main.css">
<style type="text/css">
.txtNum
{
width: 100px;
text-align: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// 버튼이 클릭되면 값을 넘겨줘야지
$("#sendButton").click(function()
{
var params = "su1=" + $("#su1").val()
+ "&su2=" + $("#su2").val()
+ "&oper=" + $("#oper").val();
$.ajax(
{
type:"POST"
, url:"ajaxtest03ok.do"
, data:params
, success:function(args)
{
$("#result").html(args);
$("#su1").val("");
$("#su2").val("");
$("#su1").focus();
}
// beforeSend도 오른쪽 항에 동작·기능인 function() 이 있어야 하므로
// 다음과 같이 구성
, beforeSend:function()
{
return true;
}
, error:function()
{
alert(e.responseText);
}
});
});
});
// 다음과 같이 입력값 검사 함수 추가 가능~!!!
function checkInput()
{
if (!$trim($("#su1").val()))
{
alert("첫 번째 정수를 입력해야 합니다.");
$("#su1").focus();
}
if (!$trim($("#su2").val()))
{
alert("두 번째 정수를 입력해야 합니다.");
$("#su2").focus();
}
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습</h1>
<hr>
</div>
<!--
posttest02.do
PostTest02Controller.java
PostTest02.jsp
posttest02ok.do
PostTest02OkController.java
PostTest02_ok.jsp
web.xml
-->
<div>
<input type="text" id="su1" class="txt txtNum">
<select id="oper">
<option value="add">덧셈</option>
<option value="sub">뺄셈</option>
<option value="mul">곱셈</option>
<option value="div">나눗셈</option>
</select>
<input type="text" id="su2" class="txt txtNum">
<input type="button" value=" = " id="sendButton" class="btn">
</div>
<br>
<div id="result">
</div>
<br>
<br>
<div>
<input type="radio" name="rdo">rdo1
<input type="radio" name="rdo">rdo2
</div>
<div>
<input type="checkbox" name="chk">chk1
<input type="checkbox" name="chk">chk2
</div>
<div>
<input type="text">
</div>
</body>
</html>AjaxTest03OkController.java
/*========================
ServletSample.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;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class AjaxTest03OkController extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
// 이전 페이지(PostTest02.jsp)로부터 넘어온 데이터 수신
// → su1, su2, oper
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
String oper = request.getParameter("oper");
String result = "";
if (oper.equals("add"))
{
result = String.format("%d + %d = %d", su1, su2, (su1+su2));
}
if (oper.equals("sub"))
{
result = String.format("%d - %d = %d", su1, su2, (su1-su2));
}
if (oper.equals("mul"))
{
result = String.format("%d * %d = %d", su1, su2, (su1*su2));
}
if (oper.equals("div"))
{
result = String.format("%d / %d = %.2f", su1, su2, ((double)su1/su2));
}
request.setAttribute("result", result);
String view = "WEB-INF/view/AjaxTest03_ok.jsp";
RequestDispatcher dispatcher = request.getRequestDispatcher(view);
dispatcher.forward(request, response);
}
}AjaxTest03_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
${result}
AjaxTest04.jsp
012
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>
-->
<!-- AjaxTest03 -->
<servlet>
<servlet-name>ajaxtest03</servlet-name>
<servlet-class>com.test.ajax.AjaxTest03Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxtest03</servlet-name>
<url-pattern>/ajaxtest03.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>ajaxtest03ok</servlet-name>
<servlet-class>com.test.ajax.AjaxTest03OkController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxtest03ok</servlet-name>
<url-pattern>/ajaxtest03ok.do</url-pattern>
</servlet-mapping>
<!-- AjaxTest04 -->
<servlet>
<servlet-name>ajaxtest04send</servlet-name>
<servlet-class>com.test.ajax.AjaxTest04Controller</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxtest04send</servlet-name>
<url-pattern>/ajaxtest04.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>ajaxtest04ok</servlet-name>
<servlet-class>com.test.ajax.AjaxTest04OkController</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxtest04ok</servlet-name>
<url-pattern>/ajaxtest04ok.do</url-pattern>
</servlet-mapping>
</web-app>AjaxTest04Controller.java
/*========================
ServletSample.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;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class AjaxTest04Controller extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
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">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#sendButton").click(function()
{
/* alert("되나??"); */
var params = "title=" + $.trim($("#title").val())
+ "&content=" + $.trim($("#content").val());
$.ajax(
{
type:"POST"
, url:"ajaxtest04ok.do"
, data:params
, dataType:"xml"
, success:function(args)
{
// true 인지 false 인지~!!!
$(args).find("status").each(function()
{
var status = $(this).text();
alert(status);
//--==>> true
});
// 문자열 초기화
var out = "";
/*
>> id=1
- title=테스트
- content=반갑습니다.
*/
// <records></records> 태그 하나하나를 가져오면서
// records의 속성 id와
// <title> 태그, <content> 태그의 텍스트를
// out 문자열에 추가한다~!!!
$(args).find("records").each(function()
{
var item = $(this);
var id = item.attr("id");
var title = item.find("title").text();
var content = item.find("content").text();
out += ">> id=" + id + "<br>";
out += "- title = " + title + "<br>";
out += "- content = " + content + "<br>";
});
$("#resultDiv").html(out);
$("#title").val("");
$("#content").val("");
$("#title").focus();
}
, beforeSend:showRequest
, error:function(e)
{
alert(e.responseText);
}
});
});
});
function showRequest()
{
if (!$.trim($("#title").val()))
{
alert("제목을 입력해야 합니다.");
$("#title").focus();
return false;
}
if (!$.trim($("#content").val()))
{
alert("내용을 입력해야 합니다.");
$("#content").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div>
<h1>jQuery 의 ajax() 활용 실습 </h1>
<p>xml control</p>
<hr>
</div>
<div>
제목 <input type="text" id="title" class="txt">
<br /><br />
내용 <input type="text" id="content" class="txt">
<br /><br />
<input type="button" value="등록하기" id="sendButton" class="btn">
</div>
<br>
<div id="resultDiv">
<!--
>> id=1
- title=테스트
- content=반갑습니다.
>> id=2
- title=테스트
- content=반갑습니다.
-->
</div>
</body>
</html>AjaxTest04OkController.java
/*========================
ServletSample.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;
// Test004.java (Servlet) 에서는
// GenericServlet 을 extends 를 상속하자마자 에러가 났었지만,
// HttpServlet 을 extends 하겠다고 했을 땐, 에러가 나지 않았다.
// ★ 추상 클래스이지만 추상 메소드를 갖고 있지 않은 것이다!!
// [GenericServlet] → service() Overriding
// [HttpServlet] → doGet(), doPost() Overriding
public class AjaxTest04OkController extends HttpServlet
{
private static final long serialVersionUID = 1L;
// 사용자의 http 프로토콜 요청이 GET 방식일 경우 호출되는 메소드
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자의 http 프로토콜 요청이 POST 방식일 경우 호출되는 메소드
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doGetPost(request, response);
}
// 사용자 정의 메소드
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
// 필터링, 제대로 된 입력인지 검사, 개행 처리 등의 처리(업무적 정책)를
// Controller 에서 수행한 후 setAttribute 해 주는 것이 바람직함!!
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
String title = request.getParameter("title");
String content = request.getParameter("content");
request.setAttribute("title", title);
request.setAttribute("content", content);
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/AjaxTest04_ok.jsp");
dispatcher.forward(request, response);
}
}
AjaxTest04_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 title = request.getParameter("title");
String content = request.getParameter("content");
// ▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩
// [참고사항]
// ▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩
// 이번 실습에서...
// 실질적인 업무 처리와 결과 전송을 담당하는 컨트롤러인
// 『AjaxTest04OkController.java』 페이지에서는 RequestDispatcher 로
// forwarding 처리만 해준 후,
// 『AjaxTest04_ok.jsp』 페이지에서 파라미터 값을 가져와서
// xml 구성을 바로 해 주어도 크게 문제는 없지만
// (* 추가적인 데이터 가공 처리를 요구하지 않으므로)
//********************************************************************************
// 데이터 가공이 필요없다고 해서 컨트롤러에서 포워딩 처리만 해 주는 것이 아니라
// 【request.getParameter("")】를 통해 받아온 사용자 입력 값 title, content를
// 세션에 저장해 주어 (컨트롤러에서...)
// ===========================================
// request.setAttribute("title", title);
// request.setAttribute("content", content);
// ===========================================
// 『AjaxTest04_ok.jsp』 페이지에서 세션에 있는 값을
// EL (JSTL) 로 받아와 주는 편이 더욱 바람직 하다.
//********************************************************************************
// ▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩▩
response.setContentType("text/xml");
%><?xml version="1.0" encoding="UTF-8"?>
<%--
<root>
<status>true</status>
<records id="1">
<title></title>
<content></content>
</records>
<records id="2">
<title></title>
<content></content>
</records>
</root>
--%>
<%--
<root>
<status>true</status>
<%
for (int i = 1; i <= 5; i++)
{
%>
<records id="<%=i %>">
<title><%=title %></title>
<content><%=content %></content>
</records>
<%
}
%>
</root>
--%>
<root>
<status>true</status>
<%
for (int i = 1; i <= 5; i++)
{
%>
<records id="<%=i %>">
<title>${title }</title>
<content>${content }</content>
</records>
<%
}
%>
</root>
'[Ajax & Jquery] > Program source (Ajax & Jquery)' 카테고리의 다른 글
'[Ajax & Jquery]/Program source (Ajax & Jquery)' Related Articles
more
