자바스크립트http방법

JavaScript는 웹 페이지에서 다양한 대화형 작업을 처리하는 데 사용되는 프런트 엔드 개발의 중요한 프로그래밍 언어입니다. 그 중 http 방식은 일반적으로 사용되는 요청 방식으로 서버에 요청을 보내고 응답 결과를 얻을 수 있다. 이 기사에서는 JavaScript의 http 메소드와 관련 사용법을 살펴보겠습니다.

1. http 메소드 개요

http 메소드는 네트워크를 통해 서버에 요청을 보내는 방식을 말합니다. 현재 일반적으로 사용되는 http 메소드에는 GET, POST, PUT, DELETE 등이 있습니다. 그 중 GET과 POST가 가장 널리 사용되는 두 가지 방법입니다.

HTTP 프로토콜의 네 가지 작업:

GET: "읽기" 작업을 수행하기 위해 URI로 식별된 리소스에 대한 액세스를 요청하는 데 사용됩니다. GET 방식에서는 서버가 응답 메시지 본문의 URL에 있는 리소스를 반환하고, 내용을 설명하는 응답 헤더 정보의 형식과 문자 집합을 지정해야 합니다.

POST: 지정된 리소스에 데이터를 제출하고 서버에 처리(예: 양식 제출 또는 파일 업로드)를 요청합니다. POST 요청으로 인해 새로운 리소스가 생성되거나 기존 리소스가 수정될 수 있습니다.

PUT: 서버에 파일을 업로드하거나 기존 리소스를 업데이트하는 데 사용됩니다.

DELETE: 지정된 리소스를 삭제하도록 서버에 요청합니다.

2. JavaScript의 http 메소드

JavaScript에서는 XMLHttpRequest 객체를 사용하여 http 요청을 구현할 수 있습니다. XMLHttpRequest 객체는 다음과 같은 일반적인 메소드를 제공합니다:

(1) open() 메소드: 이 메소드의 기능은 새로운 http 요청을 생성하는 것입니다. 이 메소드의 매개변수에는 http 메소드, 요청된 URL 주소, 비동기 요청 모드 사용 여부 등이 포함됩니다.

XMLHttpRequest.open(메서드, url, async, 사용자, 비밀번호);

메서드 매개변수 설명:

메서드: GET, POST, PUT, DELETE 등과 같은 http 메소드를 나타냅니다.

url: 요청된 URL 주소를 나타냅니다.

async: 비동기 요청 모드를 사용할지 여부를 나타냅니다. false는 동기 모드를 나타내고, true는 비동기 모드를 나타냅니다.

user: 사용자 이름을 나타냅니다. 선택 사항입니다.

password: 비밀번호를 나타냅니다. 선택사항입니다.

(2) send() 메소드: 이 메소드는 서버에 http 요청을 보내는 데 사용됩니다. 이 메소드의 매개변수는 요청된 데이터 컨텐츠(POST 메소드의 경우)이거나 비어 있을 수 있습니다(GET 메소드의 경우).

XMLHttpRequest.send(data);

(3) setRequestHeader() 메서드: 이 메서드는 요청 헤더에 속성과 값을 설정하는 데 사용됩니다. 요청 헤더의 속성에는 Content-Type, Accept 등이 포함됩니다.

XMLHttpRequest.setRequestHeader(name, value);

메서드 매개변수 설명:

name: 요청 헤더에 속성 이름을 지정합니다.

value: 요청 헤더에 속성 값을 지정합니다.

(4) onreadystatechange 속성: 이 속성은 서버 응답의 상태 변경을 처리하는 콜백 함수를 정의합니다.

XMLHttpRequest.onreadystatechange = function() {};

• readyState: 0에서 4까지의 XMLHttpRequest 객체 상태를 나타냅니다.

0: 초기화되지 않음을 나타냅니다(open() 메서드가 아직 호출되지 않음).
1: 초기화 중임을 나타냅니다. 즉, open() 메서드가 호출되었지만 send() 메서드가 아직 호출되지 않았음을 나타냅니다.
2: 요청이 전송되었지만(send() 메서드가 호출됨) 서버의 응답 메시지가 아직 수신되지 않았음을 의미합니다.
3: 서버로부터 응답 메시지를 받았지만 아직 모든 응답 데이터를 읽지 못했습니다.
4: 모든 응답 데이터를 읽었습니다.

status: 성공을 나타내는 200, 요청한 리소스가 존재하지 않음을 나타내는 404 등과 같이 서버에서 반환한 상태 코드를 나타냅니다.

responseText: 서버가 반환한 응답 텍스트를 나타냅니다.

3. 예시

다음은 GET 메소드와 비동기 요청 메소드를 사용하여 http 요청을 보내는 예입니다.

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

위 코드에서는 sendHttpRequest()라는 함수를 정의하고 XMLHttpRequest 객체를 사용합니다. GET 요청에 대한 함수는 "https://www.example.com/" 주소로 전송되고 비동기 요청 모드는 true로 설정됩니다. 서버가 응답 결과를 성공적으로 반환하고 상태 코드가 200이면 응답 텍스트가 콘솔에 인쇄됩니다.

다음은 POST 메소드와 동기식 요청 메소드를 사용하여 http 요청을 보내는 예입니다.

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

위 코드에서는 sendHttpRequest()라는 함수를 정의하고, 함수 내의 XMLHttpRequest 객체를 사용하여 "https: //www .example.com/"을 입력하고 동기 요청 모드를 false로 설정합니다. 동시에 setRequestHeader() 메소드를 호출하여 요청 헤더에 Content-Type 속성을 설정하여 요청 데이터 유형이 "application/x-www-form-urlencoded"임을 나타냅니다. 요청 데이터를 보내는 send() 메소드, 데이터 내용은 "name=John&age=25"입니다. 서버가 응답 결과를 성공적으로 반환하면 응답 텍스트가 콘솔에 인쇄됩니다.

4. 요약

이 글에서는 자바스크립트의 http 메소드와 관련 사용법을 소개합니다. 위 예제의 데모를 통해 XMLHttpRequest 객체를 사용하면 http 요청을 쉽게 구현할 수 있음을 알 수 있으며 동시에 요청 헤더 및 요청 매개변수를 설정하여 다양한 요청 유형 및 형식도 구현할 수 있습니다. 따라서 JavaScript의 http 메소드를 마스터하는 것은 프론트엔드 개발자에게 매우 필요합니다.

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