서버로 요청하기
- 서버로 요청을 할 때에는 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방식으로 써야합니다:
간단한 GET 요청:
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();위 예제에서는 이미 캐쉬된 결과를 볼 수도 있습니다. 그런 경우를 피하려면, 유니크 ID를 URL에 넣어주셔야 합니다.
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();GET 방식으로 요청을 보내고 싶으시면, 정보를 URL에 입력해주시면 됩니다.
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();간단한 POST 요청:
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();HTML 형식으로 POST 요청을 하려면, setRequestHeader()를 이용하여 HTTP 헤더 정보를 넣어주시면 됩니다. 그리고 send() 메소드에 보내려는 데이터정보를 넣어주시면 됩니다.
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");open() 메소드의 url 파라미터는 서버에 위치한 파일의 주소입니다.
xhttp.open("GET", "ajax_test.asp", true);여기서 말하는 파일은 .txt, .xml 파일처럼 평범한 파일들, 또는 .asp, .php 와 같은 서버스크립팅 파일입니다. (서버스크립팅 파일들은 서버에서 응답을 보내기 전에 특정 일을 수행할 수 있습니다.).
ajax를 사용하려면 3번째 파라미터는 무조건 true여야 합니다.
xhttp.open("GET", "ajax_test.asp", 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();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란? - 이벤트 종류 (0) | 2016.06.12 |
|---|---|
| AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
| Ajax 란? - Ajax 시작하기 (1) | 2016.06.12 |
| [jQuery] 2. jQuery Basics ( 기본 ) (0) | 2015.08.06 |
| [jQuery] 1. jQuery 시작하기 (0) | 2015.08.06 |