[송규남의 IT다이어리] 제이쿼리(jQuery) 아홉번째 이야기
노용철
view : 666
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 9
안녕하세요. 중앙HTA 송규남 강사입니다.
새해들어 처음 인사드립니다^^ 늦었지만 모두 새해 복 많이많이 받으세요~~
이번 시간에는 Ajax 통신을 jQuery를 이용해서 사용하는 방법에 대해서 알아보겠습니다.
먼저 Ajax(Asynchronous Javascript XML)는 서버와의 비동기통신 방식을 지원하는 자바스크립트 기술입니다.
웹브라우져가 아닌 XMLhttpRequest 객체를 통해 웹서버와 통신을 합니다. 웹서버의 응답결과는 xml 또는 json 형태입니다.
Ajax를 이용해서 서버와 통신을 하게 되면 페이지 이동없이 화면에 결과가 반영되는 특징이 있습니다.
이러한 Ajax 방식을 jQuery를 사용해서 구현하게 되면 순수한 자바스크립트를 이용한 것 보다 훨씬 쉽게 구현할 수 있습니다.
먼저 jQuery.com 사이트로 이동합니다!!
그럼 jQuery를 사용해서 xml 응답결과를 Ajax 방식으로 전달받아 html 페이지에 출력해 보는 간단한 예제를 만들어 보겠습니다.
이클립스에서 DynamicWeb Project를 하나 생성합니다.
위에서 생성한 xml 파일에 아래와 같이 작성합니다.
<?xml version="1.0" encoding="UTF-8"?>
<booklist>
<book>
<title>jQuery완전정복</title>
<price>10000</price>
</book>
<book>
<title>HTML5/CSS3</title>
<price>20000</price>
</book>
<book>
<title>Spring3.0</title>
<price>30000</price>
</book>
</booklist>
test01_ajax.html 파일을 추가해 아래와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.ajax({
url:"booklist.xml",
dataType:"xml"
type:"get"
success:function(data){
$(data).find("book").each(function(){
var title=$(this).find("title").text();
var price=$(this).find("price").text();
$("#bookList").append("<div>"+title+","+price+"</div>");
});
}
});
});
});
</script>
</head>
<body>
<h1>우리우리 온라인 서점입니다!</h1>
<input type="button" value="도서정보" id="btn1">
<div id="bookList">
</div>
</body>
</html>
위의 코드를 실행하고 도서정보 버튼을 누르면 booklist.xml에 있는 정보를 얻어와 div에 출력합니다.
//아래 코드는 버튼을 누르면 function을 수행하라는 것이지요?
$("#btn1").click(function(){
});
function 메소드안에 ajax로 데이터를 얻어와서 div에 출력하는 코드를 추가했습니다.
$("#btn1").click(function()
$.ajax({
url:"booklist.xml", → 요청할 서버주소를 적습니다.
dataType:"xml", → 응답 타입입니다. XML 또는 JSON이 됩니다.
type:"get", → 요청 방식입니다. get 또는 post 중 하나입니다.
이번에는 아이디 중복검사를 ajax로 이용해서 구현해 보겠습니다.
먼저 입력된 아이디를 전달받아 데이터베이스에 해당 아이디가 존재하는지 검사하는 idcheck.jsp 파일을 만듭니다.
아래와 같이 코드를 작성합니다.
<%@page import="java.io.PrintWriter"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
%@page import="test.db.DBConnection"%>
%@page import="java.sql.Connection"%>
%@page import="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC=KR"%>
<%
String id=request.getParameter("id");
Connection con=DBConnection.getConn();
String sql="select * from userinfo where id=?";
PreparedStatement pstmt=con.prepareStatement(sql);
pstmt.setString(1,id);
ResultSet rs=pstmt.executeQuery();
boolean result=false;
if(rs.next()){
result=true
}
rs.close();
pstmt.close();
con.close();
//결과를 xml로 응답하기
response.setContentType("text/xml;charset=utf-8");
PrintWriter pw=response.getWriter();
pw.print("<?xml version=＼"1.0＼"encoding=＼"UTF-8＼"?>");
pw.print("<data>");
pw.print("<result>"+result+"</result>");
pw.print("</data>");
%>
→ 파라미터로 전달받은 id를 데이터베이스에서 조회하여 해당 id가 존재하면 true 아니면 false를 xml로 응답하는 jsp 파일입니다.
jsp를 공부하는 시간은 아니므로 자세한 설명은 생략합니다. 실행을 시켜보면 아래와 같은 결과가 화면에 나타납니다.
html 페이지를 하나 추가하고 아래와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javacript">
$(document).ready(function(){
$("#btn1").click(function(){
var id=$("#id").val();//입력된 아이디
$.ajax({
url:"idcheck.jsp",
data:"id="+id, //서버로 전송될 파라미터
type:"post", //post 방식으로 요청합니다.
dataType:"xml",//응답콘텐츠 타입
success:function(data){//응답이 성공하면 function 수행
//응답데이터에서 result 태그의 텍스트값 얻어오기
var using=$(data).find("result").text();
if(using='true'){
//span에 결과 출력하기
$("#idcheck").html("사용중인 아이디입니다");
}else{
$("#idcheck").html("사용가능한 아이디입니다");
}
}
});
});
});
</script>
</head>
<body>
<form method="post" action="insert.jsp">
<fieldset>
<legend>회원가입</legend>
<url>
<li>
<lavel for="id">아이디</label>
<input type="text" name="id" id="id">
<input type="button" value="중복확인" id="btn1">
<span id="idcheck"></span>
</li>
<li>
<label for="pwd">비밀번호</label>
<label for="password" name="pwd" id="pwd">
</li>
<li>
<label for="email">이메일</label>
<input type="text" name="email" id="email">
</li>
<li>
<input type="submit" value="가입">
<input type="reset" value="취소">
</li>
</ul>
</fieldset>
</from>
</body>
</html>
CSS를 추가해 보겠습니다.
<style type="text/css">
fieldset {width:550px;}
ul li{list-style: none;margin:2px}
label {width:100px;display: inline-block;}
form input[type=text]{width:200px}
#idcheck{font-size: 12px,color:red}
</style>
아이디를 입력 후 중복확인 버튼을 눌러보면 ajax를 이용해 idcheck.jsp에서 결과를 얻어와 span 요소에 결과를 출력합니다.
잘못된 아이디를 입력하면 아래와 같이 결과가 출력됩니다.
이번 시간에는 jQuery Ajax를 사용하는 방법에 대해서 알아보았습니다.
다음시간에는 JSON을 사용한 Ajax 통신방법을 알아보도록 하며 다음 시간에 찾아뵙겠습니다 ^^
