Aplicación sencilla de ajax en jQuary

Aplicación sencilla de ajax en jQuary

ajax

Introducción:

​Ajax = Javascript asíncrono y X ML ( JavaScript asíncrono y XML )

Ajax se refiere a una tecnología de desarrollo web para crear aplicaciones web interactivas, rápidas y dinámicas, que pueden actualizar algunas páginas web sin recargar toda la página web.

Ajax permite que las páginas web se actualicen de forma asíncrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que partes de una página web se pueden actualizar sin recargar toda la página web.

principio de funcionamiento:

El principio de funcionamiento de Ajax es equivalente a agregar una capa intermedia (motor AJAX) entre el usuario y el servidor para que las operaciones del usuario y las respuestas del servidor sean asincrónicas. No todas las solicitudes de los usuarios se envían al servidor. Parte de la validación y el procesamiento de datos se entregan al propio motor Ajax, y solo cuando se determina que es necesario leer nuevos datos del servidor, el motor Ajax envía una solicitud al servidor en su nombre.

En comparación con la página jsp tradicional conectada directamente al servlet para saltar y actualizar toda la página, ajax puede conectarse directamente al servlet de fondo sin actualizar toda la página.

El uso de ajax para interactuar con los servlets puede reducir el uso de pequeños scripts en las páginas jsp y reducir el acoplamiento entre los extremos frontal y posterior.

Forma tradicional: (interacción ordinaria del navegador, es decir, la interacción entre jsp/html y servlet en circunstancias normales)

Modo Ajax: (Interacción ajax del navegador, es decir, usar ajax en jsp/html para interactuar de forma asíncrona con servlets para lograr actualizaciones de página parciales)

Se puede ver intuitivamente en la figura anterior que ajax se usa para la interacción, y las solicitudes múltiples se realizan de forma asincrónica sin interferir entre sí.

La implementación del método ajax():

$.ajax({ 
	url:请求地址,
	type:"get | post | put | delete " 默认是get, 
	data:请求参数 {"id":"123","pwd":"123456"}, 
	dataType:请求数据类型"html | text | json | xml | script | jsonp ",
    success:function(data,dataTextStatus,jqxhr){ },//请求成功时
    error:function(jqxhr,textStatus,error)//请求失败时 
})

//编写上述代码时，注意ajax中每一项参数需要采用逗号隔开
//url:请求的路径  
//type：发送请求的方式
//data:发送的数据  
//datatype 返回的数据类型
//success:成功时执行的方法  error：失败时执行的方法（要么成功，要么失败，两者必须执行其一）

Entre los tipos de métodos de solicitud, comúnmente usamos get y post.La diferencia entre los dos es:

• De forma similar a los métodos get y post en el envío de formularios en la página jsp de forma tradicional, cuando el método ajax utiliza el método get para enviar datos, los datos que transmitimos al fondo se pueden ver en la consola, pero los datos transmitidos no se puede ver en el método de publicación

• GET es más simple y rápido que POST y funciona en la mayoría de los casos. Sin embargo, utilice una solicitud POST en los siguientes casos:

  No se pueden usar archivos en caché (actualizar archivos o bases de datos en el servidor);

  Enviar una gran cantidad de datos al servidor (POST no tiene límite de datos);

  POST es más estable y confiable que GET cuando envía una entrada de usuario que contiene caracteres desconocidos.

Cuando entrará en el método de error, existen principalmente las siguientes situaciones:

1. error de URL: la ruta de URL no puede aparecer en chino y debe ser una dirección a la que se pueda saltar
2. error de tipo de datos: el tipo de datos devuelto por el fondo es inconsistente con lo que la recepción necesita recibir, o los datos devueltos por el fondo no se ajustan a la especificación, y se producirá un error. Por ejemplo, al devolver en formato json , escribe {id:1, nombre: "Zhang San"} (error), el formato correcto debe ser {"id":1,"nombre":"Zhang San"}
3. Error de datos: se deben escribir los datos solicitados por el primer plano al segundo plano, incluso si los datos no se envían, se debe pasar {}, de lo contrario devolverá el formato xml y solicitará parsererror.data: "{}"; los parámetros pasado entre el primer plano y el fondo Debe seguir el formato de codificación admitido por ajax, y los parámetros no pueden contener caracteres especiales
4. solicitud asincrónica error asincrónico síncrono: el valor predeterminado async es verdadero, lo que admite solicitudes asíncronas. Si desea realizar una solicitud síncrona (ejecución ajax y luego escribir una ejecución ajax), debe establecer async en falso

El método get() o post() carga información a través de una solicitud HTTP remota (para simplificar la escritura):

//get()方法
$.get(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 });

//post()方法
$.post(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 });

//url:请求的路径  
//data:发送的数据  
//function(result){}: success时执行的方法

//上面两种方法默认接受的返回数据类型为text类型
//当我们要接受其他形式的数据时，可直接在function方法后加上要接受的数据类型，例：
$.post(url,data,function(result) { //省略将服务器返回的数据显示到页面的代码 }，datatype);

Si los datos devueltos por el fondo están en formato json, el objeto debe convertirse a json en segundo plano; de lo contrario, se informará un error. La mayoría de los métodos del proyecto aún reciben datos de tipo String, pero en este momento implica usar GSON para convertir el objeto en un objeto JSON de tipo String, que no se ampliará aquí en detalle.

Finalmente, se presenta un ejemplo simple (página jsp) para realizar la función de fondo de imitar los Me gusta de Weibo:

</head>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#zan").click(function (){
                const uid = ${requestScope.uid};
                const zan = $("#zan").val();
                $.ajax({
                    url:"/GreatAjax",
                    type:"post",
                    data:{"uid":uid,"zan":zan},
                    dataType:"JSON",
                    success:function (result){
                        $("#zan").val(result.zan);
                        $("#ag").html(result.allGreat);
                    },
                    error:function (result){
                    	console.log("出错了出错了");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form>
        用户编号：<span>${requestScope.uid}</span><br><br>
        用户姓名：<span>${requestScope.uname}</span><br><br>
        <input type="button" value="${requestScope.zan}" id="zan"><br><br>
        总点赞数：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>
${requestScope.zan}" id="zan"><br><br>
        总点赞数：<span id="ag">${requestScope.allGreat}</span>
    </form>
</body>