jQuery AJAX でリクエストヘッダーを渡す

Sheeraz Gul 2022年6月13日
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 } はオプションのオプションです。サーバーに要求を送信するときにサーバーから受け入れられる応答のタイプを指定します。

ヘッダーのデフォルト値は {} で、これはプレーンオブジェクトタイプです。ヘッダーのキーは、AcceptAccept-EncodingAccept-LanguageConnectionCookieUser-AgentHostOrder-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 リクエストを送信しようとします。出力を参照してください。

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 データを取得します。出力を参照してください:

AJAX ヘッダーJSON

著者: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

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

関連記事 - jQuery AJAX