자바스크립트의 Ajax 사용법

웹 애플리케이션이 점점 더 복잡해짐에 따라 동적 웹 페이지를 구현하는 데 비동기식 JavaScript 및 XML(Ajax) 기술이 점점 더 많이 사용되고 있습니다. Ajax를 사용하면 전체 페이지를 새로 고치지 않고도 백그라운드에서 비동기 요청을 보내 웹 페이지를 동적으로 업데이트할 수 있습니다. 이번 글에서는 JavaScript에서 Ajax를 사용하는 방법을 살펴보겠습니다.

1. XMLHttpRequest 객체 만들기

XMLHttpRequest 객체는 Ajax의 핵심입니다. HTTP 요청을 보내고 서버 응답을 받는 일을 담당합니다. JavaScript에서는 XMLHttpRequest 객체를 생성하여 Ajax 요청을 시작합니다.

var xhr = new XMLHttpRequest();

브라우저가 XMLHttpRequest를 지원하지 않는 경우 다음과 같이 ActiveXObject 사용을 고려할 수 있습니다.

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. HTTP 요청 보내기

XMLHttpRequest 개체를 생성한 후 요청의 URL과 메서드를 설정한 다음 요구.

xhr.open('GET', 'http://example.com/data', true);
xhr.send();

위 코드에서는 xhr.open() 메서드를 사용하여 GET 모드에서 URL을 엽니다. 세 번째 매개변수는 비동기 요청을 나타냅니다.

요청이 POST 모드로 전송되었음을 나타내려면 다음 코드를 사용하면 됩니다.

xhr.open('POST', 'http://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2');

위 코드에서는 xhr.setRequestHeader() 메서드를 사용하여 HTTP 헤더 정보를 설정하고 send() 메서드를 사용합니다. 요청을 보냅니다.

3. 양식 데이터 보내기

양식 데이터를 보내야 하는 경우 FormData 개체를 사용할 수 있습니다.

var formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'secret');

xhr.open('POST', 'http://example.com/login');
xhr.send(formData);

위 코드에서는 FormData 개체를 사용하여 양식 데이터를 보낸 다음 send 메서드를 사용하여 요청을 보냅니다.

4. 서버 응답 처리

XMLHttpRequest의 ReadyStateChange 이벤트가 발생하면 HTTP 응답 코드와 응답 텍스트를 확인하여 요청의 성공 여부를 확인할 수 있습니다. 다음은 몇 가지 일반적인 상태 코드입니다.

• 200: OK
• 404: 페이지를 찾을 수 없음
• 500: 서버 오류

다음은 간단한 핸들러 함수입니다.

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

위 코드에서는 xhr .readyState 속성을 사용합니다. , 이는 XMLHttpRequest 객체의 상태를 반환합니다. ReadyState가 4이면 응답이 완료된 것입니다.

xhr.status 속성은 HTTP 상태 코드를 반환합니다. 상태 코드 200은 성공을 나타냅니다.

xhr.responseText 속성에는 서버 응답 텍스트가 포함됩니다.

5. 오류 처리

서버가 200이 아닌 HTTP 상태 코드로 응답하면 요청이 실패한 것으로 간주됩니다. 오류가 발생하면 메시지가 표시된 후 작업을 다시 시도할 수 있습니다.

xhr.onerror = function() {
  alert('请求失败，请重试');
};

위 코드에서는 xhr.onerror 속성과 Alert() 메서드를 사용하여 오류 메시지를 표시합니다.

6. 요청 취소

Ajax 요청을 취소해야 하는 경우 xhr.abort() 메서드를 사용할 수 있습니다.

xhr.abort();

위 코드에서는 xhr.abort() 메소드를 사용하여 요청을 취소했습니다.

요약

위는 Javascript에서 Ajax의 기본 사용법입니다. Ajax를 사용하면 웹 페이지를 동적으로 업데이트하여 웹 애플리케이션을 더 쉽게 사용하고 반응성을 높일 수 있습니다. Ajax를 사용할 때 비동기 요청을 사용하는 것을 기억하세요.

위 내용은 자바스크립트의 Ajax 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!