Ajax 간편 실시간 검증 기능 구현 방법
- 小云云원래의
- 2018-01-05 15:06:131541검색
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"·`를 켜야 합니다.
관련 추천:
WeChat 애플릿은 간단한 입력 정규식 확인 기능 공유를 구현합니다. AngularJS는 초점을 맞췄을 때와 초점을 잃었을 때 양식 확인 기능을 자세히 구현합니다. 상세 설명 예시 jQuery는 양식 확인 기능을 완성합니다위 내용은 Ajax 간편 실시간 검증 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!