From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/guide/ajax/comunidad/index.html | 44 +++++ files/es/web/guide/ajax/index.html | 90 +++++++++ files/es/web/guide/ajax/primeros_pasos/index.html | 231 ++++++++++++++++++++++ 3 files changed, 365 insertions(+) create mode 100644 files/es/web/guide/ajax/comunidad/index.html create mode 100644 files/es/web/guide/ajax/index.html create mode 100644 files/es/web/guide/ajax/primeros_pasos/index.html (limited to 'files/es/web/guide/ajax') diff --git a/files/es/web/guide/ajax/comunidad/index.html b/files/es/web/guide/ajax/comunidad/index.html new file mode 100644 index 0000000000..50a91de5a4 --- /dev/null +++ b/files/es/web/guide/ajax/comunidad/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Guide/AJAX/Comunidad +tags: + - AJAX + - Todas_las_Categorías +translation_of: Web/Guide/AJAX/Community +--- +

 

+


+ Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con AJAX que pueda ser de interés. Por favor, pon aquí un enlace.

+

Mozilla

+ +

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+

Listas de correo

+ +

 

+

Foros

+ +

Bitácoras

+ +

 

+

Wikis

+ +

 

+

Otros Sitios

+ +

 

+

categorías

diff --git a/files/es/web/guide/ajax/index.html b/files/es/web/guide/ajax/index.html new file mode 100644 index 0000000000..25c1dba553 --- /dev/null +++ b/files/es/web/guide/ajax/index.html @@ -0,0 +1,90 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +

 

+ +
Primeros Pasos
+Una introducción a AJAX.
+ +

JavaScript Asíncrono + XML (AJAX) no es una tecnología por sí misma, es un término que describe un nuevo modo de utilizar conjuntamente varias tecnologías existentes. Esto incluye: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT, y lo más importante, el objeto XMLHttpRequest. Cuando estas tecnologías se combinan en un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse continuamente sin tener que volver a cargar la página completa. Esto crea aplicaciones más rápidas y con mejor respuesta a las acciones del usuario.

+ + + + + + + + +
+

Documentación

+ +
+
Primeros pasos con AJAX
+
Este artículo te guiará por los conceptos básicos de AJAX y te proporcionará dos ejemplos prácticos para que empieces.
+
+ +
+
Técnicas Ajax Alternativas
+
La mayoría de los artículos sobre Ajax se enfocaron en utilizar XMLHttp como el medio para llevar a cabo dicha comunicación, pero las técnicas Ajax no están limitadas solo a XMLHttp. Existen otros métodos más.
+
+ +
+
Ajax con PHP, JSON y CSS
+
Con este tutorial puedes programar con AJAX utilizando PHP y JSON, un nuevo estándar más simple que XML. Programarás en AJAX, PHP y CSS de forma simple y natural.
+
+ +
+
Ajax Upload File
+
Artículo en el que se explica la carga de archivos de un formulario usando AJAX y PHP, además de otros ejemplos en los que se puede visualizar la barra de progreso de la carga.
+
+ +
+
Creando formulario editables in situ
+
Breve tutorial que nos muestra como crear nuestros formularios editables in situ con AJAX, PHP y MySQL, al estilo Flickr.
+
+ +
+
Arquitectura Cliente Servidor con AJAX
+
Artículo avanzado que muestra un patrón de diseño para desarrollar con AJAX, haciendo el modelo de la aplicación como web-services, la interface (view) con HTML y el controlador (controller) en Javascript, para crear aplicaciones siguiendo el paradigma MVC. Herramientas: Prototype, JSON y CSS.
+
+ +

Ver todos

+ 		+

Comunidad

+ + + +
    +
  • Foros sobre AJAX en la comunidad Mozilla en inglés:
    • +
+ +

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+ +

Ver todos

+ +

Herramientas

+ + + +

Ver todos

+ +

Temas relacionados

+ +
+
HTML · XHTML · CSS · DOM · JavaScript · XML · XMLHttpRequest · XSLT · DHTML
+
+
+ +
 
+ +

{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}

diff --git a/files/es/web/guide/ajax/primeros_pasos/index.html b/files/es/web/guide/ajax/primeros_pasos/index.html new file mode 100644 index 0000000000..ed2bbbc33f --- /dev/null +++ b/files/es/web/guide/ajax/primeros_pasos/index.html @@ -0,0 +1,231 @@ +--- +title: Primeros Pasos +slug: Web/Guide/AJAX/Primeros_Pasos +tags: + - AJAX + - API + - Avanzado + - Todas_las_Categorías + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Este artículo es una guía básica sobre AJAX e incluye dos ejemplos.

+ +

¿Qué es AJAX?

+ +

AJAX (JavaScript Asíncrono y XML) es un término nuevo para describir dos capacidades de los navegadores que han estado presentes por años, pero que habían sido ignoradas por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como Gmail, Google suggest y Google Maps.

+ +

Las dos capacidades en cuestión son:

+ + + +

Primer Paso – Cómo realizar una petición HTTP al servidor

+ +

Para realizar una petición HTTP usando JavaScript, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase XMLHttpRequest que soportaba los métodos y las propiedades del objeto ActiveX original.

+ +

Como resultado, para crear una instancia de la clase requerida que funcione en todos los navegadores, es necesario poner:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(El código mostrado es una versión simplificada con fines ilustrativos. Para un ejemplo más realista ver el paso 3 de este artículo.)

+ +

Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta. Para esto se asigna la propiedad onreadystatechange del objeto al nombre de la función de JavaScript que se va a utilizar:

+ +

http_request.onreadystatechange = nameOfTheFunction;

+ +

Es importante notar que no hay paréntesis después del nombre de la función y no se pasa ningún parámetro. También es posible definir la función en ese momento, y poner en seguida las acciones que procesarán la respuesta:

+ +
http_request.onreadystatechange = function(){
+    // procesar la respuesta
+};
+
+ +

Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTP request, como se muestra a continuación:

+ +
http_request.open('GET', 'http://www.example.org/algun.archivo', true);
+http_request.send();
+
+ + + +

El parámetro en el método send()puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:

+ +

name=value&anothername=othervalue&so=on

+ +

Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

De otro modo el servidor descartará la información.

+ +

Segundo Paso – Procesando la respuesta del servidor

+ +

Al enviar la petición HTTP es necesario indicar el nombre de la función JavaScript que procesará la respuesta.

+ +

http_request.onreadystatechange = nameOfTheFunction;

+ +

A continuación se verá lo que esta función realiza. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.

+ +
if (http_request.readyState == 4) {
+    // todo va bien, respuesta recibida
+} else {
+    // aun no esta listo
+}
+
+ +

La lista completa de valores para la propiedad readyState es:

+ + + +

(Source)

+ +

Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el sitio de la W3C. Para el próposito de este artículo sólo es importante el código 200 OK.

+ +
if (http_request.status == 200) {
+    // perfect!
+} else {
+    // hubo algún problema con la petición,
+    // por ejemplo código de respuesta 404 (Archivo no encontrado)
+    // o 500 (Internal Server Error)
+}
+
+ +

Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:

+ + + +

Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo

+ +

En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un documento HTML llamado test.html, que contiene el texto "Esto es una prueba." y después usaremos la función alert() con el contenido del archivo test.html .

+ +
<script type="text/javascript" language="javascript">
+
+    var http_request = false;
+
+    function makeRequest(url) {
+
+        http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Ver nota sobre esta linea al final
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Falla :( No es posible crear una instancia XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = alertContents;
+        http_request.open('GET', url, true);
+        http_request.send();
+
+    }
+
+    function alertContents() {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Hubo problemas con la petición.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')">
+        Hacer una petición
+</span>
+
+ +

En este ejemplo:

+ + + +

Puedes probar el ejemplo aquí y puedes ver el archivo de prueba aquí.

+ +

Nota: La línea http_request.overrideMimeType('text/xml'); arriba causaría problemas en la consola de Javascript de Firefox 1.5b, como esta descrito en https://bugzilla.mozilla.org/show_bug.cgi?id=311724, si la página llamada por XMLHttpRequest no es XML válido (por ejemplo, si es texto).

+ +

Si se obtiene Syntax Error o Not Well Formed Error en el navegador, y no se está intentando cargar una página XML con XMLHttpRequest, se puede eliminar esa línea del código.

+ +

Cuarto Paso – Trabajando con la respuesta XML

+ +

En el ejemplo anterior se utilizo la propiedad reponseText del objeto pedido para mostrar el contenido de test.html una vez que la respuesta HTTP había sido recibida. En éste se utilizará la propiedad responseXML.

+ +

Primero hay que crear un documento de XML válido. El documento (test.xml) contiene lo siguiente:

+ +
<?xml version="1.0" ?>
+<root>
+    Esto es una prueba.
+</root>
+
+ +

Para que funcione el script solo es necesario cambiar la línea de petición por:

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

Y en alertContents() es necerario remplazar la línea donde aparece alert(http_request.responseText); por:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

De esta manera se utiliza el objeto XMLDocument dado por responseXML y se usan métodos del DOM para acceder a la información contenida en el documento XML. El archivo test.xml se encuentra aquí y el script actualizado está aquí.

+ +

Para más información sobre los metodos del DOM, visita los documentos de la implementación del DOM de Mozilla.

+ +
 
+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}

-- cgit v1.2.3-54-g00ecf