jQuary での ajax の簡単なアプリケーション

アヤックス

序章：

Ajax =同期JavaScriptおよびX ML (非同期JavaScriptおよびXML )

Ajax は、Web ページ全体をリロードせずに一部の Web ページを更新できる、インタラクティブで高速かつ動的な Web アプリケーションを作成するための Web 開発テクノロジを指します。

Ajax を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、Web ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

動作原理:

Ajax の動作原理は、ユーザーとサーバーの間に中間層 (AJAX エンジン) を追加して、ユーザーの操作とサーバーの応答を非同期にすることと同じです。すべてのユーザー要求がサーバーに送信されるわけではありません。一部のデータ検証とデータ処理は Ajax エンジン自体に引き渡され、サーバーから新しいデータを読み取る必要があると判断された場合にのみ、Ajax エンジンが代わりにサーバーにリクエストを送信します。

サーブレットに直接接続してページ全体をジャンプして更新する従来の JSP ページと比較して、ajax はページ全体を更新せずにバックグラウンドサーブレットに直接接続できます。

ajax を使用してサーブレットと対話すると、JSP ページでの小さなスクリプトの使用を減らし、フロントエンドとバックエンドの間の結合を減らすことができます。

従来の方法: (ブラウザの通常の対話、つまり、通常の状況における jsp/html とサーブレット間の対話)
ここに画像の説明を挿入

Ajax モード: (ブラウザの ajax 対話、つまり、jsp/html で ajax を使用してサーブレットと非同期に対話し、部分的なページ更新を実現します)

ここに画像の説明を挿入

上の図から、対話には ajax が使用されており、複数のリクエストが互いに干渉することなく非同期に実行されることが直感的にわかります。

ajax() メソッドの実装:

$.ajax({ 
	url:请求地址,
	type:"get | post | put | delete " 默认是get, 
	data:请求参数 {"id":"123","pwd":"123456"}, 
	dataType:请求数据类型"html | text | json | xml | script | jsonp ",
    success:function(data,dataTextStatus,jqxhr){ },//请求成功时
    error:function(jqxhr,textStatus,error)//请求失败时 
})

//编写上述代码时，注意ajax中每一项参数需要采用逗号隔开
//url:请求的路径  
//type：发送请求的方式
//data:发送的数据  
//datatype 返回的数据类型
//success:成功时执行的方法  error：失败时执行的方法（要么成功，要么失败，两者必须执行其一）

リクエストメソッドの種類のうち、よく使われるのは get と post ですが、この 2 つの違いは次のとおりです。

従来の方法での JSP ページでのフォーム送信の get メソッドと post メソッドと同様に、ajax メソッドが get メソッドを使用してデータを送信する場合、バックグラウンドに送信したデータはコンソールで確認できますが、送信されたデータはpostメソッドでは見ることができません
GET は POST よりも簡単かつ高速で、ほとんどの場合に機能します。ただし、次の場合は POST リクエストを使用します。

キャッシュされたファイルを使用できません (サーバー上のファイルまたはデータベースを更新します)。

大量のデータをサーバーに送信します (POST にはデータ制限がありません)。

不明な文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており、信頼性が高くなります。

エラーメソッドに入るのは主に次の状況です。

URL エラー: URL パスは中国語では表示できません。ジャンプできるアドレスである必要があります。
dataType エラー: バックグラウンドから返されるデータ型がフロントデスクが受信する必要があるものと矛盾している、またはバックグラウンドから返されるデータが仕様に準拠していないため、エラーにジャンプします。たとえば、json 形式で返す場合、 {id:1, name: "Zhang San"} と書き込みます (エラー )。正しい形式は {"id":1,"name":"Zhang San"} である必要があります。
データエラー: フォアグラウンドからバックグラウンドに要求されたデータは、データが送信されない場合でも書き込む必要があります。{} を渡す必要があります。それ以外の場合は、xml 形式が返され、parsererror.data: "{}"; パラメーターが要求されます。前景と背景の間で渡される Ajax でサポートされているエンコード形式に従う必要があり、パラメーターに特殊文字を含めることはできません
async リクエスト同期非同期エラー: async のデフォルトは true で、非同期リクエストをサポートします。同期リクエスト (ajax 実行後に ajax 実行を書き込む) を行う場合は、async を false に設定する必要があります。

get() または post() メソッドは、リモート HTTP リクエストを通じて情報を読み込みます (記述を簡素化するため)。

//get()方法
$.get(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 });

//post()方法
$.post(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 });

//url:请求的路径  
//data:发送的数据  
//function(result){}: success时执行的方法

//上面两种方法默认接受的返回数据类型为text类型
//当我们要接受其他形式的数据时，可直接在function方法后加上要接受的数据类型，例：
$.post(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 }，datatype);

バックグラウンドから返されたデータが json 形式である場合、オブジェクトはバックグラウンドで json に変換する必要があります。そうしないと、エラーが報告されます。プロジェクト内のほとんどのメソッドは引き続き String 型のデータを受け取りますが、この時点では、GSON を使用してオブジェクトを String 型の JSON オブジェクトに変換する必要がありますが、ここでは詳しく説明しません。

最後に、Weibo のいいねを模倣するバックグラウンド機能を実現するための簡単な例 (jsp ページ) を紹介します。

</head>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#zan").click(function (){
                const uid = ${requestScope.uid};
                const zan = $("#zan").val();
                $.ajax({
                    url:"/GreatAjax",
                    type:"post",
                    data:{"uid":uid,"zan":zan},
                    dataType:"JSON",
                    success:function (result){
                        $("#zan").val(result.zan);
                        $("#ag").html(result.allGreat);
                    },
                    error:function (result){
                    	console.log("出错了出错了");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form>
        用户编号：<span>${requestScope.uid}</span><br><br>
        用户姓名：<span>${requestScope.uname}</span><br><br>
        <input type="button" value="${requestScope.zan}" id="zan"><br><br>
        总点赞数：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>
${requestScope.zan}" id="zan"><br><br>
        总点赞数：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>