でAjaxリクエストを作成する

14792 ワード
javascript webdev tutorial テキストリンク
AJAXはクライアント側のWeb開発技術の集合で、サーバとデータを非同期に交換します.これは、ページ全体を再読み込みする必要がなく、動的にWebページの部品を更新することができます.この記事では、jQueryとXmlHttpRequestオブジェクトを使用してAjaxリクエストを作成する方法を示します.

jquery


The jQuery JavaScriptライブラリは、開発者が簡単にAjaxを使用することができます.
jquery ajax ()メソッドはクライアント側でAJAXリクエストを非同期にするために使用します.
jQueryライブラリを使用するには、HTMLで参照する必要があります<script> 内部タグ<head> セクション.
<head>
    <!-- other codes ... -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" 
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
    crossorigin="anonymous"></script>
    <!-- other codes ... -->
</head>
上記のように、JNNライブラリファイルをCDN(Content Delivery Network)から含めることで、ライブラリファイルをダウンロードしてホストする必要はありません.The integrity and crossorigin 属性は、Subresource Integrity (SRI) checking .
我々は、バックエンドのPHPを呼び出すためのWebページにボタンを追加することができます.
<button id="demo">Call PHP</button>
次のJavaScriptコードブロックは、ボタンClickイベントです.
ボタンがクリックされると、JQuery AJAX ()メソッドはバックエンドPHPにAJAX要求を実行します.
<script>
    $(document).ready(function() {
        $("#demo").click(function(){
            var student = {"name":"Tom", "sex":"M", "age":"11", "class":"6Y"};
            $.ajax({
                type: 'POST',
                url: 'my-backend.php',
                data: JSON.stringify(student),
                success: function(data, textStatus, xhr) {
                    alert(data);
                },
                error: function(xhr, textStatus, errorThrown) {
                    alert('Error Msg: ' + errorThrown);
                }
            });        
        });
    });
</script>
JavaScript変数student 学生の個人データを格納するオブジェクトを定義します.にajax() メソッドをリクエストしますtype 掲示する.インurl , リクエストを受け取るPHPファイルを設定します.JavaScript関数JSON.stringify() はオブジェクトを変換するために使われるstudent それがサーバーに送られる前に、JSONストリングに.の関数success and error リクエストが成功したか失敗した場合には、それぞれ呼び出されます.ここで、リクエストが成功した場合、サーバーから返されたデータを持つアラートボックスが表示されます.それが失敗するならば、警報ボックスはHTTPステータスの原文の部分を表示しますerrorThrown .
バックエンドではPHPがファイルバックエンドです.PHPでは、次のようにします.
<?php
    $json = file_get_contents('php://input');
    $data = json_decode($json);
    echo $data->name;
?>
機能file_get_contents() はサーバに送信されたデータを取得するために使われる.機能json_decode() を呼び出して、JSONエンコードされた文字列を$json PHP変数に$data . 最後に、学生の名前$data->name が返される.

XMLHttpRequestオブジェクト


XMLHttpRequest ( xhr )は、Ajaxプログラミングの開発者用の他のオプションです.XMLだけでなく、サーバーから非同期的にデータを取得するために使用することができます.これは、ページ全体を再読み込みせずにWebページの更新部分を許可します.それがどのように働くかを試みるために、ちょうどサーバーにAjax要求をするためにユーザー・イベントを引き起こすためにウェブページのボタンを加えてください.
<button id="demo" onclick="makeAjaxCall()">Call PHP</button>
JavaScriptでは、関数を作るmakeAjaxCall() ボタンClickイベントを処理し、XmlHttpRequestを使用してAjaxリクエストを作成します.
function makeAjaxCall(){
        var request = new XMLHttpRequest();
        request.open('POST', 'my-backend.php');

        var student = {"name":"Tom", "sex":"M", "age":"11", "class":"6Y"};
        request.send(JSON.stringify(student));

        request.onload = function() {
            if (request.readyState == 4) {
                //the operation is done
                if (request.status == 200) {
                    alert(request.response);
                } else if (request.status >= 400){
                    //client or server errors
                    alert('Error Code: ' + request.status + ' Error Msg: ' + request.statusText);
                }

            }

        }

    }
まず、オブジェクトXmlHttpRequestを初期化します.
var request = new XMLHttpRequest();
その方法open() が新たなリクエストを作成するために呼び出されます.
最初のパラメータはリクエストメソッドを定義しますPOST . 2番目のパラメータはリクエストを送信するURLです.ここでは、バックエンドのPHPファイルとして設定しますmy-backend.php . データオブジェクトを定義するstudent 学生の個人データを保存するため.XMLHttpRequestメソッドsend() が要求された場合、student . JavaScript関数JSON.stringify() はオブジェクトを変換するために使われるstudent それがサーバーに送られる前に、JSONストリングに.XMLHttpRequestonload プロパティは、要求トランザクションが正常に完了したときに呼び出されるコールバック関数として設定されます.
リクエストが送信された後、XMLHttpRequestクライアントは次の状態になります.
  • 0未送信
  • 1オープン
  • 2受信ヘッド
  • 3読み込み
  • 4完了
    • でonload コールバック関数
    the request.readyState プロパティの状態.それが等しいならば4 , 操作を行うことを意味します.次に、XmlHttpRequestのレスポンスのHTTPステータスコードをチェックし続けますrequest.status . それが等しいならば200 , これは、要求が成功したことを意味し、サーバーから返されたデータを表示できます.
    alert(request.response);
    HTTPレスポンスステータスコードは以下のクラスでグループ化されます:
  • 情報の応答(100 - 199)
  • 成功した反応(200 - 299)
  • リダイレクトする( 300 - 399 )
  • クライアントエラー( 400 - 499 )
  • サーバエラー( 500 - 599 )
    • XMLHttpRequestの応答ステータスがrequest.status は400 または、エラーメッセージを表示します.
    alert('Error Code: ' + request.status + ' Error Msg: ' + request.statusText);
    バックエンドのPHPはマイバックエンドをファイルします.PHPはJSONデータをサーバーに投稿し、デコードして学生の名前を出力します$data->name クライアント側に.
    <?php

$json = file_get_contents('php://input');
$data = json_decode($json);
echo $data->name;

?>

    参考文献


    HTTP response status codes
    XMLHttpRequest.readyState
    読書ありがとう!
    より多くのプログラミングチュートリアルを見つけるために、訪問してくださいCodeBilby.com
    アンドロイド/IOSベースの資産束
    スタイルガイド💻📔