네이티브 자바스크립트를 사용하여 Ajax 요청 데이터를 보내는 단계

참고: 요청 주소는 귀하의 프로젝트 주소이므로 직접 변경하시기 바랍니다.

이것은 단지 기본 XMLHttpRequst의 간단한 사용입니다. 나중에 기본 Ajax를 캡슐화하여 jequery의 ajax를 구현하는 방법을 게시하겠습니다.

1단계: xhr 개체를 만듭니다.

const xhr = new XMLHttpRequest();

2단계: open() 설정.

xhr.open('PUT','http://118.24.84.199:8080/sm/accept/list',false);

3단계: 인터페이스에 필요한 헤더를 설정합니다.

xhr.setRequestHeader('token','515b8c62-ddf4-41ef-a7c8-93957e1c589e');
xhr.setRequestHeader('Accept','application/json');
xhr.setRequestHeader('Content-Type','application/json');

4단계: 요청 데이터를 보냅니다.

참고: 여기의 데이터는 json 파일로 처리되고 JSON.stringify를 사용하여 처리되어야 합니다.

let data = {
                page:1,
                pageSize:10,
            };
data = JSON.stringify(data);
xhr.send(data);

여기로 전송되었으며, 브라우저의 네트워크 요청에서 요청 상태를 확인하실 수 있습니다.

그러나 페이지에서는 아직 데이터가 처리되지 않았습니다

데이터가 동기 요청인 경우: send() 문 바로 다음에 데이터를 처리합니다.

console.log(xhr.response);

그러나 일반적으로 데이터 요청은 비동기식이므로 데이터를 처리하려면 onreadystatechange 이벤트를 사용해야 합니다.
데이터를 받은 후 인쇄하세요.

xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(JSON.parse(xhr.response));
        } else {
            console.log("Request was unsuccessful: " + xhr.status);
        }
    }
};

관련 기사:

네이티브 JS를 사용하여 Ajax GET POST 요청을 구현하는 방법

네이티브 JavaScript를 사용하여 AJAX 요청을 처리하는 방법을 설명하는 예

관련 동영상:

Ajax 원칙 상세 동영상 튜토리얼

위 내용은 네이티브 자바스크립트를 사용하여 Ajax 요청 데이터를 보내는 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!