AJAX란? - 서버로 요청하기

서버로 요청하기

- 서버로 요청을 할 때에는 XMLHttpRequest객체에서 제공하는 open(), send() 메소드를 사용합니다.

예를들어, 아래처럼 사용합니다.

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "URL", true);

xhttp.send();

이런 식으로 말이죠.

이때 open()과 send()의 메소드 설명은 아래와 같습니다.

메소드	설명
open(method, url, async)	요청 타입을 정합니다. method: 요청 타입: GET 또는 POST url: 서버 (파일) 위치 async: true (비동기식) 또는 false (동기식)
send()	서버로 요청을 보낸다 (GET방식에서 사용)
send(string)	서버로 요청을 보낸다 (POST방식에서 사용)

GET 방식과 POST방식

GET 은 POST보다 단순하고 빠르며 대부분의 경우에 사용할 수 있습니다.

하지만 아래 경우에는 꼭 POST방식으로 써야합니다:

• A cached file is not an option (서버에 있는 파일이나 데이터베이스를 업데이트하는 경우).
• 서버로 많은 양의 데이터 전송이 필요한 경우 (GET방식은 전송할 데이터 사이즈 제한이 있으나 POST 방식은 사이즈 제한이 없습니다).
• (unknown characters를 포함할 수 있는) 사용자 input을 서버로 전송할 때 , POST 방식이 보안상 GET방식보다 좋습니다.

GET Requests

간단한 GET 요청:

예제1

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

실습하기 »

위 예제에서는 이미 캐쉬된 결과를 볼 수도 있습니다. 그런 경우를 피하려면, 유니크 ID를 URL에 넣어주셔야 합니다.

예제2

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

실습하기 »

GET 방식으로 요청을 보내고 싶으시면, 정보를 URL에 입력해주시면 됩니다.

예제3

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

실습하기 »

---

POST Requests

간단한 POST 요청:

예제1

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

실습하기 »

HTML 형식으로 POST 요청을 하려면, setRequestHeader()를 이용하여 HTTP 헤더 정보를 넣어주시면 됩니다. 그리고 send() 메소드에 보내려는 데이터정보를 넣어주시면 됩니다.

예제2

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");

실습하기 »

The url - 서버 상의 파일 주소

open() 메소드의 url 파라미터는 서버에 위치한 파일의 주소입니다.

xhttp.open("GET", "ajax_test.asp", true);

여기서 말하는 파일은 .txt, .xml 파일처럼 평범한 파일들, 또는 .asp, .php 와 같은 서버스크립팅 파일입니다.  (서버스크립팅 파일들은 서버에서 응답을 보내기 전에 특정 일을 수행할 수 있습니다.).

---

비동기식 - True or False?

ajax를 사용하려면 3번째 파라미터는 무조건 true여야 합니다.

xhttp.open("GET", "ajax_test.asp", true);

---

Async=true

예제

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

실습하기 »

---

Async=false

xhttp.open("GET", "ajax_info.txt", false);

async=false 로 사용하게되면 더이상 AJAX를 사용하는게 아닌게 되어버립니다. 이렇게 서버로 요청을 하게되면 서버에서 응답이 오기 전까지 화면에서 아무것도 할 수 없는 상황이 발생합니다.

예제

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

실습하기 »

자, 지금까지 AJAX를 이용한 서버로 요청 보내기에 대해서 알아보았습니다.

다음 포스팅에서는 응답을 받는 것에 대해서 알아보도록 하겠습니다.