자바스크립트가 Ajax 요청 매개변수를 보냅니다.

JavaScript는 인터넷에서 가장 일반적으로 사용되는 프로그래밍 언어 중 하나이며 웹 사이트에 동적 상호 작용을 추가하는 데 사용할 수 있습니다. AJAX는 전체 페이지를 새로 고치지 않고 서버와 비동기식으로 데이터를 교환하는 기술입니다. 많은 웹사이트에서 AJAX를 통해 데이터를 얻는 예를 볼 수 있습니다. AJAX 요청을 보내고 JavaScript를 사용하여 반환 값을 받는 방법은 무엇입니까? 이번 글에서는 이를 소개하겠습니다.

AJAX 요청을 보내는 주요 단계는 다음과 같습니다.

1. XMLHttpRequest 객체 생성
2. 요청 방법 및 요청 주소 지정
3. 요청 헤더 정보 설정
4. 요청 보내기
5. 에서 반환된 데이터 수신 및 처리 server
6. XMLHttpRequest 객체 생성

먼저 JavaScript 코드를 통해 XMLHttpRequest 객체를 생성합니다.

var xhr = new XMLHttpRequest();

2. 요청 방법 및 요청 주소 지정

다음으로 요청 방법과 요청 주소를 지정해야 합니다. 예를 들어, /api/data.php에 요청을 보내기 위해 GET 메소드를 사용해야 하는 경우 다음 코드를 사용할 수 있습니다.

xhr.open('GET', '/api/data.php', true);

그 중 첫 번째 매개변수는 요청 방법을 지정하고, 두 번째 매개변수는 요청 주소를 지정하고, 세 번째 매개변수는 비동기적으로 실행할지 여부를 지정하며 일반적으로 true입니다.

POST 메서드를 사용해야 하는 경우 다음 코드를 사용할 수 있습니다.

xhr.open('POST', '/api/data.php', true);

3. 요청 헤더 정보 설정

요청을 보내기 전에 요청 헤더 정보도 설정해야 합니다. 예를 들어, Content-Type을 application/x-www-form-urlencoded로 설정할 수 있습니다.

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

4. 요청 보내기

다음으로 send() 메서드를 사용하여 요청을 보낼 수 있습니다. GET 메소드를 사용하는 경우 빈 문자열을 매개변수로 전달할 수 있습니다. 예:

xhr.send('');

POST 메서드를 사용하는 경우 전송해야 하는 데이터를 전달할 수 있습니다. 예:

xhr.send('name=John&age=25');

5. 서버가 반환한 데이터를 수신하고 처리합니다

서버가 응답을 반환하면 ReadyState 속성을 통해 요청 상태를 감지할 수 있습니다. ReadyState에는 다섯 가지 가능한 값이 있습니다.

• 0(초기화되지 않음): xhr 객체가 생성되었지만 open() 메서드가 호출되지 않았음을 나타냅니다.
• 1(보내기): open() 메서드가 호출되었지만 send() 메서드가 호출되지 않았음을 나타냅니다.
• 2 (Sent): send() 메서드가 호출되었지만 서버가 아직 응답을 반환하지 않았음을 나타냅니다.
• 3(수신): 응답을 받았지만 완료되지 않았음을 나타냅니다.
• 4(완료): 응답이 완료되었으며 서버에서 반환된 데이터에 액세스할 수 있음을 나타냅니다.

다음 코드를 사용하여 ReadyState의 변경 사항을 수신할 수 있습니다.

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器返回的数据
        console.log(xhr.responseText);
    }
}

readyState가 4에 도달하면 responseText 속성에 액세스하여 서버에서 반환한 응답 정보를 얻을 수 있습니다.

위는 JavaScript를 사용하여 AJAX 요청을 보내는 기본 단계입니다. 이러한 단계를 통해 서버에 비동기 요청을 쉽게 보내고 응답 데이터를 얻을 수 있습니다.

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