Visitas: 19  
Tiempo total: 0 días con 6:49:24 hrs  

A continuación las instrucciones necesarias para conocer cómo es que WordPress trabaja las funcionas dinámicas AJAX, pera antes que todo la explicación de cómo debería de funcionar una función simple utilizando documentos HTML, Javascript/JQuery y Php para obtener las respuestas dinámicas.

Llamada AJAX normal

En un documento HTML, tenemos la etiqueta con el identificador ‘megusta’ de la siguiente manera:

<div id='megusta'>+ Me gusta</div>

En Javascript, definimos la siguiente función:

function megusta(url, data){
	var ajax=objAjax();
	
	ajax.open("POST", url, true);
	ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	ajax.setRequestHeader("Content-length", data.length);
	ajax.setRequestHeader("Connection", "close");
	
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			$('#megusta').html(ajax.responseText.toString());
		}
	}
	ajax.send(data);
	
	return false;
}

Lo que hace es enviar las variables data a la URL especificada, la variable data debe de tener el siguiente formado: var1=val1&var2=val2&var3=val3. El siguiente paso, es crear el archivo PHP que recibe las variables. Este archivo, debe de ser similar al siguiente:

<?php
	$var1 = $_POST['var1'];
	$var1 = $_POST['var2'];
	$var1 = $_POST['var3'];
	// Implementación
	Echo "OK";
?>

Este proceso hace bastante repetitivo la generación de archivos PHP con funciones que realizan conexiones a las bases de datos, perdiendo bastante tiempo en la programación de código. Para finalizar con este ejemplo, es necesario recordar que Javascript debe de contar con el objeto AJAX que hace posible establecer comunicación con los archivos PHP externos:

function objAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

Llamadas AJAX en WordPress

WordPress simplifica bastante la utilización de funciones AJAX, empezando con que reemplazamos los archivos que las funciones llaman por funciones PHP, de la siguiente manera:

function ajax_dinamico($var1=false, $var2=false, $return=false){
	if(isset($_POST['var1']){
		$var1=$_POST['var1'];
	}
	if(isset($_POST['var2']){
		$var2=$_POST['var2'];
	}
	
	// Implementación
	
	if($return)
		//regresar resultado
	else
		//imprimir resultado
}

add_action( 'wp_ajax_ajax_dinamico', 'ajax_dinamico' );
add_action( 'wp_ajax_nopriv_ajax_dinamico', 'ajax_dinamico' );

Esta función la colocamos en el archivo functions.php del tema que estamos editando en WordPress. Los activadores wp_ajax_{nombre} y wp_ajax_nopriv_{nombre} son los que hacen referencia a la función. En WordPress, a todas las funciones que se llaman usando Ajax se les antepone automáticamente wp_ajax o wp_ajax_nopriv, asi si llamamos a la función ajax_dinamico, se estará llamando al activador wp_ajax_ajax_dinamico que a su vez llamara a la función que especificamos.

La diferencia entre wp_ajax y wp_ajax_nopriv es que, wp_ajax se utiliza para usuarios que han iniciado sesión y wp_ajax_nopriv para usuarios públicos sin sesión de usuario.

JQuery simplifica más la utilización de estas funciones, de la siguiente manera:

function ajax_dinamico(val1, val2){
	jQuery.post(
		ajaxurl, 
		{
			'action': 'ajax_dinamico',
			'var1': val1,
			'var2': val2
		}, 
		function(response){
			$(‘#megusta').html(response)
		}
	);
}

La función simplemente llama a la función PHP que hemos creado: ajax_dinamico y envía las variables que indicamos a continuación. Uno de los inconvenientes es que WordPress agrega el número 0 al final de todas las respuestas AJAX, esto lo eliminamos agregando al final de nuestra respuesta PHP un _END_ y cortando en Javascript la cadena de texto con:

response = response.split("_END_"); 
$('#megusta').html(response[0]);

Algunos blogs en internet utilizan en PHP la función die() para evitar la escritura de este número, pero si por ejemplo hacemos lo siguiente en el archivo HTML para inicializar la pagina:

<div id='megusta'> <?=ajax_dinamico(1, 3, true)?> </div>

Todo el contenido que sigue después se cancelara, mostrando un resultado HTML en blanco a partir de la línea en donde se llama a la función, porque finalizara con la instrucción die().

En la función JQuery publicada, observamos la variable ajaxurl. Esta es una variable global que WordPress define en el documento HTML, si se está utilizando una header con código propio, o se eliminaron los activadores que hacen posible a WordPress la escritura de esta variable, el código HTML/Javascript básico hace posible las llamadas AJAX, es el siguiente:

<script type="text/javascript">
var ajaxurl = '/wp-admin/admin-ajax.php';
</script>