ajax post

get vs post

web page에서 다른 페이지로 양식 데이터를 전송하는 방법은 크게 get과 post 방식이 있다.

간단히 말해서 get은 page.php?page=2&search=ajax 와 같은 방식을 url에 데이터를 붙여나가는 방식이다. 이에 반해 post는 HTTP 데이터 전송의 내부(body)에 데이터를 포함시켜 전송하는 방식이다.

둘 중에 어떤 것을 사용할 것인가는 전송하는 데이터의 종류나 보안정책에 따라 달라진다. 예를 들어 로그인이나 회원정보를 url 끝에 붙이는 것은 위험한 방식이다. 이럴 때는 post를 사용하는 것이 좋다. 또한 첨부파일과 같은 데이터를 전송할 때는 post를 사용해야 한다. 그러나 page 정보 같은 간단하거나 감출 필요가 없는 데이터 전송에는 get이 보다 쉽고 효율적이다. 예를 들어 웹브라우저에서 이전, 다음 방문경로로 이동하고자 할 때 post는 페이지를 새로고침 해야 하는 불편이 있다. 데이터 저장이나 삭제 같은 작업이 있을 때는 이 작업을 다시 한 번 전송하게 되는 문제도 발생하게 된다.

웹 페이지의 구성 환경과 목적에 따라 알맞은 방식을 선택하면 된다.

그리고 get이냐 post냐 하는 선택에 관한 정보는 아래 링크에서 좀 더 자세히 알 수 있다.

http://www.w3schools.com/tags/ref_httpmethods.asp

이전 글 ajax 이해에서 살펴본 것은 get type ajax이다. 여기서는 post 방식에 대해 살펴보자.

 

ajax post

ajax를 처리하는데 있어서 post라고 해서 get과 크게 다른 것은 없다. 다만 전송 type을 post로 해주고 페이지 로드를 요청할 때 데이터를 전송해주면 된다.

그런 예제를 하나 만들어보고 테스트해보기로 하자.

 

 

ajax 코드 부분은 ajax 이해에서 본 코드와 크게 다를 것은 없어보인다.

다만 xmlhttp.send(data);와 같이 페이지 로드를 요청하는 send() 함수 안에 data를 추가 했다. 이 값인 앞의 코드에서 var data = “username=” + username + “&userjob=” + userjob;과 같이 했으므로 “username=홍길동&userjob=웹디자이너”처럼 될 것이다.

또 하나 크게 다른 부분이라면 아래 코드가 추가된 것이다.

xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

이 코드는 데이터를 전송할 때 인코딩을 설정하는 것이다.

ajax는 기본적으로 모든 데이터를 utf-8 인코딩으로 주고 받는다. 따라서 한글과 같은 문자를 제대로 전송하고자 한다면 위 코드가 반드시 있어야 한다.

 

jQuery.post

jQuery는 위에서 살펴본 ajax post를 보다 간단히 처리할 수 있는 함수를 제공하는 데 바로 $.post() 함수이다.

간단한 사용법은 다음과 같다.

기본사용법: $.post( url, [data], success);
실제사용예: $.post( “a.php”, { username: ‘홍길동’, userjob: ‘웹디자이너’}, function(data){//결과} );

데이터는 {} 안에 “변수명: 값”의 형식으로 입력하며 둘 이상이면 쉼표(,)로 구분한다. 요청이 완료된 후에 실행할 코드는 function(data){ //코드 입력} 함수 안에 입력한다. 이 때 함수가 받아오는 인자 data는 페이지(a.php)로부터 받아온 결과이다.

예제로 살펴보자.

post1.php는 위의 코드와 같다.

 

 

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기