Skip to content

Latest commit

 

History

History
310 lines (245 loc) · 9.19 KB

clase9.md

File metadata and controls

310 lines (245 loc) · 9.19 KB
Raw

Clase 9

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

HTTP Protocolo

AJAX

Ajax comparación

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

  • Cambiando la cabecera

Para cambiar datos en la cabecera se usa .setRequestHeader(). Debe ser incluido antes de enviar la petición y después de abrir.

  • 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);
        // Modificación de cabeceras
        xmlHttp.send();
    }

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

Subir Imágenes

var imagen = document.getElementById("imagen-formulario").files[0];
var xhr = new XMLHttpRequest(); 
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "image/png");
xhr.onload = function (detalles) { 
    // Terminado!
};
xhr.send(imagen);

JSON

  • JSON.parse()

    • Analiza la cadena y retorna los valores

  • JSON.stringify()

    • Analiza los valores y retorna una cadena

JSONP

  • json (formato)

      { foo: 'bar' }

  • callback (cliente)

      mycallback = function(data){
    alert(data.foo);
  };

  • peticion (cliente)

      var url = "http://www.example.net/sample.aspx?callback=mycallback";

  • respuesta (servidor)

      mycallback({ foo: 'bar' });

  • Ejemplo de CORS y JSONP con php de formandome

      <?php
  header('content-type: application/json; charset=utf-8');
  header("access-control-allow-origin: *");
   
  //Cadena de conexión:
  $connect = mysql_connect("localhost", "usuario", "pwd")
  or die('Could not connect: ' . mysql_error());
   
  //seleccionamos bbdd:
  $bool = mysql_select_db("database", $connect);
  if ($bool === False){
     print "No puedo encontrar la bbdd: $database";
  }
   
  //inicializamos el cliente en utf-8:
  mysql_query('SET names utf8');
 
  $query = "SELECT * FROM futbolistas";
   
  $result = mysql_query($query) or die("SQL Error: " . mysql_error());
  $data = array();
  // obtenemos los datos:
  while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
      $data[] = array(
          'id' => $row['id'],
          'nombre' => $row['nombre'],
          'apellido' => $row['apellido'],
          'posicion' => $row['posicion'],
          'equipo' => $row['equipo'],
          'dorsal' => $row['dorsal'],
          'desc' => $row['desc'],
  	'imagen' => $row['imagen']
        );
  }
   
  //codificamos en json:
  $json = json_encode($data);
   
  //enviamos json o jsonp según venga o no una función de callback:
  echo isset($_GET['callback'])
      ? "{$_GET['callback']}($json)"
      : $json;
  ?>

Soporte en cliente (librerías):

  • Jquery: 
      // Using YQL and JSONP
  $.ajax({
      url: "http://query.yahooapis.com/v1/public/yql",
   
      // The name of the callback parameter, as specified by the YQL service
      jsonp: "callback",
   
      // Tell jQuery we're expecting JSONP
      dataType: "jsonp",
   
      // Tell YQL what we want and that we want JSON
      data: {
          q: "select title,abstract,url from search.news where query=\"cat\"",
          format: "json"
      },
   
      // Work with the response
      success: function( response ) {
          console.log( response ); // server response
      }
  });
  • jsonp.js de Przemek Sobstel
  • J50Npi.js de Roberto Decurnex

Fetch, una alternativa a XMLHttpRequest

CORS

Ejercicios

1 - Sacar en el html la respuesta de OMDB para la pelicula Hackers

	 function peticionAjax (movieName) {
	  var xmlHttp = new XMLHttpRequest(),
	                cURL = 'http://www.omdbapi.com/?t='+movieName+'&y=&plot=short&r=json';
	
	            xmlHttp.onreadystatechange = function () {
	
	                if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
	                    var datos = (JSON.parse(xmlHttp.responseText));
	                    var contenido = "";
	                    contenido += "<h1>"+datos.Title+"</h1>"
	                    contenido += "<p>"+datos.Plot+"</p>"
	                    document.body.innerHTML = contenido;
	                } else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {
	                    console.error("ERROR! 404");
	                    console.info(JSON.parse(xmlHttp.responseText));
	                }
	            };
	
	            xmlHttp.open( "GET", cURL, true );
	            xmlHttp.send();
	}
	
	peticionAjax("Hackers");

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

	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");

3 - Crea una web que nos permita ver los detalles almacenados en IMBD de una pelicula partiendo únicamente del título Recursos: