AJAX 요청 보내기

XMLHttpRequest 객체를 생성한 후(이전 장을 참조하세요) 서버로 요청을 보내어야 합니다.

서버로 요청 보내기

서버로 요청을 보내기 위해 XMLHttpRequest 객체의 두 가지 메서드를 사용하며:

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

이 open() 메서드는 세 가지 매개변수를 받아들이며:

• 첫 번째 매개변수는 HTTP 요청 메서드입니다-GET, POST

• 두 번째 매개변수는 요청을 보낼 URL입니다

• 선택적인 세 번째 매개변수는 요청이 동기적이지 않은지 여부를 설정합니다（기본值为true）

send() 메서드는 선택적인 매개변수를 받아들입니다：

• GET 요청에서는 어떤 값도 전달하지 마십시오

• POST 요청에서는 전달이름=값에

HTTP 요청: GET과 POST는 무엇인가요?

에서GET메서드에서 브라우저는 폼 내용을（이름/쌍을 URL의 마지막에 추가합니다。

GET는 보안에 무관한 간단한 폼에 일반적으로 사용됩니다. GET은 간단한 폼에 많은 장점을 제공합니다。

• GET 요청은 캐시될 수 있습니다

• GET 요청은 브라우저의 이력 기록에 남습니다

• GET 요청은 북마크를 추가할 수 있습니다

• 감사한 데이터를 처리할 때는 GET 요청을 사용하지 않도록 합니다

• GET 요청은 길이 제한이 있습니다（오직2048개 문자（）

에서POST메서드에서 내용은 URL에 표시되지 않습니다。

폼 데이터에 감사한 정보나 개인 정보가 포함되어 있으면 항상 POST를 사용해야 합니다。

• POST 요청은 언제나 캐시되지 않습니다

• POST 요청은 브라우저의 이력 기록에 남지 않습니다

• POST 요청은 북마크를 추가할 수 없습니다

• 감사한 데이터를 처리할 때는 POST 요청을 사용하십시오

• POST 요청은 데이터 길이에 제한이 없습니다

GET 요청

다음 예제는 JavaScript로 간단한 Ajax GET 요청을 보내는 방법을 보여줍니다：

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

위의 예제에서 캐시된 결과를 받을 수 있습니다. 이를 방지하기 위해 URL에 랜덤 숫자를 추가하십시오：

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

GET 메서드로 정보를 전송하려면 정보를 URL에 추가하십시오：

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

POST 요청

다음 예제는 JavaScript로 간단한 Ajax POST 요청을 보내는 방법을 보여줍니다：

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

POST 메서드로 정보를 전송하려면 HTTP 헤더를 설정하고 setRequestHeader()를 사용하고 send() 메서드에서 전송할 데이터를 지정하십시오：

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

이 setRequestHeader() 메서드는 두 개의 매개변수를 받아들입니다：

• 첫 번째 매개변수는 제목 이름을 지정합니다

• 두 번째 매개변수는 제목 값을 지정합니다

URL-서버 상의 파일

메서드의 두 번째 매개변수(url) open()는 서버 상의 파일의 주소입니다.

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX는 JSON, XML, HTML, PHP, ASP, 텍스트 등 다양한 형식의 정보를 보내고 수신할 수 있습니다.

onreadystatechange 속성

XMLHttpRequest 객체는 응답을 처리하기 위해 실행할 함수를 정의할 수 있도록 합니다.

XMLHttpRequest 객체의 속성에서 정의된 응답 함수 onreadystatechange입니다.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

이 튜토리얼의 후반부에서 onreadystatechange 속성에 대해 더 많이 배울 수 있습니다.

동기 요청

메서드의 세 번째 매개변수 open()는 요청이비동기또는동기.

보내야 할동기요청을 보내면, open() 메서드의 세 번째 매개변수를 변경하십시오:false.

사용되면동기요청을 보내면, 응답 함수를 지정하지 않아도 됩니다:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

추천하지 않습니다동기요청, 왜냐하면:

• JavaScript는 서버가 응답이 준비되기 전까지 실행을 멈춥니다

• 서버가 바쁘거나 느릴 때, 애플리케이션은 멈추거나 중지됩니다

• 안좋은 사용자 경험을 가져옵니다