dia15.md

Clase 15

Trabajando con APIs

CRUD

• Create:

  • Method (POST):
    • Respuesta 200 - OK
    • Respuesta 204 - Sin contenido
    • Respuesta 404 - No encontrado
    • Respuesta 409 - Conflicto, ya existe

• Read:

  • Method (GET):
    • Respuesta 200 - OK
    • Respuesta 404 - No encontrado

• Update:

  • Method (PUT):
    • Respuesta 200 - OK
    • Respuesta 204 - Sin contenido
    • Respuesta 404 - No encontrado

• Delete:

  • Method (DELETE):
    • Respuesta 200 - OK
    • Respuesta 404 - No encontrado

• Por tipología:

  • 1xx Informativas
  • 2xx Peticiones Correctas
  • 3xx Redirecciones
  • 4xx Errores Cliente
  • 5xx Errores Servidor

• Lista de respuestas HTTP

• Especificación

• API RTVE

AJAX

Con Jquery

    function peticionJqueryAjax (url) {

	    $.ajax({
	        dataType: "json",
	        url: url,
	    })
	     .done(function( data, textStatus, jqXHR ) {
	         if ( console && console.log ) {
	             console.log( "La solicitud se ha completado correctamente." );
	             console.log( data );
	         }
	     })
	     .fail(function( jqXHR, textStatus, errorThrown ) {
	         if ( console && console.log ) {
	             console.log( "La solicitud a fallado: " +  textStatus);
	         }
	    });
	
	}
	
	peticionJqueryAjax ("<---URL---->");

Vainilla JS

• readyState:
  • 0 es uninitialized
  • 1 es loading
  • 2 es loaded
  • 3 es interactive
  • 4 es complete

    function peticionAjax(url) {
        var xmlHttp = new XMLHttpRequest();

        xmlHttp.onreadystatechange = function() {

            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                console.info(JSON.parse(xmlHttp.responseText));
            } else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {
                console.error("ERROR! 404");
                console.info(JSON.parse(xmlHttp.responseText));
            }
        };
        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }

    peticionAjax("<---URL---->");

JSON

• JSON.parse()

  • Analiza la cadena y retorna los valores

• JSON.stringify()

  • Analiza los valores y retorna una cadena

Ejercicios

1 - Sacar en el html los datos de polen.

	// Tu solución

2 - Sacar en el html el tiempo meteorológico de Madrid, Barcelona y Valencia. Nota: http://openweathermap.org te será de gran ayuda, busca la solución al error 401

	// Tu solución	var contenido = "";
  	function temperaturaCiudad (ciudad) {
        var xmlHttp = new XMLHttpRequest(),
        APIKey = '', // Puedes usar una cuenta gratuita -> http://openweathermap.org/price
        cURL = 'http://api.openweathermap.org/data/2.5/weather?q='+ciudad+'&APPID='+APIKey;
    
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                var datos = (JSON.parse(xmlHttp.responseText));
	              contenido += "<h1>"+datos.name+"</h1>"
	              contenido += "<p>"+datos.weather[0].description+"</p>"
	              document.body.innerHTML = contenido;
            } else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {
                datos = JSON.parse(xmlHttp.responseText);
                console.error("ERROR! 404");
                console.info(datos);
            }
        };
    
        xmlHttp.open( "GET", cURL, true );
        xmlHttp.send();
    }
    
    temperaturaCiudad("Madrid");
    temperaturaCiudad("Barcelona");
    temperaturaCiudad("Valencia");