[펌] GET 방식과 POST 방식

-------------------------------------------------------------------------------------------------

                                                                출처: http://chocodonut.tistory.com/59

-------------------------------------------------------------------------------------------------

 

아래 소스 코드는 웹 페이지에 들어 있는 버튼을 눌러 고객의 이름을 가져오고자 할 때 해당 버튼에 지정할 수 있는 핸들러 예제이다. GET 방식으로 구현한 것과 POST 방식으로 구현한 것의 차이점을 비교해 보자.

참고로 GET은 서버에서 데이터를 가져오기 위한 수단이고, POST는 서버와 상호작용하여 서버측 상태를

바꿀 수 있는 수단이다.

1. GET 방식으로 구현

1.function GetCustomerName() {

2.    var name = document.getElementById("name").value;

3.    createRequest(); // Creates a new Request object

4.    var url = "Customer.php?name=" + escape(name);

5.    request.open("GET", url, true);

6.    request.onreadystatechange = updatePage; // Link to Event Handler

7.    request.send(null);

8.}

 

 

2. POST 방식으로 구현

01.function GetCustomerName() {

02.    var name = document.getElementById("name").value;

03.    createRequest();

04.    var url = "Customer.php";

05.    request.open("POST", url, true);

06.    request.onreadystatechange = updatePage;

07.    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

08.    request.send("name" + escape(name));

09.}

 

 

또한 GET 방식은 브라우저 Cache를 사용하기 때문에 만약 제품의 판매량과 같이 버튼을 누를 때마다

데이터가 매번 새롭게 갱신돼야 하는 상황을 구현하기 위해선 아래와 같이 의미없는 데이터를 서버로

전달하는 꼼수를 쓸 수도 있다.

 

1.function SoldList() {

2.    createRequest();

3.    var url = "getProductSold.php";

4.    url += "?dummy=" + new Date().getTime(); // Cache 때문에 사용하는 무의미한 값

5.    request.open("GET", url, true);

6.    request.onreadystatechange = updatePage;

7.    request.send(null);

8.}

 

 

Source Code.txt

 

Source Code.txt

0.0MB