-
Ajax) get방식/ post 방식 데이터를 받기Front/js 2024. 7. 10. 12:36
▤ 목차
✔ 기본적인 세팅
get 방식과 post 방식 모두, 서버에 요청을 하는 메서드이다.
이때 get 방식은 url뒤에 붙여서 보낸다.
⌨ html 파일
<script type="text/javascript"> window.onload=()=>{ document.querySelector("#btnGet").onclick = getFunc; document.querySelector("#btnPost").onclick = postFunc; } </script> </head> <body> <h2>Ajax get,post 요청</h2> <form name="frm"> 이름: <input type="text" name="name" value="tom"><br> 나이: <input type="text" name="age" value="23"><br> <input type="button" value="get" id="btnGet"> <input type="button" value="post" id="btnPost"> <div id="show"></div> </form> </body>이렇게 get 버튼을 누르면 get방식으로 post 버튼을 누르면 post 방식으로 데이터를 넘기도록 하겠다.
💻 getpost.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% //html 파일에서 받아온다. fName 확인 String irum = request.getParameter("name"); String nai = request.getParameter("age"); %> <%=irum + "님의 나이는 "+ nai+"살" %>
✔ get 방식
⌨ 코드
let xhr; function getFunc(){ //alert('a'); let irum = frm.name.value; let nai = frm.age.value; //alert(irum+" " +nai); fName="getpost.jsp?name="+irum+"&age="+ nai; //html은 클라이언트 단에서 실행되는 것임. jsp는 서버단 xhr = new XMLHttpRequest(); xhr.open('get',fName,true); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ getprocess(); }else{ alert("요청 실패:"+ xhr.status); } } } xhr.send(null); } function getprocess(){ let data = xhr.responseText; let ss ="get 요청 결과" +data; document.querySelector("#show").innerText=ss; }www.Ex.com?id=username&password=1234
데이터는 key와 value 쌍으로 넣어야한다.
2개 이상의 key-value 쌍 데이터를 보낼때는 & 마크로 구분해준다.
url에 붙이므로, http 패킷의 해더에 포함되어 서버에 요청한다.
body에 특별한 내욜을 넣을 것이 없기에 body가 빈상태로 보내진다.
content-Type이라는 헤더필드는 들어가지 않는다.
URL에 표현되므로 특정 페이지를 다른 사람에게 접속하게 할 수 있다.
다만 데이터를 보내는 양의 한계가 있다.
✔ post 방식
⌨ 코드
let xhr; function postFunc(){ //alert('a'); let irum = frm.name.value; let nai = frm.age.value; //alert(irum+" " +nai); xhr = new XMLHttpRequest(); xhr.open('post',"getpost.jsp",true); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ postprocess(); }else{ alert("요청 실패:"+ xhr.status); } } } xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("name="+irum+"&age="+ nai); } function postprocess(){ let data = xhr.responseText; let ss ="post 요청 결과" +data; document.querySelector("#show").innerText=ss; }데이버 전송을 기반으로 한 요청 메서드이다.
GET 방식은 URL에 데이터를 붙여서 보내는 반면, post 방식은 URL에 붙여서 보내지 않고
body에 데이터를 넣어서 보낸다.
헤더 필드 중 데이터를 설명하는 Content-Type이라는 헤더필드(데이터 타입 명시)가 들어간다.
😊정리
post 방식이든 get 방식이는 클라이언트 측에서 볼 수 있다.
바로 보이느냐, 아니느냐의 차이이다. 두방식 전부 보안을 생각한다면 암호화해야한다.
GET방식의 요청은 캐싱(한번 접근 후, 요청할 시 빠르게 접근하기 위해 데이터를 저장해놓는다.)때문에 POST방식보다 빠르다.
'Front > js' 카테고리의 다른 글
JS의 라이브러리 (jQuery) (0) 2024.07.11 Ajax 사용, DB 읽어와서 웹브라우저에 보이기(레거시 방식 jsp) (2) 2024.07.10 Ajax( Asynchronous JavaScript and XML / XMLHttpRequest ) (2) 2024.07.09 JavaScript) 모듈이란? (0) 2024.07.08 객체에 대해서(생성과 중첩 객체) (2) 2024.07.05