Passer les en-têtes de demande dans jQuery AJAX
Les en-têtes spécifient le type de réponse acceptée du serveur dans jQuery AJAX. Ce tutoriel montre comment utiliser les en-têtes dans jQuery AJAX.
Passer les en-têtes de demande dans jQuery AJAX
Comme mentionné ci-dessus, les en-têtes peuvent spécifier le type de réponse acceptée du serveur dans jQuery AJAX. Un en-tête est une option intégrée passée à la méthode ajax() dans jQuery.
Les en-têtes sont des paires clé-valeur envoyées dans la requête AJAX à l’aide de l’objet XMLHttpRequest. Une requête HTTP asynchrone et un en-tête informeront le serveur du type de réponse à accepter.
Une fonction de rappel peut également être utilisée pour définir les propriétés de l’en-tête.
La syntaxe de l’en-tête jQuery AJAX est :
$.ajax({ headers : { key : value }})
La syntaxe de la fonction de rappel beforeSend pour écraser les propriétés d’en-tête est :
$.ajax({beforeSend: function (jqXHR, settings) { jqXHR.setRequestHeader(key, value) );}})
Où headers : { key : value } est une option facultative. Il précisera le type de réponse acceptée du serveur lors de l’envoi de la requête au serveur.
La valeur par défaut des en-têtes est {}, qui est un type d’objet simple. Les clés pour les en-têtes sont Accept, Accept-Encoding, Accept-Language, Connection, Cookie, User-Agent, Host et Order-Number, etc.
Et beforeSend est une fonction facultative qui définira ou écrasera pour spécifier le type de réponse acceptée du serveur. Il acceptera jqXHR, et les paramètres settings modifieront l’objet jqXHR et ajouteront un en-tête personnalisé à l’aide de la méthode setRequestHeader.
Essayons un exemple simple avec des en-têtes AJAX pour obtenir les données du serveur :
<!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>
Le code ci-dessus tentera d’envoyer une requête AJAX avec les options d’en-tête "Accepts": "text/plain; charset=utf-8". Voir la sortie :
Comme indiqué dans la sortie, il génère une erreur car, dans l’en-tête, nous demandons du texte brut au serveur, mais les données reçues sont JSON, il génère donc une erreur. Pour traiter avec succès la demande, nous devons définir la valeur d’en-tête sur JSON.
Essayons de corriger l’exemple :
<!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>
Le code ci-dessus enverra une requête AJAX avec la valeur d’en-tête JSON, et le code récupérera les données JSON du serveur. Voir la sortie :
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