のAJAXフロントエンドの基礎

AJAX

AJAXとは何か、単に、非同期JavaScriptの自然の特徴を使用することで、非同期要求の背景情報の使用、ページ部分ページ更新をリフレッシュすることができない効果を達成するように。

原生AJAX

JavaScriptは、AJAXは依存するXMLHttpRequestオブジェクト。

• また、新しいオブジェクトを作成するために使用するJS：new XMLHttpRequest()
• onreadystatechangeイベントを聞いて、モニタ要求と応答の変化は、コールバック関数コールバックとして理解することができる（onreadystatechangeにイベントが5（0トリガされる - readyStateのそれぞれの変化に対応する、4））
• readyStateの：状態値、そこにXMLHttpRequestの状態を要求します。0から4まで変化します：
  • 0：初期化されていない要求
  • 1：サーバー接続が確立されています
  • 2：要求の受信
  • 3：要求処理
  • 4：要求が完了しており、応答は準備ができています
• ステータス：レスポンスのステータス値：200：成功応答404
• open(method,url,async)：所定の要求情報、住所、同期/非同期：
  • 方法：要求のタイプ、GETやPOST
  • URL：サーバ上のファイルの場所
  • 非同期：真（非同期）または偽（シンク）（同期は、コールバック関数を提供する必要があります）
• send(String)送信要求。取得する場合、合格しないパラメータを送って、良い戦いURLパラメータを開き、ポスト、何のパラメータを開いていないとき、求心性パラメータを送信（この場合は方法提供serHeaderのContent-Typeの属性を使用する必要があります）
• responseText応答結果の文字列を取得するには。XMLとしての応答を取得する（のresponseXML）

最後のネイティブAJAXの検出名のデモ：

原生AJAX

フロントエンドのHTML：

<h2>用户注册</h2>
用户名：
<input type="text" name="userName" id="userName"> <span id="info"></span>

JS：

//绑定失去焦点事件
document.getElementById("userName").onblur = function (ev) {
    var userName = this.value;
    var xhr = new XMLHttpRequest();
    //绑定回调函数
    xhr.onreadystatechange = function (ev1) {
        if (xhr.readyState === 4 && xhr.status === 200){
            document.getElementById('info').innerText = xhr.responseText;
        }
    };
    xhr.open("get", '/AjaxServlet?userName=' + userName, true);
    xhr.send();
};

サーブレットの背景：

String userName = request.getParameter("userName");
response.setContentType("text/plain;charset=utf-8");
if ("admin".equals(userName)){//这里为了简单不从数据库获取了，直接使用固定的"admin"检验
    response.getWriter().println("用户名已存在");
}else {
    response.getWriter().println("用户名可用");
}

jQueryのは、AJAXをカプセル化

ネイティブjQueryのAJAXのパッケージのうち、より便利に使用します。

リクエストメソッド	文法	説明
リクエストをGET	$.get(url,[data],[callback],[type])	[]はオプションです
POSTリクエスト	$.post(url,[data],[callback],[type])	[]はオプションです
AJAXリクエスト	$.ajax({settings})
署名をGET	$.get({settings})	新しいメソッドを取得jQuery3.0
POST署名	$.post({settings})	jQuery3.0新しい投稿方法

取得/ポスト

$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])

パラメータ	説明	必須
URL	要求アドレス	不可欠
データ	サーバ側に送信された要求パラメータ、フォーマット モード1：キー=値＆key = valueの 第二の方法：{キー：値、キー：値...}	オプショナル
折り返し電話	コールバック：リクエストが成功したときに関数がトリガされます	オプショナル
タイプ	パラメータの種類を返します。値は、XML、HTML、スクリプト、JSON、テキストであってもよいし、などを_defaul、デフォルトのテキスト	オプショナル

使用jQueryの取得/ postメソッドは、 AJAXの訪問を行いました。

$('#userName').blur(function () {
    //看var不舒服换成了let
    let userName = $(this).val();
    $.get('/AjaxServlet', {userName:userName},function (result) {
        $('#info').text(result)
    });
});
//get/post用法一样

ポストの次のような場合は、他の一般的な使い方は、取得します

• キャッシュファイルを使用します（ファイルをやサーバ上のデータベースを更新）することはできません - フォームデータを提出します
• （POSTデータの量を制限しません）サーバーへ---ファイルのアップロードを大量のデータを送信します

jQueryの使用AJAXメソッドは、 AJAXの訪問を行いました。
$.ajax({settings})

パラメータを設定します：

プロパティ名	説明
URL	URLアドレス要求
非同期	真の非同期、偽同期（デフォルトはtrue）
データ	サーバに送信されるデータは、キーの形式で行うことができ、それはオブジェクトJSの形態であってもよいです
タイプ	要求モード（デフォルトはGETです）
データ・タイプ	予想戻りデータタイプ（XML、HTML、スクリプト、JSON、テキスト、_default）
成功	成功した要求のコールバック関数
エラー	リクエスト失敗したコールバック関数

データ要求のためのAjaxの方法：

AJAXの方法

$("#userName").blur(function () {
    let userName = $(this).val();
    $.ajax({
        url:"/ajaxDemoServlet",
        data:{"userName":userName,"age":4},
        async:true,
        type:"GET",
        dataType:"text",
        success:function (result) {
            $("#info").text(result);
        },
        error:function (errorRes) {
            alert("出现异常了")
        }
    })
});

jQueryの3.0の新方法：$.get({settings})、$.post({settings})このような使用方法やAjaxの方法：

新しいメソッドを取得します。

$("#userName").blur(function () {
    let userName = $(this).val();
    $.get({
        url:"/ajaxDemoServlet",
        data:{"userName":userName,"age":4},
        dataType:"text",
        success:function (result) {
            //处理正常的响应
            $("#info").text(result);
        },
        error:function (errorRes) {
            alert("出现异常了")
        }
    })
});

JSON

JSON 3つの式：

タイプ	道	説明
オブジェクトタイプ：	{K:V,K:V}	オブジェクトを表し、より多くの属性名と値があります
アレイ/セットタイプ：	[V1，V2，V3]	これは、要素の任意のタイプとすることができるオブジェクトの配列を表します。
混合型：	[{K:V, K:V}, {K:V, K:V}]若しくは{K:[V, V, V]}	アレイ内の各要素の代わりに、オブジェクトのプロパティ値は、配列オブジェクトであります

Javaの、JSONオブジェクトシステム変換

使用ジャクソン

（3つのパッケージを手動で追加することができます依存関係を追加jackson-databind.jar jackson-core.jar jackson-annotation.jar、または直接、Mavenの）：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.9</version>
</dependency>

文字列にJSONオブジェクト：
に依存しているObjectMapperオブジェクト、呼び出すwriteValueAsString(Object o)オブジェクト、配列、JSONへのコレクションに方法を。

オブジェクトにJSON文字列
の呼び出し方法を。ObjectMapperpublic <T> T readValue(String content, Class<T> valueType)

FastJsonツールを使用します

主な用途toJSONStringとparseObjectシリアライズとデシリアライズ操作はここでは省略されています。

---

AJAXユーザ名認証のデモ

フロントページ：

<input type="text" id="inputUserName" name="username" class="form-control" placeholder="用户名" required autofocus>
<span id="info"></span>

完全なコード：

完全なHTMLコード

ブートストラップのフレームワークを使用して、JSファイルの場所を自分で変更します。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come test in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>AJAX Demo</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/css/login.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <form class="form-signin" action="/login" method="POST">
        <div class="text-center">
            <h2 class="form-signin-heading">登录页面</h2>
        </div>
        <label for="inputUserName" class="sr-only">用户名</label>
        <input type="text" id="inputUserName" name="username" class="form-control" placeholder="用户名" required autofocus>
        <span id="info"></span>
        <label for="inputPassword" class="sr-only">密码</label>
        <input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required>
        <div>
            <input type="text" name="checkCode" class="form-control" style="width: 184px;float: left;"
                   placeholder="请输入验证码">
            <img id="captcha" style="width: 84px;margin-left: 29px;" src="/CodeServlet" alt="验证码"
                 onclick="changeImg(this)">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> 记住账号密码
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    </form>

</div> <!-- /container -->

</body>
<script src="/js/jquery.js"></script>
<script src="/js/myjs/login.js"></script>
</html>

JavaScriptの結合事象：

//使用JQuery绑定
$('#inputUserName').blur(function () {
    //获取输入的userName
    let userName = $(this).val();
    if (userName === "") {
        $('#info').html('<font color="red">请输入用户名</font>');
    } else {
        //AJAX异步请求数据
        $.get('/CheckNameServlet', {userName: userName}, function (result) {
            //这里需要把字符串转化为boolean
            if (!JSON.parse(result.flag)) {
                $('#info').html('<font color="red">用户名已存在</font>');
            } else {
                $('#info').html('<font color="green">✔</font>');
            }
            console.log(result);
        },'json')
    }
});

制御層のその後後端：

@WebServlet("/CheckNameServlet")
public class CheckNameServlet 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 {
        response.setContentType("text/plain;charset=utf-8");
        String userName = request.getParameter("userName");
        UserService us = new UserService();
        boolean flag = us.queryUserByName(userName);
        Map<String,String> map = new HashMap<>();
        map.put("flag", String.valueOf(flag));//返回布尔值好像还不如返回 0 或 1
        //这里使用了Jackson转化为Json
        response.getWriter().print(new ObjectMapper().writeValueAsString(map));
        //System.out.println(map);
    }
}

背景ビジネス層：

public class UserService {
    public boolean queryUserByName(String name){
        UserDao ud = new UserDao();
        List<User> list = ud.queryUserByName(name);
        if (list!=null && list.size()>0){
            return false;
        }else {
            return true;
        }
    }
}

背景永続層：

public class UserDao {
    public List<User> queryUserByName(String name) {
        JdbcTemplate jt = DataSourceUtil.getJdbcTemplate();
        String sql = "select * from t_user where username = ?";//这个sql不太好，查询了太多无用数据
        return jt.query(sql, new BeanPropertyRowMapper<>(User.class), name);
    }
}

---

正味の効果：

初期ページ：

ユーザー名]ボックスに入力しなくてもフォーカスを失ったときは：

ユーザー名を入力します。すでに存在しています：

利用できるユーザー名：

---

これまでのところ、AJAX、簡単な紹介