JavaScript / Ajax / Json

codeavila · codeavila · commit 462d73b76588 · 2018-12-21T12:48:45.000-06:00
diff --git a/Ejemplos/AjaxArray.html b/Ejemplos/AjaxArray.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+     <title>Document</title>
+</head>
+<body>
+
+     <a href="#" id="cargar">Cargar</a>
+     <div id="listado"></div>
+
+<script>
+     document.getElementById('cargar').addEventListener('click',cargarArray);
+
+     function cargarArray(e){
+          e.preventDefault();
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET','AjaxJSON.txt',true);
+          xhr.onload = function(){
+               if(this.status === 200){
+                    console.log(JSON.parse(this.responseText));
+                    document.getElementById('listado').innerHTML = `${this.responseText}`;
+               }
+          }
+          xhr.send();
+     }
+</script>
+     
+</body>
+</html>
diff --git a/Ejemplos/AjaxJSON.txt b/Ejemplos/AjaxJSON.txt
@@ -0,0 +1,17 @@
+{
+  "array": [
+    1,
+    2,
+    3
+  ],
+  "boolean": true,
+  "color": "#82b92c",
+  "null": null,
+  "number": 123,
+  "object": {
+    "a": "b",
+    "c": "d",
+    "e": "f"
+  },
+  "string": "Hello World"
+}
diff --git a/README.md b/README.md
@@ -801,11 +801,29 @@ class Casa {
 >>Con la estructura anterior podemos obtener informacion pero hay que presentar la información que recibimos o enviamos de alguna manera y la mejor forma es utilizando estructura `JSON`.
 **[¿Qué es JSON (Click Aqui)?](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON)**.
 
+## Ejemplo de un array y Ajax
+>### HTML
+```html
+   <a href="#" id="cargar">Cargar</a>
+   <div id="listado"></div>
+```
+>### JavaScript
+```js
+  document.getElementById('cargar').addEventListener('click',cargarArray);
 
-
-
-
-
+     function cargarArray(e){
+          e.preventDefault();
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET','AjaxJSON.txt',true);
+          xhr.onload = function(){
+               if(this.status === 200){
+                    console.log(JSON.parse(this.responseText));
+                    document.getElementById('listado').innerHTML = `${this.responseText}`;
+               }
+          }
+          xhr.send();
+     }
+```
 ---
 # JAVA SCRIPT FUNCIONES VARIAS
 
@@ -842,7 +860,6 @@ class Casa {
 
 ### Ejemplo completo
 ```html
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -869,11 +886,8 @@ class Casa {
      </script>
 </body>
 </html>
-
 ```
 
-
-
 ## Estructura / Explicación - JavaScript Select Multiple
 
 >#### HTML 
@@ -945,5 +959,5 @@ Alguna de las maneras de obtener el valor es utilziar un `event` el cual puede s
      }
 </script>
 </html>
+```
 
-```
