Webelop

Una parte fundamental de una aplicación web (sino LA parte fundamental) es la comunicación entre la interfase del usuario y el servidor. Mediante los nuevos métodos para realizar esa comunicación, apareció la web 2.0 y las nuevas y poderosas aplicaciones web.

Existen diversas formas de comunicar el client-side con el server-side en una aplicación web. Una de ellas es: AJAX - JSON - PHP.

Mediante el objeto XMLHttpRequest de AJAX se envían variables a un archivo PHP (mediante GET o POST, siendo preferible, a mi entender, el último).

function sendQuerystring2(url,params){
http2.open(”POST”, url, true);
http2.send(params);
}
sendQuerystring2(”archivo.php”, query);

El archivo PHP procesa y devuelve información mediante un echo. Pero esa información debe ser organizada de alguna forma para que javascript pueda utilizarlo.
Ahí aparece JSON (JavaScript Object Notation). JSON es una forma de organizar los datos dentro de objetos JavaScript.
(En este caso, el PHP procesa un query hecho a MySQL)

$inicio = TRUE;
echo “{\”items\”:[";
if (mysql_num_rows($query_final)){
while ($row = @mysql_fetch_array($query_final)) {
if ($inicio){
echo "{";
$inicio = FALSE;
} else {
echo ",{";
}
for($j=0;$j<count($column);$j++){
echo "\"".$column[$j].”\”:\”". rawurlencode(utf8_encode($row[$column[$j]])).”\”";
if ($j != count($column)-1){
echo “,”;
}
}
echo “}”;
}
}
echo “]}”;

Esto devolverá algo asi:

{items:[{"nombreColumna1":"valorColumna1a", "nombreColumna2":"valorColumna2a", "nombreColumna3":"valorColumna3a"}, {"nombreColumna1":"valorColumna1b", "nombreColumna2":"valorColumna2b","nombreColumna3":"valorColumna3b"}]}

El cual es un objeto Javascript. Para que Javascript lo tome como tal habrá que aplicarle la función eval() al resultado:

objetoNuevo = eval(’(’ + http2.responseText + ‘)’);

Así, queda constituído el objeto objetoNuevo, que contiene la respuesta del archivo PHP, a la cual se accede de esta forma:

objetoNuevo.items[i].nombreColumna1;

donde i va de cero a la cantidad de filas que tenga la tabla que se procesa en el archivo PHP.

Codificación
Algo que no hay que dejar de lado al utilizar esto es la codificación de los datos, ya que si no se tiene en cuenta se producirán errores con algunos caracteres (acentos, eñe, etc).

Es necesario saber que XMLHttpRequest usa UTF-8 para codificar los datos. UTF-8 es una norma muy abarcativa. Incluye casi todos los caracteres usados normalmente en inglés y español, asi que sería un error intentar utilizar iso-8859-1.
Antes recomendé usar POST y no GET. Esto se debe no sólo al tamaño de la información que se puede enviar (mucho menor con GET), sino también a que para enviar la información por GET, javascript codifica a unicode con la funcion escape(). En cambio, con POST, se mantiene el UTF-8.

Por lo tanto, cuando se envia la cadena de valores al PHP, estos deben ser codificados a UTF-8 mediante la función encodeURIComponent().
Luego, en PHP, se pueden utilizar las funciones utf8_decode(rawurldecode()) para escribir a la base de datos (que por defecto está codificada en latin1).
De ser así, al leer desde la BBDD y mandar a javascript, se deben usar las funciones inversas: rawurlencode(utf8_encode())

Javascript a PHP:

encodeURIComponent() –> variables POST –> rawurldecode() –> utf8_decode() –> MySQL

PHP a Javascript:

MySQL –> utf8_encode() –> rawurlencode() –> JSON

Acá se puede ver el funcionamiento de estas funciones de javascript