Aplicación de la tecnología Ajax
Introducción a la tecnología Ajax
antecedentes
Hoy, con el rápido desarrollo de Internet, las aplicaciones WEB tradicionales tienen requisitos urgentes de alta concurrencia, alto rendimiento y alta confiabilidad. La interacción de un solo subproceso entre el cliente y el servidor ya no puede satisfacer las necesidades en esta etapa. Necesitamos obtener datos del servidor en un modo de carga asincrónico y bajo demanda y actualizarlos a tiempo para mejorar la experiencia del usuario, por lo que Nació la tecnología Ajax.
Descripción general de Ajax
Ajax (JavaScript asincrónico y XML) es una tecnología de cliente de aplicación web que puede utilizar un script de cliente (javascript) para comunicarse de forma asincrónica con la aplicación del servidor (varios subprocesos pueden interactuar con el servidor al mismo tiempo) y obtener datos del servidor a pedido. Se puede realizar una actualización parcial para mejorar la respuesta de los datos y la velocidad de representación.
Análisis de escenarios de aplicaciones Ajax
La mayor ventaja de la tecnología Ajax es que el subyacente es asíncrono y luego se actualiza parcialmente, lo que mejora la experiencia del usuario. Esta tecnología ahora se aplica bien en muchos proyectos, como:
- Sistema de productos básicos.
- sistema de evaluación.
- Sistema de mapas.
- ……
AJAX solo puede enviar y recuperar los datos necesarios al servidor y usar JavaScript en el cliente para procesar la respuesta del servidor. De esta manera, los datos intercambiados entre el servidor y el navegador se reducen considerablemente y el servidor responde más rápido. Sin embargo, la tecnología Ajax también tiene desventajas: la mayor desventaja es que no puede realizar directamente el acceso entre dominios.
Inicio rápido de la tecnología Ajax
Modelo de respuesta de solicitud Ajax
La forma tradicional es la solicitud y respuesta web (el cliente tiene que esperar el resultado de la respuesta), como se muestra en la figura:
Solicitud y respuesta Ajax (la clave es que el cliente no bloquea), como se muestra en la figura:
Código de plantilla Ajax (cuatro pasos)
Análisis de los pasos de programación: (El foco está en la entrada del objeto tecnología ajax-XMLHttpRequest-XHR)
Paso 1: Cree un objeto XHR basado en el evento dom
Paso 2: Registre un monitor de estado en el objeto XHR (supervise el proceso de comunicación entre el cliente y el servidor)
Paso 3: Establezca una conexión con el servidor (especifique el método de solicitud, solicitar url, sincronizar o asincrónico)
Paso 4: Enviar la solicitud (pasar los datos de la solicitud al servidor)
Análisis de código de plantilla:
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
console.log(xhr.responseText);
}
}
}
xhr.open("GET",URL,TRUE);
xhr.send(null);
Práctica rápida de la solicitud Ajax en el proyecto Spring
Paso 1: descripción de la empresa
Al activar el botón en la página, se envía una solicitud ajax al servidor y el resultado de la respuesta del servidor se actualiza en la página a través de un método de actualización parcial, como se muestra en la figura:
Paso 2: Cree el módulo del proyecto, como se muestra en la figura:
El tercer paso es agregar dependencias web del proyecto
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
Paso 4: Cree un AjaxController para manejar las solicitudes de los clientes, el código es el siguiente:
package com.cy.pj.ajax.controller;
@RestController
public class AjaxController{
@GetMapping("/doAjaxStart")
public String doAjaxStart(){
return "request ajax start result"
}
}
Paso 5: En el directorio estático del proyecto, cree una página ajax-01.html, el código es el siguiente:
El código del elemento html es el siguiente:
<div>
<h1>The Ajax 01 page</h1>
<button onclick="doAjaxStart()">do ajax start</button>
<span id="result"></span>
</div>
Los elementos del script javascript son los siguientes:
<script>
//js中问题的解决方案:console.log(),debugger,排除法
function doAjaxStart(){
debugger //js中断点
//初始化span标记内部内容(可选)
let span=document.getElementById("result");
span.innerHTML="Data is loading....."
//创建XHR对象
let xhr=new XMLHttpRequest();
//设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
span.innerHTML=xhr.responseText;
}
}
const url="http://localhost/doAjaxStart";
//建立连接
xhr.open("GET",url,true);//true 表示异步
//发送请求
xhr.send(null);
}
</script>
Entre ellos, readyState4 indica que se han recibido los datos del servidor al cliente, estado200 significa que el procesamiento del servidor es correcto, 500 significa anormal.
El sexto paso es iniciar el servicio para las pruebas de acceso.
Inicie el servicio, abra el navegador e ingrese http: //localhost/ajax-01.html, haga clic en el botón de la página para acceder y verifique el resultado, como se muestra en la figura:
Realización empresarial básica de la tecnología Ajax
Descripción del negocio
Cree una página ajax-02, agregue obtener, publique, elimine, coloque botones de solicitud en la página, envíe una solicitud asíncrona ajax al servidor cuando se active el botón y procese el resultado de la respuesta, como se muestra en la figura:
Diseño e implementación de servidores
Agregue el código para procesar solicitudes ajax en AjaxController. Los códigos clave son los siguientes:
Preparación inicial de datos
Agregue la propiedad List (base de datos de simulación) al AjaxController e inicialice los datos a través del constructor. El código clave es el siguiente:
private List<Map<String,String> dbList=new ArrayList<>();
public AjaxController(){
Map<String,String> map=new HashMap<String,String>();
map.put("id","100");
map.put("city","beijing");
dbList.add(map);
map=new HashMap<String,String>();
map.put("id","101");
map.put("city","shanghai");
dbList.add(map);
}
Agregar código comercial del lado del servidor para procesar solicitudes de obtención
@GetMapping(path={"/doAjaxGet/{city}","/doAjaxGet")
public List<Map<String,String> doAjaxGet(@PathVariable(required=false) String city){
List<Map<String,String>> list=new ArrayList<>();
for(Map<String,String> map:dbList){
if(map.get("city").contains(city)){
list.add(map);
}
}
return list;
}
Agregar código comercial del lado del servidor para procesar solicitudes de publicación
@PostMapping("/doAjaxPost")
public String doAjaxPost(@RequestParam Map<String,String> map){
dbList.add(map);
return "save ok";
}
Si el cliente es una solicitud de publicación y la cadena de formato json se pasa al servidor, nuestro código debe diseñarse de la siguiente manera
@PostMapping("/doAjaxPostJson")
public String doAjaxPost(@RequestBody Map<String,String> map){
dbList.add(map);
return "save ok";
}
Agregue código comercial del lado del servidor para procesar solicitudes de venta (generalmente se usa para actualizaciones)
@PostMapping("/doAjaxPut")
public String doAjaxPut(@RequestParam Map<String,String> paramMap){
for(Map<String,String> map:dbList){
if(map.get("id").equals(paramsMap.get("id"))){
map.put("city",paramMap.get("city"))
}
}
return "update ok";
}
Agregue el código para manejar la solicitud de eliminación
@DeleteMapping("/doAjaxDelete/{id}")
public String doDeleteObject(@PathVariable String id){
//基于迭代器执行删除操作
Iterator<Map<String,String>> it=dbList.iterator();
while(it.hasNext()){
Map<String,String> map=it.next();
if(map.get("id").equals(id)){
it.remove();//基于迭代器执行删除操作
}
}
return "delete ok";
}
Diseño e implementación del cliente
Cree la página ajax-02.html, sus elementos html clave son los siguientes:
<div>
<h1>The Ajax 02 Page</h1>
<button onclick="doAjaxGet()">Do Ajax Get</button>
<button onclick="doAjaxPost()">Do Ajax Post</button>
<button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
<button onclick="doAjaxDelete()">Do Ajax Delete</button>
<button onclick="doAjaxPut()">Do Ajax Put</button>
</div>
Método de solicitud AjaxGet, el código clave es el siguiente:
function doAjaxGet(){
//1.创建XHR对象
let xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
let div=document.getElementById("result");
div.innerHTML=xhr.responseText;
}
}
}
//3.建立连接
//let params="b";
let params="";
xhr.open("Get",`http://localhost/doAjaxGet/${params}`,true);
//4.发送请求
xhr.send(null);
}
Método de solicitud de publicación Ajax, el código clave es el siguiente:
function doAjaxPost(){
//1.创建XHR对象
let xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
let div=document.getElementById("result");
div.innerHTML=xhr.responseText;
}
}
}
//3.建立连接
let params="id=102&city=shenzhen"
xhr.open("post",`http://localhost/doAjaxPost`,true);
//post请求必须要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);//post请求可以将参数放到send方法内部
}
Código de solicitud Ajax Post, envíe datos en formato JSON al servidor, el código clave es el siguiente:
function doAjaxPostJson(){
//1.创建XHR对象
let xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
let div=document.getElementById("result");
div.innerHTML=xhr.responseText;
}
}
}
//3.建立连接
let params={id:103,city:"xiongan"}
let paramsStr=JSON.stringify(params);//将json对象转换为json字符串
console.log("jsonStr",paramsStr);
xhr.open("post",`http://localhost/doAjaxPostJSON`,true);
//post请求必须要设置请求头
xhr.setRequestHeader("Content-Type","application/json");
//4.发送请求
xhr.send(paramsStr);//post请求可以将参数放到send方法内部
}
El código clave del método de solicitud Ajax Delete es el siguiente:
function doAjaxDelete(){
//1.创建XHR对象
let xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
let div=document.getElementById("result");
div.innerHTML=xhr.responseText;
}
}
}
//3.建立连接
//let params="b";
let params="102";
xhr.open("delete",`http://localhost/doAjaxDelete/${params}`,true);
//4.发送请求
xhr.send(null);
}
Método de solicitud Ajax Put, el código clave es el siguiente:
function doAjaxPut(){
//1.创建XHR对象
let xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
let div=document.getElementById("result");
div.innerHTML=xhr.responseText;
}
}
}
//3.建立连接
let params="id=101&city=tianjin"
xhr.open("put",`http://localhost/doAjaxPut`,true);
//put请求必须要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);//put请求可以将参数放到send方法内部
}
Inicie el servicio y realice una prueba de acceso.
Implementación avanzada de la tecnología Ajax (paquete común)
Encapsulación de código de plantilla común
En el proceso de programación real, generalmente encapsulamos los puntos en común del código y extraemos las características del código. Luego, para mejorar la reutilización del código. Por ejemplo, cree un directorio js en el directorio estático y agregue el archivo ajax.js. La clave el código es el siguiente:
Creación de objeto xhr
function createXHR(callback){
//1.create XHR object
let xhr=new XMLHttpRequest();
//2.set onreadystatechange
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
callback(xhr.responseText);
}
}
}
return xhr;
}
Obtener solicitud
function ajaxGet(url,params,callback){//封装ajax get 请求模板代码
//1.create xhr and set onreadystate change
let xhr=createXHR(callback);
//2.open connection
xhr.open("GET",`${url}/${params}`,true);
//3.send request
xhr.send();
}
Solicitud de publicación
function ajaxPost(url,params,callback){//封装ajax get 请求模板代码
//1.create xhr and set onreadystate change
let xhr=createXHR(callback);
//2.open connection
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.send request
xhr.send(params);
}
publicar solicitud, pasar datos json
function ajaxPostJSON(url,params,callback){
//1.create xhr and set onreadystate change
let xhr=createXHR(callback);
//2.open connection
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/json");
//3.send request
xhr.send(JSON.stringify(params));//将json对象转换为json格式字符串提交到服务端
}
Poner solicitud
function ajaxPut(url,params,callback){//封装ajax get 请求模板代码
//1.create xhr and set onreadystate change
let xhr=createXHR(callback);
//2.open connection
xhr.open("put",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.send request
xhr.send(params);
}
borrar petición
function ajaxDelete(url,params,callback){//封装ajax get 请求模板代码
//1.create xhr and set onreadystate change
let xhr=createXHR(callback);
//2.open connection
xhr.open("delete",`${url}/${params}`,true);
//3.send request
xhr.send();
}
Cree la página ajax-03.html, llame a las funciones anteriores en la página para acceder a la prueba, el código clave es el siguiente:
<div>
<h1>The Ajax 03 Page</h1>
<button onclick="doAjaxGet()">Do Ajax Get</button>
<button onclick="doAjaxPost()">Do Ajax Post</button>
<button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
<button onclick="doAjaxDelete()">Do Ajax Delete</button>
<button onclick="doAjaxPut()">Do Ajax Put</button>
</div>
<div id="result"></div>
<script src="/js/ajax.js"></script>
<script>
//ajax delete request
function doAjaxDelete(){
const url="/doAjaxDelete";
const params="101";
ajaxDelete(url,params,function(result){
alert(result);
})
}
//ajax post put
function doAjaxPut(){
const url="/doAjaxPut";
const params="id=100&city=shenzhen";
ajaxPut(url,params,function(result){
alert(result);
})
}
//ajax post request
function doAjaxPostJson(){
const url="/doAjaxPostJSON";
const params={id:"103",city:"xiongan"};//服务端需要@RequestBody
ajaxPostJSON(url,params,function(result){
alert(result);
})
}
//ajax post request
function doAjaxPost(){
const url="/doAjaxPost";
const params="id=102&city=shenzhen";
ajaxPost(url,params,function(result){
alert(result);
})
}
//ajax get request
function doAjaxGet(){
const url="/doAjaxGet";
const params="";
ajaxGet(url,params,function(result){
document.querySelector("#result").innerHTML=result;
})
}
</script>
Implementación simple del marco de programación Ajax (entender)
A menudo lo implementamos de una manera orientada a objetos en la programación js real, como la función ajaxGet, ¿cómo llamarlo de una manera de objeto? El análisis del código clave es el siguiente: (La comprensión del siguiente código requiere un conocimiento básico de la orientación a objetos en JS, si no está familiarizado con él, puede omitirlo temporalmente)
(function(){
//定义一个函数，可以将其连接为java中的类
var ajax=function(){}
//在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数
ajax.prototype={
ajaxGet:function(url,params,callback){
//创建XMLHttpRequest对象，基于此对象发送请求
var xhr=new XMLHttpRequest();
//设置状态监听(监听客户端与服务端通讯的状态)
xhr.onreadystatechange=function(){//回调函数，事件处理函数
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
callback(xhr.responseText);//jsonStr
}
};
//建立连接(请求方式为Get,请求url,异步还是同步-true表示异步)
xhr.open("GET",url+"?"+params,true);
//发送请求
xhr.send(null);//GET请求send方法不写内容
},
ajaxPost:function(url,params,callback){
//创建XMLHttpRequest对象，基于此对象发送请求
var xhr=new XMLHttpRequest();
//设置状态监听(监听客户端与服务端通讯的状态)
xhr.onreadystatechange=function(){//回调函数，事件处理函数
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
callback(xhr.responseText);//jsonStr
}
};
//建立连接(请求方式为POST,请求url,异步还是同步-true表示异步)
xhr.open("POST",url,true);
//post请求传参时必须设置此请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send(params);//post请求send方法中传递参数
}
}
window.Ajax=new ajax();//构建ajax对象并赋值给变量全局变量Ajax
})()
En este momento, cuando el mundo exterior llama a las funciones doAjaxGet y doAjaxPost, se puede implementar directamente a través del objeto Ajax.
Aplicación de la tecnología Ajax en JQuery Framework
Introducción
jQuery es un marco de biblioteca de JavaScript rápido y conciso y una excelente biblioteca de código JavaScript (o marco de JavaScript). El propósito del diseño de jQuery es "escribir menos, hacer más", es decir, abogar por escribir menos código y hacer más cosas. Encapsula los códigos de función de JavaScript de uso común, proporciona un modo de diseño de JavaScript simple, optimiza la operación de documentos HTML, el manejo de eventos, el diseño de animación y la interacción Ajax.
Análisis de funciones ajax de uso común
La api ajax basada en estándares en jQuery proporciona una gran cantidad de aplicaciones de funciones Ajax. Basándose en estas funciones, se puede escribir una pequeña cantidad de código para implementar rápidamente operaciones Ajax. Las funciones más utilizadas son:
- ajax (…)
- obtener(…)
- getJSON (…)
- correo(…)
- ...
Nota: Para conocer la sintaxis de las funciones relacionadas con ajax en jquery, consulte el sitio web oficial (jquery.com).
Práctica de aplicación de la función ajax en Jquery
Descripción del negocio
Cree una página html, como jquery-ajax-01.html, y demuestre la aplicación básica de funciones ajax relacionadas en jquery a través de algunos eventos de botón, como se muestra en la figura:
[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-BerbiC9s-1611209329048) (D: \ TCGBIII \ DEVDOCS \ Day10 \ ajax.assets \ image-20210105183916162.png)]
Análisis de la implementación del código html clave del cliente
<div>
<h1>The Jquery Ajax 01 Page</h1>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doGet()">$.get(...)</button>
<button onclick="doPost()">$.post(...)</button>
<button onclick="doLoad()">$(...).load("...")</button>
</div>
<div id="result"></div>
Análisis de la realización de códigos clave JS code del cliente
<script src="/js/jquery.min.js"></script>
<script>
function doLoad(){
let requestUrl="/doAjaxGet";
//load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
$("#result").load(requestUrl,function(){//可选
console.log("==load complete==");//加载完成以后执行
});
}
function doPost(){
let requestUrl="/doAjaxPost";
let params="id=104&city=shijiazhuang";
$.post(requestUrl,params,function(result){
alert(result);
})
}
function doGet(){
let requestUrl="/doAjaxGet";
let params="";
$.get(requestUrl,params,function(result){
$("#result").html(result);
},"text");//默认为json
}
function doAjax(){
let requestUrl="/doAjaxGet";
let params="";
//$符号在这里代表jquery对象
//ajax({})为jquery种的一个ajax函数,底层封装了ajax请求过程
$.ajax({
url:requestUrl,//key必须为url
data:params,
//type:"GET",//可以省略,默认为Get请求
dataType:"text",//服务端响应到客户端的数据格式,默认为json
//async:true,//默认异步
//contentType:"application/json",//假如需要向服务端传递json串
success:function(result){//callback 回调函数
console.log("result",result);
//JS原生写法
//document.querySelector("#result").innerHTML=result;
//Jquery种的封装简化写法
$("#result").html(result);
}
});
//假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
}
</script>