Ajax에 대한 정의와
이를 활용한 간단한 예제 코딩을 살펴보겠다.
Ajax
Ajax란 Asynchronous JavaScript + XML의 약어
2005년 James Garrett(제임스 가렛)이 소개한 개발 방법이다.
자바스크립트, CSS 등의 기존 웹기술을 그대로 활용하며
비동기 통신이며 페이지 이동 없이 빠르게 화면을 전환할 수 있다.
하지만 브라우저 호환성에 대한 한계가 있고
유지보수 또는 디버깅이 어렵다는 등의 장단점이 있다.
jQuery와 함께 사용할 수 있다. 홈페이지에서 라이브러리를 다운로드하여 이클립스에 옮겨주면 된다.
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
- XMLHttpRequest
XMLHttpRequest은 웹서버와 비동기 통신을 하는 자바스크립트의 객체이다.
다양한 웹 브라우저가 각각 브라우저에 맞는 형태로 개발되어,
객체를 생성하고 사용하는 방법이 다르다.
XMLHttpRequest 객체 생성
XMLHttpRequest을 브라우저마다 다르게 객체 생성하는 방법이다.
var xmlHttp;
function createXMLHttpRequest(){
var xmlReq = false;
if(window.XMLHttpRequest){
xmlReq = new XMLHttpRequest;
}else if(window.ActiveXObject){
try {
xmlReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlReq;
}
if문은 Microsoft가 아닐 때 객체를 생성하는 방법이고
else if문은 Microsoft 브라우저일 때이다.
그 중에서도 try문은 버전 5.0 이후일 때, catch문은 버전 5.0 이전일 때로 나눈다.
마지막에는 xmlReq을 반환한다.
createXMLHttpRequest() 메서드를 호출하면 xmlReq이 반환되어진다.
- jQuery와 Ajax를 사용하여 데이터 보내기
test.jsp
<body>
제목: <input type="text" id="subject"/><br/>
내용: <input type="text" id="content"/><br/>
<input type="button" id="sendButton" value="보내기"/><br/>
<div id="resultDIV"></div>
</body>
웹페이지에 보여질 body 부분이다.
resultDIV는 실행 결과가 보여질 부분으로 설정하였다.
<script type="text/javascript" src="<%=cp%>/data/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sendButton").click(function(){
var params = "subject=" + $("#subject").val() + "&content=" + $("#content").val();
$.ajax({
type:"POST",
url:"test_ok.jsp",
data:params,
dataType:"xml",
success:function(args){
$(args).find("status").each(function(){
alert($(this).text());
});
var str = "";
$(args).find("record").each(function(){
var id = $(this).attr("id");
var subject = $(this).find("subject").text();
var content = $(this).find("content").text();
str += "id" + id + ",subject" + subject + ",content" + content + "<br/>";
});
$("#resultDIV").html(str);
},
beforeSend: showRequest,
error:function(e){
alert(e.responseText);
}
});
});
});
sendButton은 '보내기' 버튼이다. 이를 누르면(=click) 아래의 함수가 실행된다.
params는 body에서 입력해 준 제목과 내용이다.
aJax 괄호 속 내용을 살펴보겠다.
type은 post 방식이며,
url은 데이터를 보낼 경로를 지정해 준다.
data는 위에 입력한 것처럼 params에 담아서 보내며
dataType은 경로에서 돌아온 데이터의 타입을 의미한다. xml 외에도 html 혹은 json도 가능하다.
success는 값이 성공적으로 돌아오고 실행될 함수를 지정해 준다.
each는 반복작업 명령어이다.
밑에 나올 파일인 test_ok에서 'status'가 있으면 alert에서 값을 보여준다.
그다음 'record'를 찾으면 attr 즉 attribute 속성인 id 값인 1 그리고 2를 담는다.
str에 값들을 담아 html(str)로 화면에 데이터가 보이게 한다.
beforeSend는 데이터를 보내기 전에 showRequest라는 함수를 실행하도록 하며
에러가 났을 경우 alert로 에러를 보여주게 한다.
function showRequest(){
var flag = true;
if(!$("#subject").val()){
alert("제목을 입력하세요!");
$("#subject").focus();
return false;
}
if(!$("#content").val()){
alert("내용을 입력하세요!");
$("#content").focus();
return false;
}
return flag;
}
subject의 value 즉 값이 없으면 실행되는 if문이다.
content도 마찬가지이며 반환값을 false로 지정한다.
모두 값이 있다면 flag를 내보내며, 이미 flat= true로 선언하였기 때문에 true값이 나온다.
test_ok.jsp
<%@ page contentType="text/xml; charset=Utf-8"%>
<%
String subject = request.getParameter("subject");
String content = request.getParameter("content");
%>
<root>
<status>권장도서</status>
<record id="1">
<subject><%=subject %></subject>
<content><%=content %></content>
</record>
<record id="2">
<subject>aa</subject>
<content>bb</content>
</record>
</root>
지정한 데이터 타입은 xml이므로 contentType에 xml을 작성해 준다.
test.jsp에서 받아올 사용자 입력 subject와 content를 선언한다.
이 외에는 위에 설명했던 내용들과 데이터를 비교하면서 확인하면 될 것 같다!
3월 15일 화요일 🌕
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [Javascript] DOM(Document Object Model) - HTML DOM 객체 생성 (0) | 2022.03.17 |
|---|---|
| [Ajax] get 또는 post 방식으로 데이터 보내기, 자바스크립트 메소드 (0) | 2022.03.16 |
| [JSP/Servlet] 필터(Filter) 사용법 및 Encoding 예제 (0) | 2022.02.24 |
| [JSP/Servlet] 파일 다운로드 방법 및 예제 (0) | 2022.02.24 |
| [Servlet] 쿠키(Cookie) 생성 예제 & 파일 업로드 (0) | 2022.02.23 |
