http://housecoding.tistory.com/38 를 참고하여 이제 첫걸음마를 때보자.
예제파일:
ajaxsample.war1. 이클립스의 새로운 프로젝트를 생성 본인은 ajaxsample 라는 프로젝트로 이름을 지어서 생성하였다.
- 기본적으로 시작하기전에 프로젝트 안에 lib폴더안에 json 라이브러리를 추가시켜준다.
혹시나 라이브러리가 없다면 아래 파일을 추가한다.
2. html 파일 생성 한다. 본인은 ajaxSample.HTML 로 파일을 생성 했다.
3. <script src="js/jquery-1.11.3.min.js"></script> 주소를 스크립트 하고 js폴더를 만들어서 js 라이브러리를 넣어준다.`
없다면 여기서 받아서 사용하라.
4. 위 주소의 규칙을 가져와 복사해서 <script></script> 사이에 집어 넣는다.
예)
<script type="text/javascript">
$(document).ready(function(){
$('#memberId').keyup(function(){
var getMemberId = $(this).val(); //memberId 로 지정된 인풋박스의 값을 가지고 온다.
//alert(getMemberId);
$.ajax({
url : '/ajaxsample/memberIdSearch', //데이터를 조회할 경로를 설정
type : 'POST', // get, post - 보안상 주로 post 를 사용한다.
//data : $('#'+getFormId).serialize(), // form을 통채로 넘길때, {'name':'홍길동', 'age':'20'}
dataType: 'text', //text, json, html, xml, script - 어떤방식으로 데이터를 받을것인지를 결정한다.
async : false, // true 비동기화, false 동기화방식 -- 기본디폴드 값은 true비동기화 이다. 설정하지않으면 기본디폴드 값으로 사용된다.
success : function(data){
alert(data)
//data에 object 형식으로 데이타가 담겨있다.
},
errer : function(err) {
alert(err);
},
statusCode : {
400: function(){
alert("Popup 화면 생성에 실패하였습니다.");
},
404: function(){
alert("Profile정보가 존재하지 않습니다.");
},
501: function(){
alert("Profile정보 조회중 서버 오류가 발생하였습니다.");
}
}
});
});
});
//자바스트립트로 소스를 작성할경우 100줄이 넘는 코드를 30줄로 줄였당.키키키키키키키키
</script>
5. 폼 태그를 만들었다.
<body>
<!-- ajax를 확인하기 위해 태그작성 -->
<h1>회원가입</h1>
<table>
<tr>
<td>
ID
</td>
<td>
<input type="text" name="memberId" id="memberId">
</td>
</tr>
<tr>
<td>
PW
</td>
<td>
<input type="password" name="memberPw" id="memberPw">
</td>
</tr>
<tr>
<td>
PW2
</td>
<td>
<input type="password" name="memberPw2" id="memberPw2">
</td>
</tr>
</table>
</body>
6. 패키지를 만들어서 그안에 서블릿을 만들었다.
//ajax 에서 파라미터 를 받아와서 서블릿에서 바로 화면이 표현된다.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String memberId = request.getParameter("memberId");
String memberIdCheck = "";
System.out.println("memberId : "+memberId);
if("ksmart".equals(memberId)){
memberIdCheck = "Y";
}else {
memberIdCheck = "N";
}
response.getWriter().append("{'memberIdCheck':"+memberIdCheck+"}");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
7. 서블릿을 작성하고 나면 데이터베이스가 있다는 가정하에 if 문으로 ksmart 가 memberId 와 일치하면 y 아니면 n 으로 나오게 하였다.
8. ajax 를 활용하기 위해 입력값이 잘주고 잘받았는지 확인했다. dataType 이 지금까지는 text 였는데 다시 html 파일로 가서 dataType 의 'text'를 'json' 으로 바꿔준다.
dataType: 'json'
9.서블릿 파일 안에 내용에 아래 생성자를 추가 하여 put 메서드를 사용 하여 키와 값을 넣는다. 그러고 나서 toJSONString 을 사용하여 String 으로 형변환을 해준다.
JSONObject jsonformat = new JSONObject();
jsonformat.put("memberIdCheck", memberIdCheck);
response.getWriter().append(jsonformat.toJSONString());
10. 그럼 이제 화면에서 text 에서 했던것 처럼 바꿔주는지 확인한다.
짠 ~ ajax 성공
'클라이언트 측 언어 > Ajax' 카테고리의 다른 글
| JSON 이란? (0) | 2015.10.16 |
|---|---|
| ajax 기초 다지기 (0) | 2015.10.16 |