{"id":7772,"date":"2022-07-27T06:44:44","date_gmt":"2022-07-27T06:44:44","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7772"},"modified":"2022-07-27T06:44:44","modified_gmt":"2022-07-27T06:44:44","slug":"como-hacer-una-llamada-ajax-con-xmlhttprequest","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-hacer-una-llamada-ajax-con-xmlhttprequest\/","title":{"rendered":"Como hacer una llamada Ajax con XMLHttpRequest"},"content":{"rendered":"

Las llamadas Ajax ayudan mucho al programador a hacer sus aplicaciones mucho m\u00e1s usables y r\u00e1pidas ya que el usuario no tiene que recargar la p\u00e1gina cuando desea solicitar una petici\u00f3n al servidor.<\/p>\n

En este art\u00edculo vas a descubrir como hacer una llamada Ajax sin usar jQuery<\/strong>.<\/p>\n

XMLHttpRequest<\/strong>\u00a0es un objeto nativo del navegador que permite hacer solicitudes HTTP desde\u00a0JavaScript<\/strong>.<\/p>\n

En el ejemplo en funcionamiento vas a ver un formulario simple que solo pide el nombre y apellido al usuario para enviar la informaci\u00f3n al servidor usando esta t\u00e9cnica.<\/p>\n

Formulario simple<\/h2>\n

En el cuerpo de tu p\u00e1gina o dentro de la etiqueta <body> puedes agregar el formulario:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"alert"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n<form<\/span><\/a> name<\/span>=<\/span>"register"<\/span> method<\/span>=<\/span>"post"<\/span>><\/span>\n    <input<\/span><\/a> type<\/span>=<\/span>"text"<\/span> name<\/span>=<\/span>"name"<\/span> value<\/span>=<\/span>"Jose"<\/span>><\/span>\n    <input<\/span><\/a> type<\/span>=<\/span>"text"<\/span> name<\/span>=<\/span>"lastname"<\/span> value<\/span>=<\/span>"Aguilar"<\/span>><\/span>\n    <button<\/span><\/a> type<\/span>=<\/span>"submit"<\/span> name<\/span>=<\/span>"submitRegister"<\/span>><\/span>Enviar<\/<\/span>button<\/span><\/a>><\/span>\n<\/<\/span>form<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Es importante fijarse que el formulario tiene un nombre igual a \u00abregister\u00bb y que contiene 2 campos de tipo texto y un bot\u00f3n.<\/p>\n
Por encima del formulario tambi\u00e9n he colocado un contenedor para depositar la respuesta que retorne el servidor.<\/p>\n
LLamada Ajax con XMLHttpRequest<\/strong><\/h2>\n
En el archivo .js que use tu proyecto puedes agregar lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
const<\/span> malert =<\/span> document.querySelector<\/span>(<\/span>'.alert'<\/span>)<\/span>;<\/span>\nconst<\/span> registrationButton =<\/span> document.querySelector<\/span>(<\/span>'button[name="submitRegister"]'<\/span>)<\/span>;<\/span>\n \nregistrationButton.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>e)<\/span> {<\/span>\n    e.preventDefault<\/span>(<\/span>)<\/span>;<\/span>\n    let params =<\/span> new<\/span> FormData(<\/span>document.forms<\/span>.register<\/span>)<\/span>;<\/span>\n    let request =<\/span> new<\/span> XMLHttpRequest(<\/span>)<\/span>;<\/span>\n    request.open<\/span>(<\/span>"POST"<\/span>,<\/span> "ajax.php"<\/span>)<\/span>;<\/span>\n    request.send<\/span>(<\/span>params)<\/span>;<\/span>\n    request.onload<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n        malert.style<\/span>.display<\/span> =<\/span> 'none'<\/span>;<\/span>\n        malert.innerHTML<\/span> =<\/span> ''<\/span>;<\/span>\n        malert.style<\/span>.display<\/span> =<\/span> 'block'<\/span>;<\/span>\n        malert.innerHTML<\/span> =<\/span> request.response<\/span>;<\/span>\n    }<\/span>;<\/span> \n}<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
En primer lugar, creo 2 constantes que se usan en la llamada al evento en las que guardo:<\/p>\n