내가 이해한 한도내에서의 스프링에서의 ajax 구현시 데이터 흐름도는
1. ajax 함수 호출
2. - ajax함수내에서 데이터 조회에 참조할 데이터변수
- 요청주소(컨트롤러에 맵핑해서 실행할 url 주소) 설정
3. 2번항목에서 지정한 컨트롤러에 실행되는 메소드내에서는 getParameter로 해당 변수를 받아온 후
해당 변수를 사용하여 쿼리를 날려 결과값을 setAttribute 를 사용하여 jsp 단으로 전달한다. (return "abc.jsp";)
4. jsp에서는
- responseText 인 경우 예를 들어
<% String result = (String) request.getAttribute("result"); out.write(result); %>
과 같은 처리.
- responseXML 인 경우
ArrayList<자료형> abc = (캐스팅 변환)request.getAttribute("속성명");
형대로 받아 StringBuilder를 사용해서 XML 형대로 문자열을 누적 처리.
다만, jsp에서 XML 형태로 가공할때 가공 후 응답은
response.setContentType("text/xml; charset=euc-kr");
response.getWriter().write(result.toString());
을 사용하여 리턴.
EX) 간단한 XML 형태
<?xml version="1.0" encoding="utf-8"?>
<users>
<user>
<name>HyunWook Kim</name>
</user>
<user>
<name>redccoma</name>
</user>
</users>
5. out.write(result) 구문이 실행되면 ajax 관련 함수중 콜백 함수를 실행하면서 응답확인을 하고 에러검출이 안될 경우
지정한 액션 혹은 지정한 함수를 실행. 예를 들어 xmlReq.status == 200 과 같은 조건일 경우 정상응답이므로 해당 조건하에서
사용자 정의 액션처리를 바로 하거나 printData(); 와 같은 사용자 지정함수를 호출.
6. printData() 와 같은 함수를 호출한다고 가정할 경우 var result = xmlReq.responseText;
혹은 var result = xmlReq.responseXML; 형태로 결과 데이터를 저장.
당연히 TEXT와 같은 경우 단일 데이터이므로 재처리할 필요 없이 원하는 액션처리를 하면 되고,
XML의 경우 아래의 코드처럼 xml값을 분석하여 가져온 후 동적으로 html 소스생성하고 innerHTML을 통해 문서로
최종반환하여 처리를 종료.
ex) 간단한 XML 분석 및 HTML 동적 소스 생성
var users = result.getElementsByTagName("user");
for(var i=0;i<users.length;i++){
result += users[i].getElementsByTagName("name")[0].firstChild.nodeValue + "<br>";
}
document.getElementById("str").innerHTML = str;
아래 영문내용과는 다르게 구현된 AJAX 소스 (어차피 같은 의미임-.-)
//AjaxSend02.jsp
<%@ 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>Insert title here</title>
<script type="text/javascript">
//전역변수
var xmlReq;
//전송 역할 함수
function myFunc() {
var data = document.getElementById("data");
//ajax 객체
xmlReq = new XMLHttpRequest(); //IE 7.0 이상
//서버 요청주소
var url = "AjaxReceive02.jsp";
//서버요청시 데이터 전송하는 부분
//데이터가 두개 이상인 경우는
//식별자=값&식별자=값&.... 형태로 작성
var postString = "data=" + data.value;
//응답이 돌아온다면 callback 함수 호출
//이벤트 등록 부분
xmlReq.onreadystatechange = callBack;
//ajax 요청 형식 // true는 비동기
xmlReq.open("POST", url, true);
//전송하는 데이터 안에 한글이 있는 경우 인코딩방식을 알려주어야 함.
xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=euc-kr");
//ajax 요청
xmlReq.send(postString);
}
//응답 확인 함수
function callBack() {
//state는 1, 2, 3, 4의 총 4가지 상태가 있음.
//1은 요청전
//2는 요청후
//3은 서버로 응답을 보낸 상태
//4는 최종 응답을 받은 상태를 의미
if(xmlReq.readyState == 4) {
//status는 서버 응답의 종류를 의미
//200은 정상적인 처리가 되었음을 의미
//500은 JSP 실행은 했지만 오류가 발생함.
//404는 요청 주소에 해당하는 파일이 없음.
if(xmlReq.status == 200) {
//정상적인 응답을 화면에 출력하는 함수 호출
printData();
} else {
alert("처리 불가!");
}
}
}
//결과 출력 함수
function printData() {
//응답은 두가지 종류가 존재
//responseText, responseXML
var result = xmlReq.responseText;
//alert(result);
var msg = document.getElementById("msg");
msg.innerHTML = result;
}
</script>
</head>
<body>
<div>
<h2>데이터 송수신 테스트2(ajax 방식)</h2>
<form>
이름 <input type="text" name="name" id="name"><br>
전화번호 <input type="text" name="tel" id="tel"><br>
아이디 <input type="text" name="data" id="data"><br>
<input type="button" value="중복체크" onclick="myFunc()">
</form>
<div>결과 데이터 : <span id="msg"></span></div>
</div>
</body>
</html>
//AjaxReceive02.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
String data = request.getParameter("data");
String result = "OK";
if(data.equals("test") || data.equals("admin") || data.equals("hong")) {
result = "Cancel";
}
//ajax 방식에서 데이터를 처리후 재전송할때 out.write(값); 을 사용해야 함.
out.write(result);
%>
JSPAndAJAXExamples
Example 1 - Server side JSP encoding
service.jsp:
<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="org.json.simple.JSONObject"%>
<%
JSONObject obj=new JSONObject();
obj.put("name","foo");
obj.put("num",new Integer(100));
obj.put("balance",new Double(1000.21));
obj.put("is_vip",new Boolean(true));
obj.put("nickname",null);
out.print(obj);
out.flush();
%>
Please note that you need to place json_simple-1.1.jar in WEB-INF/lib before running the JSP. Then the client side will get the resulting JSON text.
Example 2 - Client side XMLHttpRequest
client.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript">
function createXMLHttpRequest(){
// See http://en.wikipedia.org/wiki/XMLHttpRequest
// Provide the XMLHttpRequest class for IE 5.x-6.x:
if( typeof XMLHttpRequest == "undefined" ) XMLHttpRequest = function() {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP") } catch(e) {}
throw new Error( "This browser does not support XMLHttpRequest." )
};
return new XMLHttpRequest();
}
var AJAX = createXMLHttpRequest();
function handler() {
if(AJAX.readyState == 4 && AJAX.status == 200) {
var json = eval('(' + AJAX.responseText +')');
alert('Success. Result: name => ' + json.name + ',' + 'balance => ' + json.balance);
}else if (AJAX.readyState == 4 && AJAX.status != 200) {
alert('Something went wrong...');
}
}
function show(){
AJAX.onreadystatechange = handler;
AJAX.open("GET", "service.jsp");
AJAX.send("");
};
</script>
<body>
<a href="#" onclick="javascript:show();"> Click here to get JSON data from the server side</a>
</html>
Please place client.html and service.jsp (see Example 1) in the same directory and then open client.html in IE or Firefox, click the link and you'll get result.
출처 : https://code.google.com/p/json-simple/wiki/JSPAndAJAXExamples
'Java > JavaScript' 카테고리의 다른 글
| 객체 접근 (TEXT, RADIO, CHECKBOX, SELECT, RESET, ONSUBMIT) (0) | 2013.01.14 |
|---|---|
| 우클릭, 드래그, 복사 방지 스크립트 (0) | 2013.01.10 |
| Javascript event Keycode (0) | 2013.01.10 |
| [20121112 ~ 1113] 5일차 (text박스, 속성, select, window객체, DOM, 사용자 정의 객체) (0) | 2012.11.15 |
| [20121109] 4일차 (달력구현, 난수, radio 버튼, checkbox) (0) | 2012.11.15 |
WRITTEN BY
