5- JSON Cliente / Servidor

Cunado trabajamos con datos y tenemos que hacer peticiones tipo CRUD al servidor, estas peticiones pueden ser de dos maneras: síncronas o asíncronas, síncronas quiere decir que la página se bloquea hasta que no haya una respuesta y asíncrona es ahí donde entra AJAX.

Vamos a crearnos una página y le ponemos: index.html

Abrimos etiquetas de javascript.
XMLHttpRequest, que es uno de los más importantes.
Vamos a crear una instancia  de este objeto y se lo vamos a asignar a una variable

de la siguiente manera:
<script>

var xhttp = new XMLHttpRequest()

</script>

Voy a crear un archivo llamado json.txt

Y dentro vamos a crear algo simple en JSON (el archivo es .txt)

{
  "nombre" : "Juan",
  "edad" : 35,
  "vehiculos" : [
         { "tipo" : "auto", "marca" : "ford"},
         { "tipo" : "moto", "marca" : "yamaha"}
]

}


Volvemos a index.html

¿Qué es XMLHttpRequest ??
Es un objeto de Javacsript, que proporciona una forma facil de obtener info de una url sin tener que recargar la pagina, como en Ajax.
La diferencia entre usar XMLHttpRequest o PHP es que este objeto permite ENVIAR LOS DATOS EN SEGUNDO PLANO SIN TENER QUE PARAR EL FLUJO DE LA PÁGINA.

Ahora, veamos las propiedades de este objeto:
// 1-Se tienen que cumplir estas dos condiciones
xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
              console.log(this.readyState )   // puedo poner xhttp.readyState
              console.log(this.status )    // puedo poner xhttp.status
              console.log(this.responseText) 

       }
}

Esta propiedad especifica una funcion que se ejecutara cada vez que cambie el estado del objeto XMLHttpRequest
Si vemos por consola pondra el numero 4 , su estado que es "completado" y 200 es con exito, se tienen que cumplir estas dos condiciones
Con responseText obtengo todo en formato de texto, nos devuelve un string

//2- Vamos a hacer el pedido a esa pagina
xhttp.open("GET", "json.txt", true)

//3-
 xhttp.send()
//Este método envía la petición al servidor
 ---------------------------------------------------------------------------------------------------------------------

Pero nosotros necesitamos en el ejemplo que esa cadena de texto se convierta en un OBJETO JS.
Entonces, vamos a usar la funcion JSON.encode, que CONVIERTE UNA CADENA DE TEXTO EN UN OBJETO JAVASCRIPT:

xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
              console.log(this.readyState )   // puedo poner xhttp.readyState
              console.log(this.status )    // puedo poner xhttp.status
              console.log(this.responseText) 
              var objetoJS = JSON.parse(this.responseText)
              console.log(objetoJS)
       }
}

Ahora si miramos por consola, vamos a ver que tenemos un objeto JS
Tambien puedo ver el nombre, por ejemplo, ya que es un objeto Javascript:
xhttp.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200){
              console.log(this.readyState )   // puedo poner xhttp.readyState
              console.log(this.status )    // puedo poner xhttp.status
              console.log(this.responseText) 
              var objetoJS = JSON.parse(this.responseText)
              console.log(objetoJS)
              console.log(objetoJS.nombre)
       }
}