XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다.
서버에 요청을 보내기 위해 XMLHttpRequest 객체의 open() 및 send() 메서드를 사용합니다.
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();
방법 | 설명하다 |
---|---|
열기( 메소드 , URL , 비동기 ) | 요청 유형, URL 및 요청을 비동기적으로 처리할지 여부를 지정합니다. 메소드 : 요청 유형 GET 또는 POST url : 서버에 있는 파일의 위치 async : true(비동기) 또는 false(동기) |
보내기( 문자열 ) | 서버에 요청을 보냅니다. string : POST 요청에만 사용됩니다. |
GET은 POST보다 간단하고 빠르며 대부분의 상황에서 작동합니다.
그러나 다음과 같은 상황에서는 POST 요청을 사용하십시오.
캐시된 파일을 사용할 수 없습니다(서버의 파일 또는 데이터베이스 업데이트).
대용량 데이터를 서버로 전송(POST에는 데이터 크기 제한이 없음)
알 수 없는 문자가 포함된 사용자 입력을 보낼 때 POST는 GET보다 더 안정적이고 신뢰할 수 있습니다.
간단한 GET 요청:
위의 예에서는 캐시된 결과를 얻을 수 있습니다.
이를 방지하려면 URL에 고유 ID를 추가하세요.
GET 메소드를 통해 정보를 보내려면 URL에 정보를 추가하세요.
간단한 POST 요청:
HTML 양식과 같은 데이터를 POST해야 하는 경우 setRequestHeader()를 사용하여 HTTP 헤더를 추가하세요. 그런 다음 send() 메소드에서 보내려는 데이터를 지정하십시오.
방법 | 설명하다 |
---|---|
setRequestHeader( 헤더,값 ) | 요청에 HTTP 헤더를 추가합니다. header : 헤더의 이름을 지정합니다. value : 헤더의 값을 지정합니다. |
open() 메소드의 url 매개변수는 서버에 있는 파일의 주소입니다.
xmlhttp.open("GET","ajax_test.html",true);
파일은 .txt 및 .xml과 같은 모든 유형의 파일이거나 .asp 및 .php(응답을 다시 보내기 전에 서버에서 작업을 수행할 수 있음)와 같은 서버 스크립트 파일일 수 있습니다.
AJAX는 비동기 JavaScript 및 XML을 나타냅니다.
AJAX에 XMLHttpRequest 객체를 사용하려면 해당 open() 메서드의 async 매개 변수를 true로 설정해야 합니다.
xmlhttp.open("GET","ajax_test.html",true);
웹 개발자의 경우 비동기 요청을 보내는 것은 엄청난 개선입니다. 서버에서 수행되는 많은 작업에는 시간이 많이 걸립니다. AJAX 이전에는 이로 인해 애플리케이션이 중단되거나 중지될 수 있었습니다.
AJAX를 사용하면 JavaScript는 서버의 응답을 기다릴 필요가 없지만 대신 다음을 수행합니다.
서버 응답을 기다리는 동안 다른 스크립트 실행
준비가 되면 응답을 처리하세요.
async=true를 사용하는 경우 onreadystatechange 이벤트에서 준비 상태에 대한 응답으로 실행될 함수를 지정합니다.
onreadystatechange에 대한 자세한 내용은 이후 장에서 배우게 됩니다.
async=false를 사용하려면 open() 메서드의 세 번째 매개변수를 false로 변경합니다.
xmlhttp.open("GET","test1.txt",false);
async=false를 사용하는 것은 권장되지 않지만 일부 소규모 요청의 경우에는 가능합니다.
JavaScript는 계속하기 전에 서버 응답이 준비될 때까지 기다립니다. 서버가 사용량이 많거나 느리면 애플리케이션이 정지되거나 중지됩니다.
참고: async=false를 사용하는 경우 onreadystatechange 함수를 작성하지 말고 send() 문 뒤에 코드를 넣으세요.