2011년 5월 23일 월요일

AJAX(Asynchronous JavaScript and XML)

AJAX(Asynchronous JavaScript and XML)
대화식 웹 어플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 개발 기법이다.
DHTML이나 LAMP와 같이 AJAX는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 AJAX 에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.
AJAX 어플리케이션은 실행을 위한 플랫폼으로 위에서 열거한 기술들을 지원하는 웹 브라우저를 이용한다. 이것을 지원하는 브라우저로는 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리 등이 있다.

AJAX 어플리케이션과 기존의 웹 어플리케이션
기존의 웹 어플리케이션은 폼을 채우고 제출(submit)을 하면, 웹 서버로 요청을 보내도록 한다. 웹 서버는 전송된 내용에 따라서 새로운 웹 페이지로 결과물을 되돌려준다. 이때 둘 사이에 중복되는 HTML 코드로 인해 많은 대역폭이 낭비된다. 게다가 이러한 방식으로는 네이티브 어플리케이션에 비해 고도로 대화형 사용자 인터페이스를 작성하기가 힘들다.
반면에 AJAX 어플리케이션은 필요한 데이터만을 주도록 웹 서버에 요청할 수 있다. 보통 SOAP나 XML 기반의 웹 서비스 언어를 사용하며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서 자바스크립트를 쓴다. 그 결과로 웹 브라우저와 웹 서버 사이의 교환되는 데이터량이 줄어들기 때문에 어플리케이션의 응답성이 좋아진다. 요청을 주는 수많은 컴퓨터에서 이 같은 일이 일어나기 때문에, 전체적인 웹 서버 처리량도 줄어들게 된다.

Sample Program
com.ajax.ValidationServlet
package com.ajax;
import java.io.IOException;
import java.util.HashMap;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidationServlet extends HttpServlet {
private ServletContext context;
private HashMap accounts = new HashMap();
public void init(ServletConfig config) throws ServletException {
this.context = config.getServletContext();
accounts.put("greg","account data");
accounts.put("duke","account data");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
accounts.put(targetId.trim(), "account data");
request.setAttribute("targetId", targetId);
context.getRequestDispatcher("/success.jsp").forward(request, response);
} else {
context.getRequestDispatcher("/error.jsp").forward(request, response);
}
}
}


Ø doGet() : AJAX 엔진을 통하여 전달된 Request 처리한다.
Ø doPost() : 사용자 Account 추가한다.
<html>
<head>
<script type="text/javascript">
var req;
var target;
var isIE;
function initRequest(url) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
if (!target) target = document.getElementById("userid");
var url = "validationservlet?id=" + escape(target.value);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = req.responseXML.getElementsByTagName("valid")[0].childNodes[0].nodeValue;
setMessageUsingDOM(message);
var submitBtn = document.getElementById("submit_btn");
if (message == "false") {
submitBtn.disabled = true;
} else {
submitBtn.disabled = false;
}
}
}
}
function setMessageUsingInline(message) {
mdiv = document.getElementById("userIdMessage");
if (message == "false") {
mdiv.innerHTML = "<div style="color:red">Invalid User Id</div>";
} else {
mdiv.innerHTML = "<div style="color:green">Valid User Id</div>";
}
}
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// if the messageBody element has been created simple replace it otherwise
// append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
function disableSubmitBtn() {
var submitBtn = document.getElementById("submit_btn");
submitBtn.disabled = true;
}
</script>
<title>Form Data Validation using AJAX</title>
</head>
<body omload="disableSubmitBtn()">
<h1>Form Data Validation using AJAX</h1>
<hr/>
<p>
This example shows how you can use AJAX to do server-side form data validation without
a page reload.
</p>
<p>
In the form below enter a user id. By default the user ids &quot;greg&quot; and &quot;duke&quot;
are taken. If you attempt to enter a user id that has been taken an error message will be
displayed next to the form field and the &quot;Create Account&quot; button will be
disabled. After entering a valid user id and selecting the &quot;Create Account&quot;
button that user id will be added to the list of user ids that are taken.
</p>
<form name="updateAccount" action="validate" method="post">
<input type="hidden" name="action" value="create"/>
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td><b>User Id:</b></td>
<td>
<input type="text"
size="20"
id="userid"
name="id"
omkeyup="validateUserId()">
</td>
<td>
<div id="userIdMessage"></div>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input id="submit_btn" type="Submit" value="Create Account">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...