JavaScript는 프런트엔드 및 백엔드 개발 모두에 사용할 수 있는 일반적으로 사용되는 스크립팅 언어입니다. 프런트엔드 개발 과정에서 AJAX를 통해 백엔드 서버에 요청을 보내고 응답 데이터를 얻어야 하는 경우가 종종 있습니다. 그중 GET 요청은 가장 일반적으로 사용되는 요청 방법입니다. 이 기사에서는 JavaScript를 사용하여 GET 요청을 보내는 방법과 GET 요청 매개 변수를 보내는 방법을 소개합니다.
JavaScript에서는 XMLHttpRequest 객체(간단히 XHR 객체)를 사용하여 HTTP 요청을 보낼 수 있습니다. 다음은 XHR 객체를 사용하여 GET 요청을 보내는 간단한 예입니다.
var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo', true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
위 코드에서 XHR 객체가 먼저 생성되고 요청 메소드는 GET, 요청 주소는 /getUserInfo입니다. 그런 다음 onreadystatechange 이벤트 핸들러가 등록되고 응답 상태가 4(요청이 완료되었음을 나타냄)이고 응답 코드가 200이면 응답 텍스트가 인쇄됩니다. 마지막으로 send 메소드를 통해 요청을 보냅니다.
XMLHttpRequest에는 호환성 문제가 있습니다. IE6 및 7에서는 대신 ActiveXObject 개체를 사용해야 합니다. 자세한 내용은 관련 문서를 참조하세요.
실제 애플리케이션에서는 요청 매개변수를 백엔드 서버로 보내야 하는 경우가 많습니다. GET 요청에서 요청 매개변수는 일반적으로 URL의 쿼리 문자열을 통해 전달됩니다. JavaScript를 사용하면 아래와 같이 URL을 연결하여 요청 매개변수를 URL에 추가할 수 있습니다.
var username = 'Tom'; var age = 20; var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo?username=' + username + '&age=' + age, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
URL을 연결하면 두 개의 요청 매개변수인 사용자 이름과 연령이 URL에 추가됩니다. 요청 매개변수에 중국어 등 ASCII가 아닌 문자가 포함된 경우 URL 인코딩을 수행해야 하며, 그렇지 않으면 문자가 깨질 수 있다는 점에 유의하세요. 아래와 같이 인코딩에 encodeURI 함수를 사용할 수 있습니다.
var username = '小明'; var age = 20; var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo?username=' + encodeURI(username) + '&age=' + age, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
위 코드에서 encodeURI 함수를 사용하여 중국어 문자열을 URL 인코딩하여 요청 매개변수가 올바르게 전달되었는지 확인합니다.
URL을 연결하는 것 외에도 XHR 객체의 setRequestHeader 메서드를 사용하여 요청 헤더에 요청 매개변수를 추가할 수도 있습니다. 아래와 같이:
var params = 'username=' + encodeURI('小明') + '&age=' + 20; var xhr = new XMLHttpRequest(); xhr.open('GET', '/getUserInfo', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send(params);
위 코드에서는 먼저 요청 매개변수를 "매개변수 이름 = 매개변수 값" 형식으로 이어붙이고 그 결과를 params 변수에 저장합니다. 그런 다음 setRequestHeader 메소드를 사용하여 요청 헤더 Content-type을 application/x-www-form-urlencoded로 설정하여 서버에 요청 매개변수 형식을 알립니다. 마지막으로 send 메소드를 통해 요청을 보내고 요청 매개변수를 전달합니다.
위 소개를 통해 JavaScript를 사용하여 GET 요청을 보내는 방법과 GET 요청 매개변수를 보내는 방법을 배웠습니다. 실제 애플리케이션에서는 특정 요구 사항에 따라 요청 매개변수를 전달하는 적절한 방법을 선택하여 프런트엔드 및 백엔드 데이터 상호 작용을 실현할 수 있습니다.
위 내용은 자바스크립트가 요청 매개변수 가져오기를 보냅니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!