ajax

Enviar archivo de JavaScript a Golang

Subir archivo de JavaScript a Go (Golang)

En este post de programación cliente-servidor vamos a ver cómo enviar un archivo desde JavaScript del lado del cliente a Golang (Go) del lado del servidor.

Específicamente hablando veremos cómo enviar un archivo usando fetch y FormData a través de AJAX hacia un servidor de Go.

Lo que te enseñaré servirá para enviar fotos, archivos binarios o incluso una foto tomada con la cámara web con las debidos ajustes.

Va a ser un ejemplo realmente simple pero que luego podrás modificar para, por ejemplo, usarlo en React, Angular, JavaScript puro o Vue.

(más…)

Por parzibyte, hace
CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con PHP, MySQL y AJAX

En este post te mostraré un ejemplo completo de CRUD que hace las operaciones fundamentales de la base de datos usando MySQL y PHP, pero además las llamadas se hacen con AJAX desde JavaScript.

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con MySQL, PHP, JavaScript y AJAX

Al final te dejaré el código completo que podrás descargar, probar y modificar, mismo que tendrá todas las operaciones para enviar y recibir datos desde JavaScript a un servidor PHP que se conecta a MySQL.

Básicamente todo se hará del lado del cliente, no vamos a procesar formularios con PHP, solo llamadas AJAX con JSON. Así que tendremos un CRUD con PHP y AJAX.

No vamos a usar ninguna librería como React, Vue o Angular; será JavaScript puro.

(más…)

Por parzibyte, hace
AJAX, PHP y Chart.js para crear gráficas en la web

Gráficas con chart.js, AJAX y PHP

En este post sobre la creación de gráficas (de línea, barras, pastel, etcétera) usando la librería Chart.js te enseñaré cómo crear una gráfica con datos traídos con AJAX.

AJAX, PHP y Chart.js para crear gráficas en la web

AJAX, PHP y Chart.js para crear gráficas en la web

El lado del servidor estará escrito en PHP aunque estos datos pueden ser traídos desde cualquier API o endpoint. Así que básicamente lo que haremos es:

  1. En nuestro servidor mostrar los datos de la gráfica como JSON.
  2. Dentro del lado del cliente hacer una llamada AJAX al servidor y esperar la respuesta.
  3. Finalmente igualmente dentro del cliente crear la gráfica con Chart.js con los datos traídos con AJAX.

Esto que te muestro es un ejemplo, pero antes de leerlo te recomendaría ver el tutorial de Chart.js para ver más opciones de gráficas y entender los conceptos.

(más…)

Por parzibyte, hace

Sistema acortador de enlaces con PHP similar a bitly

Hoy vengo a presentar un sistema que recién he terminado de programar. Se trata de un software open source escrito en PHP con MySQL y Bootstrap, mismo que es un acortador de enlaces similar a los acortadores como bit.ly.

En este caso este programa se encarga de acortar enlaces, redireccionar a los usuarios y registrar cuando se hace clic. Aunque su funcionamiento está inspirado en los acortadores de enlaces, no tiene todas las funciones idénticas.

Este software gratuito que he creado con PHP tiene las siguientes características:

  1. Login y gestión de usuarios
  2. Creación de enlaces
    1. Enlaces sin redireccionamiento instantáneo: en este caso, antes de redireccionar al usuario, se presenta una plantilla en donde se puede poner publicidad, avisos, redes sociales etcétera.
    2. Links con redireccionamiento instantáneo: simplemente redireccionan al usuario de manera transparente, registrando el clic o visita.
  3. Reporte general de clics en rango de fecha, con gráfica y descripción de los enlaces más populares

Como siempre te digo, este software se puede personalizar, tomar como base, etcétera. Por cierto, hace un tiempo hice un software parecido pero ese acorta enlaces para ganar dinero, usando a su vez acortadores como ouo, adfly, etcétera.

(más…)

Por parzibyte, hace

PHP: tomar foto con cámara y guardar en MySQL

En este post te mostraré cómo tomar una foto con la cámara web usando JavaScript; para más tarde enviarla a PHP y guardarla en una base de datos.

Recuerda que ya anteriormente vimos cómo hacer lo mismo pero guardando la foto en el disco duro, esto no es más que una modificación a lo que aparece en ese post.

Recomiendo encarecidamente que leas el post que menciono, pues aquí solo cambia la parte del guardado de la foto.

(más…)

Por parzibyte, hace
Cargar JSON desde PHP usando jQuery y AJAX

AJAX, PHP y jQuery: carga de datos

AJAX, PHP y jQuery si bien no están ligados, se relacionan para crear aplicaciones web dinámicas usando tecnologías libres.

En este post te mostraré cómo usar la librería jQuery para traer datos HTML y JSON desde PHP, todo eso sin refrescar la página.

Para ello haremos una petición HTTP GET usando el método $.get de jQuery; de este modo vamos a poder usar la técnica de AJAX usando jQuery y PHP.

(más…)

Por parzibyte, hace
Formulario enviado a PHP usando Ajax, diseño Bootstrap 4

Enviar formulario con AJAX y PHP

Enviar datos a PHP usando AJAX

En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX.

Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita.

(más…)

Por parzibyte, hace

¿Qué es JSONP? definición, diferencia, ejemplos y usos

En este post te voy a explicar qué es JSONP, para qué usarlo, cuál es la diferencia entre JSONP y JSON, algunos ejemplos y por qué fue creado.

Recuerda que JSONP está ligado a JavaScript del lado del cliente, y que la programación del lado del servidor puede ser con cualquier lenguaje, pero del lado del servidor se maneja de igual manera; justo como las peticiones AJAX.

(más…)

Por parzibyte, hace

Fetch API en JavaScript: peticiones HTTP con promesas

JavaScript es un lenguaje que evoluciona en todos los sentidos.

Hace tiempo se utilizaba XMLHttpRequest para hacer peticiones AJAX en JavaScript del lado del cliente. Tiempo después aparecieron librerías como jQuery que traían una función para hacer más fáciles las peticiones, con $.ajax.

Más tarde salieron librerías como axios, o algunas otras que vienen incorporadas en frameworks.

Recientemente (bueno, hace ya algunos años, pero es más nueva que XMLHttpRequest) ha aparecido la función global fetch en JavaScript que trabaja con promesas y permite hacer peticiones HTTP de todo tipo de una manera fácil y rápida.

En este post voy a mostrar una guía de cómo trabajar con fetch en JavaScript para hacer peticiones GET, POST (con datos en el cuerpo), PUT y DELETE, además de solicitar HTML o JSON.

También veremos cómo enviar un formulario con fetch. Recuerda que ya vimos cómo subir un archivo usando fetch.

(más…)

Por parzibyte, hace