Ajaxの部分更新メソッドの例
2022-01-18 18:19:05
プリアンブル
/{br
最近、jQueryのコンテンツをいくつか見直しているのですが、その中で使えそうなナレッジポイントを整理してみたいと思います。jQueryを勉強していた頃はそこまで細かく気にしていなかったので、フロントエンドの作業で得た小さな学びを整理しています。
I. Ajaxとは？ {I. Ajaxとは何ですか？ /{br
コンセプト ASynchronous JavaScript And XML 非同期型JavaScriptとXML
1. 非同期と同期：クライアント側とサーバー側の通信は
-> クライアントはサーバー側からの応答を待つ必要がある。待ち時間の間、クライアントは他の操作を行うことができない。
-> クライアントはサーバーからの応答を待つ必要がない。サーバーがリクエストを処理している間、クライアントは他の操作を行うことができる
2. Ajaxとは、ページ全体を再読み込みすることなく、Webページの一部を更新することができる技術です。
-> バックグラウンドでサーバーと少量のデータをやり取りすることで、Ajaxはウェブページを非同期で更新することを可能にします。つまり、ウェブページ全体を再読み込みすることなく、ウェブページの一部分を更新することができます。
->従来のWebページ（Ajaxなし）では、コンテンツを更新する必要がある場合、Webページ全体を再読み込みする必要がありました。
II. インプリメンテーション
1. JSのネイティブな実装方法（理解する）
javascriptのコードは以下の通りです（例）。
//javascript code
var xmlhttp;// 1. Create the core object
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. Establishing a connection
/* Parameters.
1. request method: GET, POST
* get method, request parameters are spliced after the URL. send method is empty parameter
* post method, request parameters are defined in the send method
2. request URL: 3.
3. synchronous or asynchronous request: true (asynchronous) or false (synchronous)
*/
// Change the URL to your own address
xmlhttp.open("GET", "<%=request.getContextPath()%>/testDemo?name=zhangsan", true);
//3. Send the request to the server.
xmlhttp.send();
//4. Accept and process the response from the server
//get the way : xmlhttp.responseText
//trigger the event onreadystatechange when the ready state of the xmlhttp object changes.
//receive server-side response (readyState=4 means request completed and response is ready status=200 means everything is fine with the request response)
xmlhttp.onreadystatechange = function () {
//judge if readyState is 4, judge if status response is 200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//get the server's response result
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
javaのバックエンド受信コードは以下の通りです（例）。
//. GetParameter,
String name=request.getParameter("name");
System.out.println(name);//print out the obtained parameter
// write the data information back to ajax
response.getWriter().write("hello");
2. JQeuryの実装
コードは以下の通りです（例）。
1. $.ajax()
-> シンタックス $.ajax({key-value pair})。
コードは以下のようになります（例）。
//Send an asynchronous request using $.ajax()
$.ajax({
url:"<%=request.getContextPath()%>/testDemo" , // request path
type: "POST", // request method
data: {"name": "zhangsan"}, // request parameters
dataType: "JSON", //Set the format of the received response data, there are many formats, such as: text
//async:false,//default is true (asynchronous),false (synchronous)
success: function (data) {//Recallback function after successful response
alert(data);
}
},
error: function () {
alert("There was an error... ");
},
});
//java code is just the same as the above java code
2. $.get()：getリクエストを送信（ajaxの簡略化）。
-> シンタックス $.get(url, [data], [callback], [type])
* url: リクエストパス
* データ：リクエストパラメータ
* コールバック：コールバック関数
* type: レスポンス結果のタイプ
コードは以下の通りです（例）。
$.get("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function (data) {
alert(data);
},"text");
3. $.post(): post リクエストを送信 (ajax の簡略化)
-> シンタックス $.post(url, [data], [callback], [type])
* url: リクエストパス
* データ：リクエストパラメータ
* コールバック：コールバック関数
* type: レスポンス結果のタイプ
コードは以下の通りです（例）。
$.post("<%=request.getContextPath()%>/testDemo",{name:"zhangsan"},function(data) {
alert(data);
},"text");
小栗
jspのページです。
<%--
Created by IntelliJ IDEA.
User: ASUS
Date: 2021/3/2
Time: 22:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<title>ajax partial refresh</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.0.js"></script& gt;
<style type="text/css">
input {
width: 260px;
height: 25px;
}
input:focus {//Change color when button is clicked
background: #10a0e9;
}
</style>
</head>
<body style="text-align:center;">
<input type="button" value="btn1" onclick="btnfun1()">
<input type="button" value="btn2" onclick="btnfun2()">
<input type="button" value="btn3" onclick="btnfun3()">
<br>
<span> Hello there! My name is: </span>
<div id="div1">
</div>
</body>
<script type="text/javascript">
function btnfun1() {
$.ajax({
url: "<%=request.getContextPath()%>/ajaxServlet", //upload URL
type: "POST", //request method
data: {"flag": "one"}, //the data to be uploaded
dataType: "text", //set the format of the received response data
success: function (data) { //The request was successful
console.log(data);
$("#div1").html(data);
},
error: function () {
alert("There was an error... ");
},// indicates the callback function that will be executed if there is an error in the request response
});
}
function btnfun2() {
$.ajax({
url: "<%=request.getContextPath()%>/ajaxServlet", //upload URL
type: "POST", //request method
data: {"flag": "two"}, //the data to be uploaded
dataType: "text", //set the format of the received response data
success: function (data) { //The request was successful
console.log(data);
$("#div1").html(data);
},
error: function () {
alert("There was an error... ");
},// indicates the callback function that will be executed if there is an error in the request response
});
}
function btnfun3() {
$.ajax({
url: "<%=request.getContextPath()%>/ajaxServlet", //upload URL
type: "POST", //request method
data: {"flag": "three"}, //the data to be uploaded
dataType: "text", //set the format of the received response data
success: function (data) { //The request was successful
console.log(data);
$("#div1").html(data);
},
error: function () {
alert("There was an error... ");
},// indicates the callback function that will be executed if there is an error in the request response
});
}
</script>
</html>
Javaコード
{{コード
スクリーンショット
概要
ローカルリフレッシュを実現するAjaxの記事はこれで終わりです。もっと関連するAjaxローカルリフレッシュのコンテンツはBinaryDevelopの過去の記事を検索してください。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン