Ajax - Asynchronous JavaScript And XML (2/2)

가장 많이 사용하는 

jQuery의 $.ajax 방식에 대해 알아보도록 하자

일단 코드를 짜봤다.

<h1>jQuery Ajax $.ajax() 함수</h1>
<button id="btn1">ajax get</button>
<br/>
<input type="text" id="userid" />
<input type="password" id="pwd" />
<button id="btn2">ajax post</button>

<div id="result">결과 출력</div>

<script>
$(document).ready(function() {
   $('#btn1').click(function() {
      $.ajax({
         type: 'get', /* 요청 방식 */
         url: 'load_test.txt', /* 요청 주소 */
         success: function(res, status, xhr) {
            $('#result').html(res);
         }, /* 성공 응답 callback */
         error: function(xhr, status, error) {
            alert(error);
         } /* 실패 응답 callback */
      });
   });
   
   $('#btn2').click(function() {
      $.ajax({
         type: 'post',
         url: 'ajax_test.jsp',
         /* contentType: 'application/x-www-urlencoded; charset=utf-8', */
         data: {id: $('#userid').val(), pw: $('#pwd').val()},
         success: function(res, status, xhr) {
            $('#result').html(res);
         }
      });
   });
   
});
</script>

get방식이던, post 방식이던

디렉토리에 포함된 txt 파일 or jsp를 서버로 보내

그 결과값을 받는 형식의 코드다

이미지는 어떤 것이든 상관없고

txt파일의 내용은 이러하다

<h2>jQuery Ajax load() 함수 테스트</h2>
<p id="p1">여기는 단락(p1)입니다...</p>
<div id="d1">
    <img src="images/november.jpg" />
</div>

post에서 보내는 jsp 파일의 형식은 이렇게 된다.

<%request.setCharacterEncoding("UTF-8"); %>
<b>ID:</b> ${param.id}<br/>
<b>PW:</b> ${param.pw}<br/>

이 코드를 실행하면

이런 페이지가 뜬다.

get방식을 하면

간단하다.

텍스트 정보와, 텍스트 정보에 포함된 이미지를 불러오는 코드로 인해

디렉토리에 저장된 이미지 파일을 출력하게 된다.

(사진이 너무 길어 짤랏다)

포스트 방식은 이렇게 된다.

이렇게 보아서는 post와 get방식에 별 차이가 없는 듯 보이나

데이터 정보의 경우 post는 서버에서 보내주는 패키지를 열어보아야 보인다.

실무에서는 다 암호화 처리를 해서 보내줄 것이다.

만약 아이디는 일정 글자 길이 이상 또는 아이디 중복체크, 비밀번호는 특수문자가 포함된 문자열로 하고싶다면

post버튼을 클릭했을 때 문자열을 체크하는 코드를 넣어

밑에 출력해주면 된다.

이러한 내용은 나중에 웹프로젝트를 통해 적용해보아야 겠다.