Muchos de los programadores web que van comenzando tienen problemas con entender el concepto de lenguajes de programacion del lado del cliente y lenguajes del lado del servidor, esto ocasiona que se frustren al intentar realizar una comunicacion javascript php de informacion y viceversa. Hoy te explico sobre el concepto de cliente y servidor además de explicarte como puedes pasar informacion entre un lenguaje y otro.

Seguramente te has encontrado en la situacion en que necesitas pasar informacion que introduce el cliente (lenguaje del lado del cliente como javascript) al servidor (lenguaje del lado del servidor como php) para ser procesada y obtener una respuesta.

Hoy vamos a tocar el concepto de cliente – servidor y los lenguajes de programacion para cada lado, al final del articulo podrás ser capaz de:

Identificar que es un lenguaje del lado del cliente
Identificar que es un lenguaje del lado del servidor
Como funcionan las peticiones http
Como puedes realizar la comunicacion javascript php y viceversa

La comunicacion javascript php la realizaremos con php obviamente y la parte de javascript con su librería jQuery, la misma con la que puedes validar formularios en tu pagina, crear popups fácilmente o incluso realizar un completo sistema de ventanas al estilo windows.

Lenguajes del lado del cliente vs lenguajes del lado del servidor

En el mundo del desarrollo web siempre tenemos 2 jugadores: el cliente y el servidor.

El servidor se encarga de, como su nombre lo indica, servir contenido a todos los clientes que lo soliciten.

El cliente se encarga de realizar las peticiones al servidor para obtener un contenido mediante un navegador web.

Hasta aqui fácil, ¿no?

Aun así te dejo un ejemplo del proceso de una petición a un servidor.

Un usuario abre su navegador (cliente) y escribe en la barra de direcciones https://jonathanmelgoza.com/blog/.
Presiona enter y el navegador envia una peticion al servidor donde esta la pagina https://jonathanmelgoza.com.
El servidor se encuentra escuchando por peticiones por parte de los clientes.
El servidor envia la pagina que el cliente solicita, ademas de informacion meta llamada headers.
El cliente renderiza la informacion de la pagina para que el usuario la disfrute.

Ahora, ¿Que son los lenguajes del lado del cliente y del lado del servidor?

Pues fácil! Los lenguajes del lado del servidor son los que se ejecutan en el servidor y los lenguajes del lado del cliente son los que se ejecutan en el navegador.

Algunos lenguajes del lado del servidor son php, asp, python, c#, c++, vb, etc.

Algunos lenguajes del lado del cliente son html, css, javascript (o sus librerias como jQuery).

Pero, ¿Es posible pasar informacion de un lado a otro?

El problema de la comunicacion javascript php

Son frecuentes las busquedas en internet o las veces que me preguntan lo mismo: ¿como pasar este arreglo de javascript a php? ¿Como meto codigo php dentro del javascript? y muchas más.

Ya que conocemos este funcionamiento básico entonces podemos abordar mas claramente el problema que representa para los programadores web que van comenzando e intentan comunicar codigo de javascript con codigo de php como si todo se ejecutara en el mismo lado.

La realidad es que es posible hacerlo, de hecho es algo que se necesita hacer constantemente en cualquier proyecto web.

Lo que se tiene que hacer es separa el codigo php y realizar peticiones de ese codigo dentro de javascript (o jquery), mandarle la información a ese otro archivo php (que se ejecutara del lado del servidor) y obtener una respuesta para ser utilizada en tiempo real en nuestro codigo javascript ( lado del cliente).

Todo esto lo haremos:

Separando el codigo php en otro documento.
Realizando peticiones desde javascript a estos documentos php.

Como dijimos antes, lo haremos mediante la librería de javascript jQuery.

jQuery nos permite realizar peticiones http a cualquier pagina, mandarle informacion y esperar por la respuesta.

Estas peticiones pueden ser POST o GET, sino sabes la que son o la diferencia entre ambas entonces te dejo un articulo que habla sobre POST vs GET.

Ejemplo de comunicacion javascript php y viceversa

Antes que nada comentarte que en este ejemplo utilizaremos el metodo post de jQuery.

Veamos un ejemplo simple en el que deseamos enviar un mail cada que ocurra un error en nuestro sistema.

Necesitamos realizar una tarea en tiempo real que involucra utilizar codigo php para enviar un mail, esto es tarea del servidor.

$.post("debug/sendError.php",{
	msj:msj_error
}).done(function(data){
        if(data.equals("OK"))
	   swal({
	     html: 'Un email de soporte se ha enviado a EasyCodigo.',
	     type: 'warning',
	   });
        }
});

Tenemos nuestra variable msj_error en javascript la cual contiene informacion del error a enviar por email, la funcionalidad php del lado del servidor se encuentra separada en el archivo debug/sendError.php, y una vez realizada la peticion se obtiene la respuesta de dicho codigo php para saber si se ha enviado el mail o no.

Mientras el codigo php que tenemos separado es un simple codigo php que envia un mail e inprime un «OK» si todo va bien.

<?php
$msj = $_POST["msj"];

$to = "jonathan@correo.com";
$subject = "Error detectado en sistema";
$txt = $msj;
$headers = "From: soporte@correo.com" . "\r\n" . "CC: otrocorreo@correo.com";

if(mail($to,$subject,$txt,$headers)){
 echo "OK";
}
?>

De esta forma logramos procesar informacion que ocurre en tiempo real con el usuario de nuestro sistema que requiere procesarse en codigo php del lado del servidor como lo es enviar un mail, asi como obtener informacion de vuelta, en este caso un simple «OK» pero puede ser cualquier tipo de informacion, incluso un arreglo.

Para mandar arreglos javascript a php y allá convertirlos a arreglos php simplemente debemos tomar en cuenta las siguientes funciones y hacer uso de JSON: