ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax簡易リアルタイム検証機能実装方法

Ajax簡易リアルタイム検証機能実装方法

小云云オリジナル: 2018-01-05 15:06:131602ブラウズ

Ajax は「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。この記事では、ajax の簡単なリアルタイム検証機能を中心に紹介しますので、必要な方は参考にしていただければ幸いです。

Ajax = 非同期 JavaScript および XML (標準ユニバーサルマークアップ言語のサブセット)。

Ajax は、高速で動的な Web ページを作成するためのテクノロジーです。

Ajax は、ページ全体をリロードせずに Web ページの一部を更新できるテクノロジーです。

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

従来の Web ページ (Ajax なし) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

これは Baidu の定義であり、十分に詳細です。
非同期とは、サーバーとブラウザーの間の対話モードを指します。

同期では、各リクエストが発行されるとユーザー操作がブロックされ、操作を続行する前に応答を返す必要があります。非同期とは、リクエストを送信した後、ユーザーが応答を待つ必要がなく、すべてが ajax によって実装され、Web ページを更新せずにデータを部分的に更新できることを意味します。両端間の通信効率が向上しました。

小さなデモをしてみましょう

ajax テクノロジーを使用して、非更新検証フォームのデモを作成し、ダイアログボックスにユーザー名を入力し、バックグラウンドで検証を実行します。

Maven を使用して構築されたプロジェクト構造

ログイン.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
  <title>login</title>
</head>
<body>

ログインへようこそ:

    用户名：<input type="text" name="username" id="username" onchange="CallServer()"/>
    <!-- 显示提示信息 -->
    <p id="msg"></p>
    <!-- 在jsp页面中引入js，绝对路径的方式 -->
    <script src="${pageContext.request.contextPath}/js/main.js"></script>
</body>
</html>

main.js

りぃ

web.xml

りぃ

loginServlet.java

alert("use ajax!")
//创建XMLHttpRequest对象，在不同浏览器
function createXMLHTTP() {
  if(window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
  }else {
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}
function CallServer() {
  var username = document.getElementById("username").value;
  // 判断为空
  if ((username == null) || (username == "")) return;
  var xmlhttp = createXMLHTTP();
  // 构建请求url
  var url = "/loginServlet"+"?"+"username="+username;
  //状态码改变调用事件
  xmlhttp.onreadystatechange = function () {
    //正常返回，替换msg内容
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById("msg").innerHTML = xmlhttp.responseText;
    }
  }
  //异步提交请求
  xmlhttp.open("GET",url,true);
  //发送请求
  xmlhttp.send();
}

テストを開始します

「localhost:8888/login.jsp」と入力すると、ポップアップウィンドウが表示されます

js の jsp への導入が成功したことを表します

入力ボックスにテストデータを入力してください

サーブレット内のロジックによって判断され、エラー情報が返されます

サーブレット内のロジックによって決定され、成功情報が返されます

その結果、Ajax 非同期リクエストが最初に実装され、リアルタイム検証の要件を満たしました

細かい詳細

1. Maven を使用してプロジェクトを構築する場合は、プロジェクト構造 -> ファセットのパスに注意してください。また、EL 式を使用する場合は、分析が行われないように isELIgnored="false"・` をオンにする必要があります。

Ajax簡易リアルタイム検証機能実装方法

関連記事