Solicitud asincrónica, conozca Ajax

1. Descripción general de Ajax

Si es necesario actualizar el contenido de una página web tradicional, se debe volver a cargar la página web completa. Siempre que un usuario envía una solicitud al servidor, incluso si solo se necesita actualizar un poco de contenido parcial, el servidor actualizará toda la página. Las desventajas de este enfoque son:

El rendimiento se reducirá (un poco de contenido, ¡actualice toda la página!)
La página de operación del usuario se interrumpirá (se actualizará toda la página)

1) ¿Qué es Ajax?

Ajax son las siglas de "Asynchronous Javascript And XML", que se refiere a una tecnología de desarrollo web para crear aplicaciones web interactivas. Ajax = JavaScript y XML asíncronos.

Ajax es una tecnología que permite la comunicación asíncrona con el servidor sin actualizar todo el navegador cuando el cliente interactúa con el servidor.

Inserte la descripción de la imagen aquí

2) El papel del Ajax

Ajax puede hacer que las páginas web se actualicen de forma asincrónica . Esto significa que es posible actualizar una determinada parte de la página web (actualización parcial) sin recargar toda la página web .

Inserte la descripción de la imagen aquí
3) Beneficios del Ajax

Reduzca la carga del servidor y obtenga los datos necesarios.
No hay actualización para actualizar la página, lo que reduce el tiempo de espera real y psicológico del usuario.
Actualice solo parte de la página, use el ancho de banda de manera efectiva
Todos los navegadores principales son compatibles con Ajax

4) asincrónico y sincrónico

Cómo accede el navegador al servidor
- Acceso síncrono: el cliente debe esperar la respuesta del servidor y no se pueden realizar otras operaciones durante el proceso de espera.
- Acceso asíncrono: El cliente no necesita esperar la respuesta del servicio. Durante el período de espera, el navegador puede realizar otras operaciones.

Inserte la descripción de la imagen aquí

2. Implementación de ajax en modo JS (entender)

JS ajax: apareció el primero. Utilice un objeto XmlHttpRequest. Especialmente utilizado para enviar solicitudes ajax y recibir respuestas

Use ajax para enviar solicitudes, use ajax para recibir respuestas y use JS para actualizar la página.

Desventajas:
- Si usa la tecnología AJAX de JS, para lograr funciones simples, necesita escribir mucho código complejo.
- El código AJAX de JS tiene poca compatibilidad con el navegador.

Código JS de front-end, solo copie

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>

    <script>
        function run() {
     
     
            //1.创建 核心对象
            var xmlhttp;

            //2.判断浏览器类型
            if (window.XMLHttpRequest) {
     
     
                xmlhttp=new XMLHttpRequest();
            } else {
     
     
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }



            //3.建立连接
            /**
             * 三个参数:
             *      1.请求方式 get post
             *      2.请求资源的路径
             *      3.是否为异步 是 or 否
             */
            xmlhttp.open("GET","/login?username=tom",true);

            //4.发送请求
            xmlhttp.send();

            //5.获取响应结果
            /**
             * 什么时候获取响应数据?
             *      在服务器响应成功后获取
             */
            //监听readyState状态改变
            xmlhttp.onreadystatechange=function() {
     
     
                //readyState==4 响应已经就绪, 200 访问成功
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
     
     
                    //获取响应数据
                    var text = xmlhttp.responseText;
                    alert(text);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="run()"><br>
    局部刷新 <input type="text">
</body>
</html>

Servlet de backend

@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    
    

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    

        //1.获取请求数据
        String username = req.getParameter("username");

        //打印 username
        System.out.println(username);
        resp.getWriter().write(username);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        doGet(req, resp);
    }
}

3. Ajax de jQuery framework

3.1 Introducción a ajax de JQuery framework

Jquery es un excelente framework js, que naturalmente encapsula el ajax nativo de js. El método de operación del ajax encapsulado es más conciso y más poderoso.

Hay varios métodos de jquery relacionados con las operaciones de ajax, pero hay tres de uso común en el desarrollo: POST, GET, AJAX

3.2 método de solicitud GET

Cargue información a través de una solicitud HTTP GET remota. Esta es una función de solicitud GET simple, si necesita configuraciones complejas de parámetros ajax, use $ .ajax

Obtener la sintaxis del modo de solicitud

$ .get (url, datos, devolución de llamada, tipo)

Parámetro 1: urlruta de solicitud
Parámetro 2: dataLos datos transportados en el
formato de solicitud : key=valueo {username = 'baby', pwd: 666}
Parámetro 3: callbackfunción de devolución de llamada después de una respuesta exitosa
Parámetro 4: typeTipo de datos de respuesta texto html xml json

Ejemplo de código

//JQuery get方式发送异步请求
function run2() {
    
    
    //1.参数1 url
    var url = "/login";

    //2.参数2 数据
    var data = {
    
    username:"jack"};

    //3.发送get请求
    $.get(url,data,function (param) {
    
    
        //data响应回来的内容体
        alert("响应成功! 响应数据: " + param);
    },"text");
}

3.3 método de solicitud POST

Cargar información a través de una solicitud POST HTTP remota. Esta es una función de solicitud POST simple, si necesita configuraciones complejas de parámetros ajax, use $ .ajax

Sintaxis de la solicitud de publicación

$ .post (url, data, callback
, type) dentro de los cuatro parámetros y obtener de la misma manera, no es lo mismo que las diferentes formas de una solicitud

Ejemplo de código

//JQuery post方式发送异步请求
function run3() {
    
    
    //1.参数1 url
    var url = "/login";

    //2.参数2 数据
    var data = {
    
    username:"lucy"};

    //3.发送get请求
    $.post(url,data,function (param) {
    
    
    	//data响应回来的内容体
    	alert("响应成功! 响应数据: " + param);
    },"text");
}

3.4 método de solicitud Ajax

El método $ .ajax () puede establecer los parámetros subyacentes con más detalle. Este método se suele utilizar para solicitudes que no pueden cumplirse con otros métodos.

Sintaxis del modo de solicitud Ajax:

Método 1: jQuery.ajax ({[configuración]})
Método 2: $ .ajax (())

settings es un objeto en forma literal js, el formato es un par clave-valor {nombre: valor, nombre: valor}, los nombres de atributo de nombre comúnmente utilizados son los siguientes:

Ejemplo de código

//Ajax方式 发送请求
function run4() {
    
    
 	$.ajax({
    
    
	 	url:"/login",
 		async:true, //是否异步
 		data:{
    
    username:"tom"},
 		type:"POST", //请求方式
 		dataType:"text", //返回数据的数据类型
 		success:function (param) {
    
    
 			alert("响应成功!! " + param)
 		},
 		error:function () {
    
    
 			alert("响应失败!!")
 		}
 	});
}

4. Caso: compruebe si se ha registrado el nombre de usuario

Requisito: el usuario ingresa el nombre de usuario, después de quitar el mouse, se juzga el nombre de usuario y se le pregunta si está disponible

Inserte la descripción de la imagen aquí
paso:

Prepare el servlet, verifique el nombre de usuario y devuelva el resultado (si está disponible)
Para el cuadro de entrada de página, vincule el evento de eliminación del mouse
Realice una solicitud asincrónica y obtenga el resultado de la respuesta
Según el resultado, agregue dinámicamente código HTML

Servlet de fondo

@WebServlet("/checkName")
public class CheckNameServelt extends HttpServlet {
    
    

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    

        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        //获取姓名
        String username = req.getParameter("username");

        //封装数据
        HashMap<String,Object> map = new HashMap<>();

        //判断用户是否存在
        if("tom".equals(username)){
    
    
            map.put("flag",true);
            map.put("msg","用户名已经被占用!");
            String data = JSON.toJSONString(map);
            resp.getWriter().print(data);
        }else{
    
    
            //用户名未被使用
            map.put("flag",false);
            map.put("msg","用户名可以使用!");
            String data = JSON.toJSONString(map);
            resp.getWriter().print(data);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        doGet(req, resp);
    }
}

JSP de interfaz

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
        $(function() {
     
     
            $("#username").blur(function () {
     
     

                //获取用户名
                var name = $(this).val();

                //判断用户名不为空
                if(name != null && name != ""){
     
     
                    $.ajax({
     
     
                        url:"/checkName",
                        type:"GET",
                        data:{
     
     username:name},
                        dataType:"json",
                        success:function (data) {
     
     
                            if(data.flag){
     
     
                                //设置span内容体
                                $("#spanMsg").html("<font color='red'>" + data.msg+ "</font>");

                            }else if(!data.flag){
     
     
                                $("#spanMsg").html("<font color='green'>"+ data.msg + "</font>");
                            }
                        },
                        error:function () {
     
     
                            alert("请求处理失败!")
                        }
                    });

                }
            })
        });

    </script>
</head>
<body>
<form action="#" method="post">

    用户名: <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="spanMsg" style="color:red"></span><br>

    密码: <input type="text" name="password" placeholder="请输入密码"><br>
</form>

</body>
</html>

Descarga de la fuente del caso: código de muestra Ajax