Übergabe von Anfrage-Headers in jQuery AJAX
Die Header geben die Art der Antwort an, die vom Server in jQuery AJAX akzeptiert wird. Dieses Tutorial zeigt, wie Sie die Header in jQuery AJAX verwenden.
Übergabe von Anfrage-Headers in jQuery AJAX
Wie oben erwähnt, können die Header die Art der Antwort angeben, die vom Server in jQuery AJAX akzeptiert wird. Ein Header ist eine eingebaute Option, die an die Methode ajax() in jQuery übergeben wird.
Die Header sind Schlüssel-Wert-Paare, die in der AJAX-Anfrage mit dem Objekt XMLHttpRequest gesendet werden. Eine asynchrone HTTP-Anforderung und ein Header teilen dem Server mit, welche Art von Antwort er akzeptieren soll.
Eine Callback-Funktion kann auch verwendet werden, um die Header-Eigenschaften festzulegen.
Die Syntax für den jQuery-AJAX-Header lautet:
$.ajax({ headers : { key : value }})
Die Syntax für die Callback-Funktion beforeSend zum Überschreiben von Header-Eigenschaften lautet:
$.ajax({beforeSend: function (jqXHR, settings) { jqXHR.setRequestHeader(key, value) );}})
Wobei headers : { key : value } eine optionale Option ist. Es gibt die Art der Antwort an, die vom Server akzeptiert wird, während die Anfrage an den Server gesendet wird.
Der Standardwert für Header ist {}, was ein einfacher Objekttyp ist. Die Schlüssel für Header sind Accept, Accept-Encoding, Accept-Language, Connection, Cookie, User-Agent, Host und Order-Number usw.
Und beforeSend ist eine optionale Funktion, die setzt oder überschreibt, um die Art der vom Server akzeptierten Antwort anzugeben. Es akzeptiert jqXHR, und die settings-Parameter ändern das jqXHR-Objekt und fügen einen benutzerdefinierten Header mit der setRequestHeader-Methode hinzu.
Versuchen wir ein einfaches Beispiel mit AJAX-Headern, um die Daten vom Server zu erhalten:
<!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>
Der obige Code versucht, eine AJAX-Anfrage mit Header-Optionen "Accepts": "text/plain; charset=utf-8" zu senden. Siehe die Ausgabe:
Wie in der Ausgabe gezeigt, wird ein Fehler ausgegeben, da wir im Header Klartext vom Server anfordern, die empfangenen Daten jedoch JSON sind, sodass ein Fehler ausgegeben wird. Um die Anfrage erfolgreich zu verarbeiten, müssen wir den Header-Wert als JSON festlegen.
Versuchen wir, das Beispiel zu korrigieren:
<!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>
Der obige Code sendet eine AJAX-Anforderung mit dem Header-Wert JSON, und der Code ruft die JSON-Daten vom Server zurück. Siehe Ausgabe:
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