HOWTO · jQuery
jQuery AJAX でリクエストヘッダーを渡す
このチュートリアルでは、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 データを取得します。出力を参照してください：
