Ajaxでリアルタイム検証機能を実装する方法-jsチュートリアル-php.cn

Ajaxでリアルタイム検証機能を実装する方法

php中世界最好的语言

リリース： 2018-03-30 15:38:03

オリジナル

1219 人が閲覧しました

今回はajaxでリアルタイム検証機能を実装する方法を紹介します。 ajaxでリアルタイム検証機能を実装する際の注意点を実際のケースで見てみましょう。

ajaxとは

Ajaxとは「Asynchronous Javascript And XML」(Asynchronous JavaScript and XML)の略で、インタラクティブなWebアプリケーションを作成するためのWeb開発技術を指します。

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

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

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

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

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

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

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

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

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

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

<%@ 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

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();
}

ログイン後にコピー

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
 <display-name>Archetype Created Web Application</display-name>
 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
  <servlet-name>loginServlet</servlet-name>
  <servlet-class>com.lbw.servlet.loginServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>loginServlet</servlet-name>
  <url-pattern>/loginServlet</url-pattern>
 </servlet-mapping>
</web-app>

ログイン後にコピー

loginServlet.java

package com.lbw.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;
import java.io.PrintWriter;
/**
 * 后端使用Servlet处理请求
 */
public class loginServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //设置编码和响应头
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/xml;charset=UTF-8");
    response.setHeader("Cache-Control", "no-cache");
    //获取参数
    String username = request.getParameter("username");
    String msg = "";
    if("lbw".equals(username)){
      msg = "名称正确";
    }else {
      msg = "名称错误";
    }
    PrintWriter out = response.getWriter();
    out.println(msg);
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  }
}

ログイン後にコピー

テストを開始します

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

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

入力ボックスにテストデータを入力します

サーブレットのロジックとエラーメッセージによって決定されます返される値はサーブレットのロジックによって決定され、成功メッセージが返されますこのように、リアルタイム検証の要件を満たす Ajax 非同期リクエストが最初に実装されました

いくつかの細かい詳細

1. Maven を使用してプロジェクトをビルドする場合は注意してください、ここで web.xml と webapp のパスを設定します。Idea が使用されます

2. js を導入する場合はマッピングに相対パスを使用することに注意してください、EL を使用する場合は注意してください

式 Project Structure -> Facets は、解析されないことを避けるために isELIgnored="false"·` をオンにします。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。推奨読書:

動的な円グラフと縦棒グラフを実装するための Ajax の詳細な図解説明