집 >웹 프론트엔드 >JS 튜토리얼 >Ajax에서 실시간 검증 기능을 구현하는 방법

Ajax에서 실시간 검증 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-03-30 15:38:031242검색

이번에는 ajax로 실시간 검증 기능을 구현하는 방법을 보여드리겠습니다. ajax에서 실시간 검증 기능을 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

ajax란 무엇입니까

Ajax는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)의 약자로 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 말합니다.

Ajax = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

Ajax는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

Ajax는 전체 웹페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있는 기술입니다.

Ajax는 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

Ajax를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

이것은 Baidu의 정의이며 충분히 자세합니다.
추가할 가치가 있는 한 가지는 비동기에 대한 이해입니다. 여기서는 서버와 브라우저 간의 상호 작용 모드를 나타냅니다.

동기화는 각 요청이 발행된 후 사용자 작업이 차단되며 작업을 계속하기 전에 응답이 반환되도록 요구해야 합니다. 비동기식은 요청을 보낸 후 사용자가 응답을 기다릴 필요가 없다는 것을 의미하며 모든 것이 ajax에 의해 구현되며 웹 페이지를 새로 고치지 않고도 데이터를 부분적으로 업데이트할 수 있습니다. 양단 간 통신 효율성이 향상되었습니다.

작은 데모를 만들어 보겠습니다

새로 고침이 아닌 확인 양식의 데모를 만들어 보세요. 대화 상자에 사용자 이름을 입력하고 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가 사용됩니다Project Structure -> Facets

2.js 도입 시 매핑 시 상대 경로 사용에 주의하고, EL 사용 시 주의하세요.

표현식 구문 분석을 방지하려면 isELIgnored="false"·`를 켜세요.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!