jQuery AJAX에서 요청 헤더 전달
헤더는 jQuery AJAX의 서버에서 허용되는 응답의 종류를 지정합니다. 이 튜토리얼은 jQuery AJAX에서 헤더를 사용하는 방법을 보여줍니다.
jQuery AJAX에서 요청 헤더 전달
위에서 언급했듯이 헤더는 jQuery AJAX의 서버에서 수락되는 응답의 종류를 지정할 수 있습니다. 헤더는 jQuery의 ajax() 메소드에 전달되는 내장 옵션입니다.
헤더는 XMLHttpRequest 객체를 사용하여 AJAX 요청에서 전송된 키-값 쌍입니다. 비동기 HTTP 요청과 헤더는 어떤 종류의 응답을 받아들여야 하는지 서버에 알려줍니다.
콜백 함수를 사용하여 헤더 속성을 설정할 수도 있습니다.
jQuery AJAX 헤더의 구문은 다음과 같습니다.
$.ajax({ headers : { key : value }})
헤더 속성을 덮어쓰는 beforeSend 콜백 함수의 구문은 다음과 같습니다.
$.ajax({beforeSend: function (jqXHR, settings) { jqXHR.setRequestHeader(key, value) );}})
여기서 headers : { key : value }는 선택적 옵션입니다. 서버에 요청을 보내는 동안 서버에서 수락한 응답 유형을 지정합니다.
헤더의 기본값은 일반 객체 유형인 {}입니다. 헤더의 키는 Accept, Accept-Encoding, Accept-Language, Connection, Cookie, User-Agent, Host 및 Order-Number 등입니다.
그리고 beforeSend는 서버에서 수락된 응답 유형을 지정하도록 설정하거나 덮어쓰는 선택적 기능입니다. jqXHR을 허용하고 settings 매개변수는 jqXHR 개체를 수정하고 setRequestHeader 메서드를 사용하여 사용자 정의 헤더를 추가합니다.
AJAX 헤더를 사용하여 서버에서 데이터를 가져오는 간단한 예를 시도해 보겠습니다.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title> jQuery Ajax headers </title>
</head>
<body>
<h3> jQuery ajax headers : </h3>
<button id = "Send_Request" > Send the ajax request with headers <button/>
<br>
<p id = "para1" style = "color : green"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Send_Request').click( function(){
var Ajax_Request = $.ajax( { url : 'http://localhost/',
contentType : 'application/json',
dataType : 'json',
headers: {"Accepts": "text/plain; charset=utf-8"}
});
ajxReq.success( function ( Request_Data, Request_Status, jqXHR ) {
$( '#para1' ).append( '<h2> The JSON data: </h2>');
$( '#para1' ).append( '<p> The Request Date : ' + Request_Data.date + '</p>');
$( '#para1' ).append ('<p> The Request Time: ' + Request_Data.time + '</p>');
$( '#para1' ).append( '<p> The Request Status : ' + Request_Status + '</p>');
});
Ajax_Request.error( function ( jqXHR, Text_Status, Error_Message ) {
$( "p" ).append( "The status is :" +Text_Status);
});
});
});
</script>
</body>
</html>
위의 코드는 헤더 옵션이 "Accepts": "text/plain; charset=utf-8"인 AJAX 요청을 보내려고 합니다. 출력 보기:
출력과 같이 헤더에서 서버에 일반 텍스트를 요청하기 때문에 오류가 발생하지만 수신된 데이터는 JSON이므로 오류가 발생합니다. 요청을 성공적으로 처리하려면 헤더 값을 JSON으로 설정해야 합니다.
예제를 수정해 보겠습니다.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title> jQuery Ajax headers </title>
</head>
<body>
<h3> jQuery ajax headers : </h3>
<button id = "Send_Request" > Send the ajax request with headers <button/>
<br>
<p id = "para1" style = "color : green"> </p>
<script type = "text/javascript">
$(document).ready( function () {
$('#Send_Request').click( function(){
// url from where we want to get the data
var ajxReq = $.ajax( { url : 'http://time.jsontest.com',
contentType : 'application/json',
dataType : 'json',
headers: {"Accept": "application/json"}
});
ajxReq.success( function ( Request_Data, Request_Status, jqXHR ) {
$( '#para1' ).append( '<h2> The JSON data: </h2>');
$( '#para1' ).append( '<p> The Request Date : ' + Request_Data.date + '</p>');
$( '#para1' ).append ('<p> The Request Time: ' + Request_Data.time + '</p>');
$( '#para1' ).append( '<p> The Request Status : ' + Request_Status + '</p>');
});
ajxReq.error( function ( jqXHR, Text_Status, Error_Message ) {
$( "p" ).append( "The status is : " + Text_Status);
});
});
});
</script>
</body>
</html>
위의 코드는 헤더 값 JSON과 함께 AJAX 요청을 보내고 코드는 서버에서 JSON 데이터를 다시 가져옵니다. 출력 참조:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook