No ha sido una tarea fácil conseguir que este código funcionara. Me he pasado horas y horas buscando documentación oficial de los objetos utilizados, he consultado en foros, etc... y por fin, después de copiar y pegar de aquí y de allá, parece que el esfuerzo se concretó en algo operativo y multiplataforma ;)
Nuestro ejemplo consta de 4 archivos:
- index.htm. Es el documento HTML que verá el visitante en el navegador y el que irá haciendo las llamadas al servidor SIN NECESIDAD DE RECARGARSE LA PÁGINA.
- json_1.php. Es el archivo PHP al que llamará index.htm cuando necesite nuevos datos.
- funciones.php. Contiene dos funciones en PHP necesarias para preparar los datos que quiera enviar json_1.php a index.htm.
- smile.gif. Es una imagen que utilizaremos de ejemplo, para comprobar que con JSON podemos trabajar dinámicamente en nuestras aplicaciones web con texto y con imágenes.
Para hacer funcionar el ejemplo, debéis poner los 4 archivos en una misma carpeta de vuestro servidor y desde un navegador llamar al archivo index.htm. Así de sencillo. Ah, y bueno, para que lo tengáis más fácil, os dejo este enlace para que podáis descargaros un RAR con el ejemplo listo para probar ;)
También podéis ver el ejemplo funcionando. No os podéis quejar :)
index.htm
1 <html>
2 <head>
3 <title>.: JSON - ejemplo sencillo :.</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
5 </head>
6
7 <body>
8
9 <a href="javascript:remote_fill('json_1.php?color=rojo');">ROJO</a>
10 <a href="javascript:remote_fill('json_1.php?color=azul');">AZUL</a>
11 <br /><br /><br />
12 <span id='json_grafico'></span>
13 <span id='json_texto'></span>
14
15 <script>
16
17 // INTENTAR LA CREACION DE UNA CONEXION DIRECTA CON EL SERVIDOR MEDIANTE XMLHttpRequest
18
19 function createRequest() {
20 try {
21 request = new XMLHttpRequest();
22 } catch (trymicrosoft) {
23 try {
24 request = new ActiveXObject('Msxml2.XMLHTTP');
25 } catch (othermicrosoft) {
26 try {
27 request = new ActiveXObject('Microsoft.XMLHTTP');
28 } catch (failed) {
29 request = false;
30 }
31 }
32 }
33 if (!request)
34 alert('Su navegador no permite crear uns instancia de XMLHttpRequest, ni de Msxml2.XMLHTTP, ni de Microsoft.XMLHTTP. Esta característica es indispensable para seguir trabajando en esta aplicación web.');
35 }
36
37 var request = false;
38 createRequest();
39
40 // FUNCIONES DE TRABAJO CON EL SERVIDOR
41
42 function remote_fill(url_remote){
43 request = false;
44 createRequest();
45 if (!request){
46 alert('Su navegador no permite crear uns instancia de XMLHttpRequest, ni de Msxml2.XMLHTTP, ni de Microsoft.XMLHTTP. Esta característica es indispensable para seguir trabajando en esta aplicación web.');
47 return false;
48 }
49 request.onreadystatechange = handle_json;
50 request.open('GET', url_remote, true);
51 request.send(null);
52 }
53
54 function handle_json() {
55 if (request.readyState == 4) {
56 if (request.status == 200) {
57 var json_data = request.responseText;
58 var the_object = eval( '(' + json_data + ')' );
59 document.getElementById('json_grafico').innerHTML= the_object.grafico_pertinente;
60 document.getElementById('json_texto').innerHTML= the_object.texto_pertinente;
61 } else {
62 alert('Ha habido un problema con la URL ');
63 }
64 }
65 }
66
67 remote_fill('json_1.php?color=blanco');
68
69 </script>
70
71 </body>
72 </html>json_1.php
1 <?php
2 if (!isset($_GET['color'])) return false;
3 include_once("funciones.php");
4
5 $ret = array();
6 switch ($_GET['color']){
7 case "rojo":
8 $ret['grafico_pertinente'] = "<img src='smile.gif' style='border:1px #ff0000 solid' />";
9 $ret['texto_pertinente'] = " borde rojo";
10 break;
11 case "azul":
12 $ret['grafico_pertinente'] = "<img src='smile.gif' style='border:1px #0000ff solid' />";
13 $ret['texto_pertinente'] = " borde azul";
14 break;
15 default:
16 $ret['grafico_pertinente'] = "<img src='smile.gif' style='border:0px #ff0000 solid' />";
17 $ret['texto_pertinente'] = " escoge un color para el borde, y el servidor devolverá la respuesta";
18 break;
19 }
20
21 echo php_json_encode($ret);
22
23 ?>funciones.php
1 <?php
2
3 // funciones JSON
4 function json_encode_string($in_str){
5 //$charset = "UTF-8";
6 $charset = "ISO-8859-1";
7 mb_internal_encoding($charset);
8 $convmap = array(0x80, 0xFFFF, 0, 0xFFFF);
9 $str = "";
10 for($i=mb_strlen($in_str)-1; $i>=0; $i--){
11 $mb_char = mb_substr($in_str, $i, 1);
12 if(mb_ereg("&#(\\d+);", mb_encode_numericentity($mb_char, $convmap, $charset), $match))
13 $str = sprintf("\\u%04x", $match[1]) . $str;
14 else
15 $str = $mb_char . $str;
16 }
17 return $str;
18 }
19
20 function php_json_encode($arr){
21 $json_str = "";
22 if(is_array($arr)){
23 $pure_array = true;
24 $array_length = count($arr);
25 for($i=0;$i<$array_length;$i++){
26 if(! isset($arr[$i])){
27 $pure_array = false;
28 break;
29 }
30 }
31 if($pure_array){
32 $json_str ="[";
33 $temp = array();
34 for($i=0;$i<$array_length;$i++)
35 $temp[] = sprintf("%s", php_json_encode($arr[$i]));
36 $json_str .= implode(",",$temp);
37 $json_str .="]";
38 }else{
39 $json_str ="{";
40 $temp = array();
41 foreach($arr as $key => $value)
42 $temp[] = sprintf("\"%s\":%s", $key, php_json_encode($value));
43 $json_str .= implode(",",$temp);
44 $json_str .="}";
45 }
46 }else{
47 if(is_string($arr)){
48 $json_str = "\"". json_encode_string($arr) . "\"";
49 }elseif(is_numeric($arr)){
50 $json_str = $arr;
51 }else{
52 $json_str = "\"". json_encode_string($arr) . "\"";
53 }
54 }
55 return $json_str;
56 }
57
58 ?> 
