반응형
타진
개발 그라운드
타진
전체 방문자
오늘
어제
  • 분류 전체보기 (136)
    • 프로그래밍 (65)
      • Java (28)
      • Android (1)
      • Web (19)
      • Web-Spring (12)
      • R (5)
      • Angular (0)
    • 운영체제 (17)
      • Linux (14)
      • Docker(vmware) (3)
    • 클라우드 (4)
      • aws (0)
      • aws_handson (4)
    • 개발문제해결 (25)
      • Exception (12)
      • 알고리즘 문제풀이 (13)
    • 그 외 개발관련 (23)
    • 일상 (1)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • cfn
  • stackset
  • github actions
  • jdk14
  • angular cli
  • 빠른 시작 끄기
  • alt tab
  • chromium edge
  • 문법 체크
  • AWS
  • transit gateway peering
  • 4700u
  • github
  • 일어키보드
  • handson
  • 키보드매핑
  • 빠른 시작 켜기
  • ubuntu terminal
  • Github CLI
  • GIT
  • transit_gateway
  • wsl_update_x64
  • docker ps
  • docker desktop
  • docker
  • vmmem
  • 정올알고리즘 정올 알고리즘
  • wsl2
  • 크로미움 엣지
  • 라이젠

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
타진

개발 그라운드

Ajax - Asynchronous JavaScript And XML (2/2)
프로그래밍/Web

Ajax - Asynchronous JavaScript And XML (2/2)

2017. 11. 12. 21:34
반응형



가장 많이 사용하는 


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버튼을 클릭했을 때 문자열을 체크하는 코드를 넣어


밑에 출력해주면 된다.


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

반응형

'프로그래밍 > Web' 카테고리의 다른 글

JSP Filter  (0) 2017.11.13
Ajax - Asynchronous JavaScript And XML (1/2)  (1) 2017.11.12
JSP에서 쿠키와 세션  (0) 2017.11.11
    '프로그래밍/Web' 카테고리의 다른 글
    • CSS 파일이 변경 후 적용이 안될 때
    • JSP Filter
    • Ajax - Asynchronous JavaScript And XML (1/2)
    • JSP에서 쿠키와 세션
    타진
    타진
    vulnerable1324@gmail.com

    티스토리툴바