Ajax同期および非同期リクエスト
ブラウザとサーバー間のデータ転送方法
同期して
非同期
2つの方法の違いは何ですか？
同期リクエスト、サーバーが応答すると、ページ全体が更新されます
非同期リクエスト、サーバーが応答すると、ページが部分的に更新されます
非同期リクエストの利点は何ですか？
非同期リクエストはユーザーエクスペリエンスを向上させることができます
非同期リクエストのアプリケーションシナリオは何ですか？
a：ユーザー名の検出
b：検索のオートコンプリート
c：ページの部分的な更新
ネイティブAjaxプログラミング
Ajaxとは
- Ajaxは「非同期JavascriptおよびXML」（非同期JavaScriptおよびXML）の略で、インタラクティブなWebアプリケーションを作成するためのWeb開発テクノロジーを指します。
Ajaxの用途は何ですか？
- ajaxは、ブラウザーとサーバー間の非同期要求メカニズムに特に使用されます
Ajaxプログラミング
ネイティブAjaxプログラミング（理解）
プログラミングにjqueryフレームワークを使用する（重点）
（1）従来のプログラム動作原理
ユーザーがリクエストを送信し、サーバーがリクエストを受け入れ、処理後にデータを返します。ブラウザは応答データを受け入れてデータを表示します。このとき、処理と受け入れの間にアイドル時間があり、ユーザーの待機時間が発生します
（2）Aajxのプログラムの動作原理は次のとおりです。ユーザーは、Ajaxエンジンが要求を処理した後、要求を送信し、サーバーに送信して要求を受け入れ、処理後にデータAjaxを返します。ブラウザーは応答データを受け入れ、データを表示します。ブラウザーは常に対話できます。通信のためのAjax、処理時間の短縮
[外部リンク画像の転送に失敗しました。ソースサイトにホットリンク防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-UV95p88C-1600397507993）（C：\ Users \ Carlos \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200918103752418.png）]
##ネイティブAjaxコードの例は次のとおりです。
ajax_Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="application/javascript">
// 原生的ajax开发:
// 1）创建Ajax引擎对象
// 2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
// 3）绑定提交地址
// 4）发送请求
// 5）接受响应数据
//
function clickFn() {
//1）创建Ajax引擎对象
var xmlHttp = new XMLHttpRequest();
//2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
xmlHttp.onreadystatechange = function (ev) {
//如果state值是4，说明收到响应数据
//如果状态码是200.说明服务器正常响应
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 5）接受响应数据
//获取响应数据
alert(xmlHttp.responseText); //response.getWriter().write("hello")
}
}
//3）绑定提交地址
//参1：表示请求方式
// 参2：表示服务器的资源访问路径，不用加项目名,
// 参3：表示是否异步，true是异步
xmlHttp.open("get","s1",true);
//4)发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
<input type="button" value="点我，发出异步请求" onclick="clickFn()"/>
</body>
</html>
AjaxServlet：
package com.lbl.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/s1")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("收到了异步请求");
response.getWriter().write("helloworld");
}
}
実行結果：
ネイティブAjaxプログラミングは不要になり、コードの量が多く、使用するのが不便で、関数にカプセル化され、直接呼び出す