Para realizar un ejemplo de aquello que deseas he creado una funcion reutilizable llamada ajax
que te permitira hacer en cualquier momento peticiones ajax
, por la cual usamos el metodo GET
para enviar los datos al archivo enviarDatos.php
, he aqui el codigo ejemplo de una peticion GET
en ajax
, (aunque igual podria usarse para hacer peticiones POST
):
window.onload = ()=>{
//Ruta principal general de los archivos.
const SERVER_URL = "http://localhost";
//Contendra los parametros URL para hacer la peticion GET.
let urlData = "";
//Modificada para obtener solo los parametros URL y no una URL completa.
//Es importante notar que pasamos un parametro adicional (un timestamp)
//Esto es con el fin de evitar la cache, la cual podria ser algo molesta
//Si estamos haciendo una peticion GET.
function convertirDatos(nombre, valor) {
return `nombre=${nombre}&valor=${valor}&tmstmp=${Date.now()}`;
}
function ajax(postMethod, url, dataToAppend){
//Una promesa es un objeto que devuelve datos o errores en el tiempo.
return new Promise((res, rej) =>{
/*
Creamos nuestra peticion ajax y ademas creamos la data que en un
inicio sera un FormData, (se usa en caso de que la peticion sea
tipo POST).
*/
const xhttp = new XMLHttpRequest();
let data = new FormData();
//Si la peticion es POST, añadimos la data al FormData.
if(postMethod.toUpperCase() === "POST"){
for(let prop in data){
data.append(prop, data);
}
}else{
/*
Si la peticion es GET recreamos la URL completa pero con parametros
de la URL dinamicos.
*/
data = `${url}?${dataToAppend}`;
}
/*
Cuando la peticion cargue resolvemos la promise y entregamos la informacion
que nos devolvio el servidor como un json, para luego poder ser usada en JS,
en caso de error rechazamos la promesa con el error como valor devuelto.
*/
xhttp.onload = () => res(JSON.parse(xhttp.response));
xhttp.onerror = e => rej(e);
/*
Abrimos la peticion hacia el archivo (enviarDatos.php), en caso de que
la peticion sea POST, la URL sera igual al parametro url, de lo contrario
la URL será la data encolada con los parametros que habiamos obtenido.
*/
xhttp.open(postMethod, postMethod.toUpperCase() === "POST" ? url : data, true);
/*
En caso de ser una peticion GET debemos añadirle a ajax un header llamado
Content-Type, con su valor application/x-www-form-urlencoded, de lo contrario
podria haber errores a la hora de hacer la peticion GET, luego simplemente
enviamos la peticion.
*/
if(postMethod.toUpperCase() === "GET"){
xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttp.send();
}else{
//En caso de ser una peticion POST enviamos el FormData.
xhttp.send(data);
}
});
}
//Obtenemos la informacion de los parametros en una URL.
urlData = convertirDatos("Juan", 16);
//then y catch hacen parte de promise, usamos nuestra funcion ajax
//Para enviar datos hacia enviarDatos.php y luego cuando todo haya
//sucedido con exito entramos al then, donde habra la data traida por
//el servidor, en caso de error, entramos al catch y mostramos el error.
ajax("GET", `${SERVER_URL}/enviarDatos.php`, urlData).then(res =>{
console.log(res);
}).catch(e =>{
console.error(e);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax example</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
Y en la parte de PHP (enviarDatos.php
) tendriamos lo siguiente:
<?php
/*
Cabeceras adicionales para evitar problemas de origines cruzados,
para declarar el tipo de dato que será devuelto hacia el cliente (json)
y tambien para declarar el encoding de la respuesta.
*/
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=utf-8");
//Obtenemos nuestros valores
$nombre = $_GET["nombre"];
$valor = $_GET["valor"];
//Devolvemos la respuesta hacia el cliente como un json.
//Los parametros devueltos pueden ser lo que deseemos.
echo json_encode(["status" => "OK!"]);
?>
La explicacion del codigo esta en el mismo codigo, por supuesto aquí en stackoverflow esto no funcionara si lo ejecutas, pero podrás probarlo tu mismo en el ordenador.