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 중국어 웹사이트의 기타 관련 기사를 참조하세요!