Ajax 간편 실시간 검증 기능 구현 방법-JS 튜토리얼-php.cn

Ajax 간편 실시간 검증 기능 구현 방법

小云云

풀어 주다： 2018-01-05 15:06:13

원래의

1564명이 탐색했습니다.

Ajax는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)의 약자로, 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다. 이번 글은 Ajax의 간단한 실시간 검증 기능을 주로 소개하고 있으니, 필요한 친구들이 참고하시면 도움이 될 것 같습니다.

Ajax = 비동기식 JavaScript 및 XML(Standard Universal Markup Language의 하위 집합)

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

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

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

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

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

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

간단한 데모를 해보자

새로 고치지 않는 확인 양식의 데모를 만들고, 대화 상자에 사용자 이름을 입력하고, ajax 기술을 사용하여 백그라운드에서 확인을 수행합니다.

maven

을 사용하여 구축된 프로젝트 구조 login.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

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을 사용하여 프로젝트를 빌드할 때 프로젝트 구조 -> 패싯에 주의하세요. 그리고 EL 표현식을 사용할 때는 분석이 발생하지 않도록 isELIgnored="false"·`를 켜야 합니다.