Construyendo el objeto XMLHttpRequest y enviando la solicitud

Ejemplo con método GET

// Definimos la URL que vamos a solicitar via Ajax var ajax_url = "http://mysite.com/json/data.json"; // Definimos los parámetros que vamos a enviar var params = "parametro=valor&otro_parametro=otro_valor"; // Añadimos los parámetros a la URL ajax_url += '?' + params; // Creamos un nuevo objeto encargado de la comunicación var ajax_request = new XMLHttpRequest(); // Definimos como queremos realizar la comunicación ajax_request.open( "GET", ajax_url, true ); //Enviamos la solicitud ajax_request.send();

• método: el método HTTP a utilizar en la solicitud Ajax. GET o POST, en el ejemplo anterior fue GET.
• url: dirección URL que se va a solicitar, o lo que es lo mismo, la URL a la que se va enviar la solicitud.
• async: true (asíncrono) o false (síncrono). Es opcional y el valor por defecto es true. Hay quien recomienda ponerlo siempre por si no se respeta el valor por defecto.

Ejemplo con método POST

// Definimos la URL que vamos a solicitar via Ajax var ajax_url = "http://mysite.com/json/data.json"; // Definimos los parámetros que vamos a enviar var params = "parametro=valor&otro_parametro=otro_valor"; // Creamos un nuevo objeto encargado de la comunicación var ajax_request = new XMLHttpRequest(); // Definimos como queremos realizar la comunicación ajax_request.open( "POST", ajax_url, true ); // Ponemos las cabeceras de la solicitud como si fuera un formulario, necesario si se utiliza POST ajax_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //Enviamos la solicitud junto con los parámetros ajax_request.send( params );

Enviar una solicitud POST con JSON

// El JSON a enviar var myjson = '{ "key" : "value", "key1" : "value1", "key2" : "value2" }' var ajax_request = new XMLHttpRequest(); ajax_request.open( "POST", ajax_url, true ); // Establecer la cabecera Content-Type apropiada ajax_request.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); // Enviar la solicitud ajax_request.send( myjson );

/// Obtenemos el json enviado $data = file_get_contents('php://input'); // Los convertimos en un array $data = json_decode( $data, true );

Recepción de la respuesta

// Definimos la URL que vamos a solicitar via Ajax var ajax_url = "http://mysite.com/json/data.json"; // Definirmos los parámetros que vamos a enviar var params = "parametro=valor&otro_parametro=otro_valor"; // Añadimos los parámetros a la URL ajax_url += '?' + params; // Creamos un nuevo objeto encargado de la comunicación var ajax_request = new XMLHttpRequest(); // Definimos una función a ejecutar cuándo la solicitud Ajax tiene alguna información ajax_request.onreadystatechange = function() { // readyState es 4 if (ajax_request.readyState == 4 ) { // Analizaos el responseText que contendrá el JSON enviado desde el servidor var jsonObj = JSON.parse( ajax_request.responseText ); // La variable jsonObj ahora contiene un objeto con los datos recibidos } } // Definimos como queremos realizar la comunicación ajax_request.open( "GET", ajax_url, true ); //Enviamos la solicitud ajax_request.send();

Trabajando con el formato JSON en jаvascript

{key : value, key2 : value2, key3 : value3, ...}

console.log( misDatos.nombre ); console.log( misDatos.apellidos ); console.log( misDatos.edad );

{ key : value, key2 : { subkey : subvalue, subkey2 : subvalue2 } }

// La variable misDatos contiene un objeto jаvascript var misDatos = { "nombre" : "Alex", "apellidos" : "Agustin e...", "edad" : 35, "direccion" : { "calle" : "Gran Via, 3", "ciudad" : "Lanzarote" } }; console.log( misDatos.nombre ); console.log( misDatos.apellidos ); console.log( misDatos.edad ); console.log( misDatos.direccion.calle ); console.log( misDatos.direccion.ciudad );

JSON.parse

// La variable misDatos es un string en notación JSON, pero no un objeto var misDatos = '{ "nombre" : "Antonio", "apellidos" : "Molina Ballesteros", "edad" : 35, "direccion" : { "calle" : "Gran Via, 2", "ciudad" : "Madrid"} }'; // Se pasa el string a un objeto JSON var jsonObj = JSON.parse( misDatos ); // Ahora, la variable jsonObj contiene el valor de cada key accesible en la forma jsonObj.key console.log( jsonObj.nombre ); console.log( jsonObj.apellidos ); console.log( jsonObj.edad ); console.log( jsonObj.direccion.calle ); console.log( jsonObj.direccion.ciudad );

Ejemplo AJAX e interacción con PHP

<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="UTF-8"> <script> //getdeails será nuestra función para enviar la solicitud ajax var getdetails = function( id ){ // Definimos la URL que vamos a solicitar via Ajax var ajax_url = "personas.php"; // Definimos los parámetros que vamos a enviar // Debería trabajar en hacer esto un poco más limpio, de momento vale para hacer funcionar el ejemplo var params = ''; id = JSON.parse(id).toString(); id = id.split(","); if( id.length > 1 ) { //Si hay más de un id, enviar como query string array for( elem in id ) { params += "id[]=" + id[elem] +"&"; } } else { params = "id=" + id; } //Añadimos los parámetros a la URL ajax_url += '?' + params; // Creamos un nuevo objeto encargado de la comunicación var ajax_request = new XMLHttpRequest(); // Definimos una función a ejecutar cuándo la solicitud Ajax tiene alguna información ajax_request.onreadystatechange = function() { // see readyState es 4, proseguir if (ajax_request.readyState == 4 ) { // Analizaos el responseText que contendrá el JSON enviado desde el servidor var response = JSON.parse( ajax_request.responseText ); if( response.success ) { var output = "<h1>" + response.data.message + "</h1>"; //recorremos cada usuario for ( user in response.data.users ) { output += "<h2>Detalles del usuario " + response.data.users[user].ID + "</h2>"; //recorremos los valores de cada usuario for ( userdata in response.data.users[user] ) { output += '<ul>'; output += '<li>' + userdata + ': ' + response.data.users[user][userdata] + "</li>"; output += '</ul>'; } } //Actualizamos el HTML del elemento con id="#response-container" document.getElementById("response-container").innerHTML = output; } else { //response.success no es true document.getElementById("response-container").innerHTML = 'No ha habido suerte: ' + response.data.message; } } } // Definimos como queremos realizar la comunicación ajax_request.open( "GET", ajax_url, true ); //Enviamos la solictud con los parámetros que habíamos definido ajax_request.send(); }; // Esperar a onload para poder acceder a los elementos del DOM window.onload = function() { // Obtener todos los botones que utilizamos para lanzar la solicitud Ajax var userbutton = document.getElementsByTagName( "button" ); for (var i=0; i < userbutton.length; i++) { // Para boton seleccionado, cuándo se haga click llamar a la funcion gedetails donde manjamos la solicitud ajax userbutton[i].onclick = function() { document.getElementById("response-container").innerHTML = "<p>Buscando...</p>"; // Obtener el valor de data-user, pasar a array si se necesita y ejecutar la funcion getdetails() var id = this.getAttribute('data-user'); getdetails( id ); } } }; </script> </head> <body> <p><button class="userdata" data-user="1">Dame los datos de la persona con ID = 1</button> - <button class="userdata" data-user='["1","2","3"]'>Dame los datos de las personas con ID = 1, ID = 2 e ID = 3.</button> - <button class="userdata" data-user="0">Ningún usuario</button></p> <div id="response-container"></div> </body> </html>

Referencias

1. Objetos globales: JSON. Mozilla Developers Network.
2. jаvascript Objets. w3schools.
3. Web API Reference: XMLHttpRequest. Mozilla Developers Network.

¿Qué es Ajax y que es JSON?

{key : value, key2 : value2, key3 : value3,...}

[{key : value, key2 : value2, key3 : value3, key : { key : value, key2 : value2, key3 : value3} },{key : value, key2 : value2, key3 : value3,...}]

JSON en PHP

<?php $jsondata = array(); if( isset($_GET['param']) ) { if( $_GET['param'] == 'valor' ) { $jsondata['success'] = true; $jsondata['message'] = 'Hola! El valor recibido es correcto.'; } else { $jsondata['success'] = false; $jsondata['message'] = 'Hola! El valor recibido no es correcto.'; } //Aunque el content-type no sea un problema en la mayoría de casos, es recomendable especificarlo header('Content-type: application/json; charset=utf-8'); echo json_encode($jsondata); exit(); }

Ajax con JSON y jQuery

$.ajax({ // En data puedes utilizar un objeto JSON, un array o un query string dаta: {"parametro1" : "valor1", "parametro2" : "valor2"}, //Cambiar a type: POST si necesario type: "GET", // Formato de datos que se espera en la respuesta dataType: "json", // URL a la que se enviará la solicitud Ajax url: "script.php", }) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "La solicitud a fallado: " + textStatus); } });

$.getJSON( "script.php", { "parametro1" : "valor1", "parametro2" : "valor2" } ) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "Algo ha fallado: " + textStatus" ); } });

$.ajax({ dаta: {"parametro1" : "valor1", "parametro2" : "valor2"}, type: "POST", dataType: "json", url: "script.php", }) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "La solicitud a fallado: " + textStatus); } }); //Equivalente a lo anterior $.post( "script.php", { "parametro1" : "valor1", "parametro2" : "valor2" }, null, "json" ) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "La solicitud a fallado: " + textStatus); } });

{"success" : true, "message" : "Hola! El valor recibido es correcto."}

.done( function(data) { data.success; data.message; });

Ejemplo paso a paso

Base de datos

CREATE TABLE IF NOT EXISTS `cyb_users` ( `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL DEFAULT '', `email` varchar(100) NOT NULL DEFAULT '', `url` varchar(100) NOT NULL DEFAULT '', PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3;

INSERT INTO `cyb_users` (`ID`, `username`, `email`, `url`) VALUES (1, 'Paco', 'thisismy@email.com', 'http://miblog.name'), (2, 'Juan', 'elcorreode@juan.com', 'http://www.misitio.com'), (3, 'Ana', 'escribrea@ana.com', 'http://tusitio.com');

{ "success" : true|false, "data" : { "message" : "", "users" : [{ "ID" : "", "username" : "", "email" : "", "url" : "" }, {...} ] } }

El HTML

<!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <script src="//code.jquery.com/jquery-latest.js"></script> <script src="miscript.js"></script> </head> <body> <div><button data-user="1">Dame los datos de la persona con ID = 1</button> - <button data-user="[1,2,3]">Dame los datos de las personas con ID = 1, ID = 2 e ID = 3.</button> - <button data-user="0">Ningún usuario</button></div> <div id="response-container"></div> </body> </html>

jQuery: miscript.js

$(document).ready(function() { // getdeails será nuestra función para enviar la solicitud ajax var getdetails = function(id) { return $.getJSON("personas.php", { "id": id }); } // Al hacer click sobre cualquier elemento que tenga el atributo data-user..... $('[data-user]').click(function(e) { // Detenemos el comportamiento normal del evento click sobre el elemento clicado e.preventDefault(); // Mostramos texto de que la solicitud está en curso $("#response-container").html("<p>Buscando...</p>"); // this hace referencia al elemento que ha lanzado el evento click // con el método .data('user') obtenemos el valor del atributo data-user de dicho elemento y lo pasamos a la función getdetails definida anteriormente getdetails( $(this).data('user') ) .done(function(response) { //done() es ejecutada cuándo se recibe la respuesta del servidor. response es el objeto JSON recibido if (response.success) { var output = "<h1>" + response.data.message + "</h1>"; // recorremos cada usuario $.each(response.data.users, function(key, value) { output += "<h2>Detalles del usuario " + value['ID'] + "</h2>"; // recorremos los valores de cada usuario $.each(value, function(userkey, uservalue) { output += '<ul>'; output += '<li>' + userkey + ': ' + uservalue + "</li>"; output += '</ul>'; }); }); // Actualizamos el HTML del elemento con id="#response-container" $("#response-container").html(output); } else { //response.success no es true $("#response-container").html('No ha habido suerte: ' + response.data.message); } }) .fail(function(jqXHR, textStatus, errorThrown) { $("#response-container").html("Algo ha fallado: " + textStatus); }); }); });

PHP: personas.php

<?php if( isset($_GET['id']) ) { get_persons($_GET['id']); } else { die("Solicitud no válida."); } function get_persons( $id ) { //Cambia por los detalles de tu base datos $dbserver = "localhost"; $dbuser = "usuario_basededatos"; $password = "password_basededatos"; $dbname = "nombre_basededatos"; $database = new mysqli($dbserver, $dbuser, $password, $dbname); if($database->connect_errno) { die("No se pudo conectar a la base de datos"); } $jsondata = array(); //Sanitize ipnut y preparar query if( is_array($id) ) { $id = array_map('intval', $id); $querywhere = "WHERE `ID` IN (" . implode( ',', $id ) . ")"; } else { $id = intval($id); $querywhere = "WHERE `ID` = " . $id; } if ( $result = $database->query( "SELECT * FROM `cyb_users` " . $querywhere ) ) { if( $result->num_rows > 0 ) { $jsondata["success"] = true; $jsondata["data"]["message"] = sprintf("Se han encontrado %d usuarios", $result->num_rows); $jsondata["data"]["users"] = array(); while( $row = $result->fetch_object() ) { //$jsondata["data"]["users"][] es un array no asociativo. Tendremos que utilizar JSON_FORCE_OBJECT en json_enconde //si no queremos recibir un array en lugar de un objeto JSON en la respuesta //ver php.net/manual/es/function.json-encode.php para más info $jsondata["data"]["users"][] = $row; } } else { $jsondata["success"] = false; $jsondata["data"] = array( 'message' => 'No se encontró ningún resultado.' ); } $result->close(); } else { $jsondata["success"] = false; $jsondata["data"] = array( 'message' => $database->error ); } header('Content-type: application/json; charset=utf-8'); echo json_encode($jsondata, JSON_FORCE_OBJECT); $database->close(); } exit();

¿Hay Algo Malo En El CSS?

RewriteRule ^all.css$ /engine/classes/min/index.php?charset=windows-1251&f=/templates/Tema de la plantilla/css/allsite.css,/templates/Tema de la plantilla/css/font-awesome.css,/templates/Tema de la plantilla/css/bbcodes.css&30 [QSA]

RewriteRule ^all.css$ /engine/classes/min/index.php?charset=UTF-8&f=/templates/Tema de la plantilla/css/allsite.css,/templates/Tema de la plantilla/css/font-awesome.css,/templates/Tema de la plantilla/css/bbcodes.css&30 [QSA]

<link href="/all.css" rel="stylesheet" />

[aviable=addnews] <link href="/add.css" rel="stylesheet" /> [/aviable] [aviable=showfull] <link href="/full.css" rel="stylesheet" /> [/aviable] 

[aviable=showfull] <script src="/engine/classes/min/index.php?charset=windows-1251&amp;f={THEME}/js/uppod_api.js,{THEME}/js/jquery.wysibb.min.js,{THEME}/js/fullstory.js&30" type="text/jаvascript"></script> [/aviable]

[aviable=showfull] <script src="/engine/classes/min/index.php?charset=UTF-8&amp;f={THEME}/js/uppod_api.js,{THEME}/js/jquery.wysibb.min.js,{THEME}/js/fullstory.js&30" type="text/jаvascript"></script> [/aviable]

En cuanto a JS...

/index.php o /engine/modules/main.php

$tpl->set ( '{headers}', $metatags."\n".$js_array );

$tpl->set ( '{headers}', $metatags ); $tpl->set ( '{jsfiles}', $js_array );

{AJAX} {jsfiles}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> {AJAX} {jsfiles} 

'engine/classes/js/jquery.js', 'engine/classes/js/jqueryui.js', 

$min_documentRoot . '/engine/classes/js/jquery.js', $min_documentRoot . '/engine/classes/js/jqueryui.js', 

'general' => array( #$min_documentRoot . '/engine/classes/js/jquery.js', #$min_documentRoot . '/engine/classes/js/jqueryui.js', $min_documentRoot . '/engine/classes/js/dle_js.js', $min_documentRoot . '/templates/Default/js/jquery.cookie.js', $min_documentRoot . '/templates/Default/js/ajaxform.js', $min_documentRoot . '/templates/Default/js/main.js', ), 

<!DOCTYPE html> <html> <head> {headers} <link href="{THEME}/images/favicon.ico" rel="icon" type="image/x-icon"/> <link href="{THEME}/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/> <link href="/all.css" rel="stylesheet"/> [aviable=showfull] <link href="/full.css" rel="stylesheet"/> [/aviable] [aviable=addnews] <link href="/add.css" rel="stylesheet"/> [/aviable] </head> <body> {content} <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> {AJAX} {jsfiles} [aviable=showfull] <script src="/full.js"></script> [/aviable] [aviable=addnews] <script src="/add.js"></script> [/aviable] </body> </html> 

Objetivo

• Realizar un formulario para ser usado desde jаvascript

Lecturas propuestas

• Formularios.
• Propiedades básicas de los formularios.
• Expresiones regulares.
• Validación de campos.
• Objetos DOM para formularios.

Formularios