{"id":6761,"date":"2014-05-21T21:05:02","date_gmt":"2014-05-21T19:05:02","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=6761"},"modified":"2014-05-21T21:16:02","modified_gmt":"2014-05-21T19:16:02","slug":"ejemplos-de-ajax-sencillos","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/ejemplos-de-ajax-sencillos\/","title":{"rendered":"Ejemplos de AJAX sencillos. Recordando conceptos."},"content":{"rendered":"

En esta entrada dejo unos ejemplos sencillos de uso de las tecnolog\u00edas AJAX para recordar su uso.<\/span><\/p>\n

El primero muestra aspectos b\u00e1sicos, el segundo rescata de una base de datos sqlite informaci\u00f3n mediante llamadas \u00a0GET AJAX.<\/span><\/p>\n

Es necesario refrescar\u00a0que AJAX<\/b>, acr\u00f3nimo de\u00a0A<\/b>synchronous\u00a0J<\/b>avaScript\u00a0A<\/b>nd\u00a0X<\/b>ML<\/i>\u00a0(JavaScript<\/span><\/a>\u00a0as\u00edncrono y\u00a0XML<\/span><\/a>), es una t\u00e9cnica de\u00a0desarrollo web\u00a0para crear aplicaciones interactivas o\u00a0RIA<\/span><\/a>\u00a0(Rich Internet Applications<\/i>).<\/span><\/p>\n

Estas aplicaciones se ejecutan en el\u00a0cliente, es decir, en el\u00a0navegador\u00a0de los usuarios mientras se mantiene la comunicaci\u00f3n\u00a0as\u00edncrona<\/span><\/a>\u00a0con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las p\u00e1ginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y\u00a0usabilidad<\/span><\/a>\u00a0en las aplicaciones.<\/span><\/p>\n

<\/p>\n

<!-- Ejemplo AJAX asincrono que carga un fichero en un div !-->\r\n<html>\r\n\t<head>\r\n\t\t<script type=\"text\/javascript\">\r\n\t\tfunction Ejecutarajax(){\r\n\t\t\tvar conexion;\r\n\t\t\tif (window.XMLHttpRequest)\t\t\t  {\r\n\t\t\t  conexion=new XMLHttpRequest();\r\n\t\t\t}else\r\n\t\t\t  {\r\n\t\t\t   \/\/Para navegadores antiguos.\r\n\t\t\t   conexion=new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n\t\t\t}\r\n\t\t\tconexion.onreadystatechange=function(){\r\n\t\t\t\t\/\/* Codigos de readyState\t\t\t\t\r\n\t\t\t\t\/\/ 0: La petici\u00f3n no se ha iniciado.\r\n\t\t\t\t\/\/ 1: Conexi\u00f3n con el servidor establecida\r\n\t\t\t\t\/\/ 2: Petici\u00f3n recibida\r\n\t\t\t\t\/\/ 3: Procesando petici\u00f3n\r\n\t\t\t\t\/\/ 4: Petici\u00f3n finalizada y respuesta\r\n\t\t\t\t\/\/* C\u00f3digos de Status\r\n\t\t\t\t\/\/ 200. Todo ha funcionado\r\n\t\t\t\t\/\/ 404. P\u00e1gina no encontrada.\r\n\t\t\t\tif(conexion.readyState==4 && conexion.status==200){\r\n\t\t\t\t\tdocument.getElementById(\"micapa\").innerHTML=conexion.responseText;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tconexion.open(\"GET\",\"Mifichero.txt\",true);\r\n\t\t\t\/\/ Otro ejemplo llamando a un php con parametro\r\n\t\t\t\/\/ xmlhttp.open(\"GET\",\"mipagina.php?c=\"+mivariable,true);\r\n\t\t\t\t\r\n\t\t\tconexion.send();\r\n\t\t}\r\n\t\t<\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id=\"micapa\"><\/div>\r\n\t\t<button type=\"button\" onclick=\"Ejecutarajax()\">Ejecutar<\/button>\r\n\t<\/body>\r\n<\/html><\/pre>\n
Este otro ejemplo rescata datos de la base mediante AJAX y\u00a0SQlite, existe una pagina PHP asociada.<\/p>\n
<html>\r\n\t<head>\r\n\t\t<script type=\"text\/javascript\">\r\n\t\t\tfunction muestraciudad(str){\r\n\r\n\t\t\t\tvar xmlhttp; \r\n\t\t\t\tif (str==\"\")\r\n\t\t\t\t  {\r\n\t\t\t\t  document.getElementById(\"txtHint\").innerHTML=\"\";\r\n\t\t\t\t  return;\r\n\t\t\t\t  }\r\n\t\t\t  if (window.XMLHttpRequest)\r\n\t\t\t\t  {\/\/ codigo para IE7+, Firefox, Chrome, Opera, Safari\r\n\t\t\t\t  xmlhttp=new XMLHttpRequest();\r\n\t\t\t\t  }\r\n\t\t\t\telse\r\n\t\t\t\t  {\/\/ code for IE6, IE5\r\n\t\t\t\t  xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n\t\t\t\t  }\r\n\t\t\t\txmlhttp.onreadystatechange=function()\r\n\t\t\t\t  {\r\n\t\t\t\t  if (xmlhttp.readyState==4 && xmlhttp.status==200)\r\n\t\t\t\t\t {\r\n\t\t\t\t\t document.getElementById(\"ciudad\").innerHTML=xmlhttp.responseText;\r\n\t\t\t\t\t }\r\n\t\t\t\t  }\r\n\t\t\t  xmlhttp.open(\"GET\",\"db.php?c=\"+str,true);\r\n\t\t\t\txmlhttp.send();\r\n\t\t\t}\r\n\t\t\t\r\n\t\t<\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<form action=\"\">\r\n\t\t\t<select name=\"ciudades\" onchange=\"muestraciudad(this.value)\">\r\n\t\t\t\t<option value=\"\">Selecciona una ciudad<\/option>\r\n\t\t\t\t<option value=\"Palencia\">Palencia<\/option>\r\n\t\t\t\t<option value=\"Valladolid\">Valladolid<\/option>\r\n\t\t\t\t<option value=\"Segovia\">Segovia<\/option>\r\n\t\t\t\t<option value=\"Soria\">Soria<\/option>\r\n\t\t\t<\/select>\r\n\t\t<\/form>\r\n\t\t<div id=\"ciudad\">La informacion de la ciudad aparecera aqui<\/div>\r\n\t<\/body>\r\n<\/html><\/pre>\n
Y para la p\u00e1gina de la base de datos db.php<\/p>\n
<?php\r\n\/\/ Conexion contra la base de datos\r\n\/\/echo $_GET['c'];\r\n$conexion = sqlite_open('ciudades.db');\r\n\t\t\t$consulta = \"SELECT * FROM ciudades;\";\r\n\t\t\t$resultado = sqlite_query($conexion,$consulta);\r\n\r\n\t\t\twhile($fila = sqlite_fetch_array($resultado)){\r\n\t\t\t\t\t\t\tif($fila['nombre'] == $_GET['c']){\r\n\t\t\t\t\t\t\t\techo $fila['nombre'];\r\n\t\t\t\t\t\t\t\techo ' - ';\r\n\t\t\t\t\t\t\t\techo $fila['lugarinteres'];\r\n\t\t\t\t\t\t\t\techo ' - ';\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\techo $fila['prefijo'];\r\n\t\t\t\t\t\t\t\techo ' - ';\r\n\t\t\t\t\t\t\t\techo $fila['habitantes'];\r\n\t\t\t\t\t\t\t\techo ' - ';\r\n\t\t\t\t\t\t\t\techo $fila['poblacion'];\r\n\t\t\t\t\t\t\t\techo ' - ';\t\r\n\t\t\t\t\t\t\t\techo $fila['pais'];\r\n\t\t\t\t\t\t\t\techo ' - ';\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\nsqlite_close($conexion);\r\n?>\r\n<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
En esta entrada dejo unos ejemplos sencillos de uso de las tecnolog\u00edas AJAX para recordar su uso. El primero muestra aspectos b\u00e1sicos, el segundo rescata de una base de datos sqlite informaci\u00f3n mediante llamadas \u00a0GET AJAX. Es necesario refrescar\u00a0que AJAX, acr\u00f3nimo de\u00a0Asynchronous\u00a0JavaScript\u00a0And\u00a0XML\u00a0(JavaScript\u00a0as\u00edncrono y\u00a0XML), es una t\u00e9cnica de\u00a0desarrollo web\u00a0para crear aplicaciones interactivas o\u00a0RIA\u00a0(Rich Internet Applications). Estas aplicaciones se ejecutan en el\u00a0cliente, es decir, en el\u00a0navegador\u00a0de los usuarios mientras se mantiene la comunicaci\u00f3n\u00a0as\u00edncrona\u00a0con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las p\u00e1ginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y\u00a0usabilidad\u00a0en las aplicaciones.<\/p>\n","protected":false},"author":1,"featured_media":5784,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[418,5],"tags":[94,38],"class_list":["post-6761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-2","category-programacion","tag-ajax","tag-ejemplo"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=6761"}],"version-history":[{"count":7,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6761\/revisions"}],"predecessor-version":[{"id":6768,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6761\/revisions\/6768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/5784"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=6761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=6761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=6761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}