ホームページ >ウェブフロントエンド >jsチュートリアル >Ajaxによる簡易リアルタイム検証機能の実装
Ajaxによる簡易リアルタイム検証機能の実装
- php中世界最好的语言オリジナル
- 2018-04-13 16:32:321299ブラウズ
今回は、ajaxでリアルタイム検証を実装する方法を説明します。ajaxでリアルタイム検証を実装するための注意事項は何ですか?実際のケースを見てみましょう。
ajaxとは
Ajax は「Asynchronous Javascript And XML」(非同期 JavaScript と XML) の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。
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 を使用してプロジェクトをビルドする場合は、Project Structure -> Facets 式が解析されないように isELIgnored="false"·` をオンにする必要があることに注意してください。
この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:
Parcel.js+Vue 2.x クイック構成パッケージ化方法以上がAjaxによる簡易リアルタイム検証機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。