XMLHttpRequest 객체는 서버와 데이터를 교환하기 위해 사용된다.
서버에 요청을 보낼
서버에 요청을 보내려면, 우리는 사용 open() 와 send() XMLHttpRequest 객체의 방법 :
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| 방법 | 기술 |
|---|---|
| open(method, url, async) | 요청의 유형을 지정 method : 요청의 유형 : GET 또는 POST url : 서버 (파일) 위치 async : true (비동기) 또는 false (동기) |
| send() | (사용 서버로 요청을 전송 GET ) |
| send(string) | (사용 서버로 요청을 전송 POST ) |
GET 또는 POST ?
GET 간단하고보다 빠른 POST , 대부분의 경우에 사용될 수있다.
그러나, 항상 사용 POST 경우 요청을 :
- 캐시 된 파일은 옵션 (서버에있는 파일이나 데이터베이스를 업데이트)하지 않습니다.
- 서버에 많은 양의 데이터를 전송 ( POST 더 크기 제한 없음).
- (알 수없는 문자를 포함 할 수 있습니다) 사용자의 입력을 전송, POST 보다 견고하고 안전 GET .
GET 요청
간단한 GET 요청 :
위의 예에서, 당신은 캐시 된 결과를 얻을 수 있습니다. 이를 방지하기 위해 추가 된 고유 ID to the URL: ID to the URL:
당신이 가진 정보를 보내려면 GET 있어서, 상기 URL에 정보를 추가합니다 :
POST 요청
간단한 POST 요청 :
하려면 POST , HTML 양식과 같은 데이터를 추가 HTTP header 함께 setRequestHeader() . 당신이에 보낼 데이터 지정 send() 방법 :
예
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); »그것을 자신을 시도 | 방법 | 기술 |
|---|---|
| setRequestHeader(header, value) | 요청에 HTTP 헤더를 추가합니다 header : 헤더의 이름을 지정합니다 value : 헤더 값을 지정합니다 |
URL이 - 서버에있는 파일
url 의 매개 변수 open() 메서드는 서버에있는 파일에 주소 :
xhttp.open("GET", "ajax_test.asp", true);이 파일은 .ASP와 (다시 응답을 전송하기 전에 서버에서 작업을 수행 할 수 있습니다) .php가 등이 .txt와 .xml 또는 서버 스크립트 파일과 같은 모든 종류의 파일이 될 수 있습니다.
비동기 - True 또는 False ?
AJAX는 비동기 자바 스크립트와 XML을 의미하고, XMLHttpRequest 객체는 AJAX의로 동작하는 async 의 매개 변수 open() 메소드 true로 설정해야합니다 :
xhttp.open("GET", "ajax_test.asp", true);비동기 요청을 보내기 웹 개발자를위한 거대한 개선이다. 서버에서 수행되는 작업의 대부분은 매우 시간이 소모됩니다. AJAX하기 전에이 작업이 중단 또는 중지 할 수있는 응용 프로그램을 일으킬 수 있습니다.
AJAX와 자바 스크립트는 서버의 응답을 기다릴 필요가 없습니다, 대신 할 수 없습니다 :
- 서버의 응답을 기다리는 동안 다른 스크립트를 실행할
- 상기 응답을 처리 할 때의 응답 준비
Async=true
비동기 = 사실을 클래스 = "notranslate"를 사용하는 경우, 응답이 인 onreadystatechange 이벤트의 준비가되었을 때 실행하는 함수를 지정합니다
예
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(); »그것을 자신을 시도 당신은 나중에 장에 인 onreadystatechange에 대한 자세한 내용을 배울 것입니다.
Async=false
사용하려면 async=false 의에서 세 번째 매개 변수 변경 open() 는 false 방법 :
xhttp.open("GET", "ajax_info.txt", false);사용 async=false 권장하지 않습니다,하지만 몇 가지 작은 요청이 확인 될 수 있습니다.
서버 응답이 준비 될 때까지 자바 스크립트가 계속 실행되지 않습니다 것을 기억하십시오. 서버가 사용 중이거나 느린 경우, 응용 프로그램이 중단 또는 중지됩니다.
참고 : 사용하는 경우 async=false , 인 onreadystatechange 함수를 작성하지 마십시오 - 그냥 후에 코드를 삽입 send() 문 :
예
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; »그것을 자신을 시도