Saltar al contenido principal

Práctica 103. AJAX

Nesta práctica imos centrarnos en como funciona AJAX e, como facendo peticións HTTP sen recargar a páxina, podes obter unha maior interactibilidade na web.

Requisitos​

Apartado 1​

Realiza os seguintes pasos:

  • Abre unha ventá privada de Firefox.
  • Pulsa F12 para abrir as Herramientas para desarrolladores e vaite a lapela de Red.
  • Pon na barra de direccións a URL openweathermap.org. Acepta as cookies e volve recargar a páxina.
  • Limpa as chamadas HTTP nas Herramientas para desarrolladores ata que non quede ningunha.
  • No campo do formulario co texto Search city escribe Santiago de Compostela e preme no botón Search. Non fagas ningunha outra acción na web.

Como podes observar realizáronse chamadas HTTP sen necesidade de recargala páxina (é dicir, utilizouse AJAX para facer unha chamada a unha API-REST). Selecciona a primeira chamada HTTP.

Apartado 2​

Selecciona cabeceira da petición e activa a opción Sin procesar. Realiza unha captura.

Contesta ás seguintes cuestións coa información do paso anterior:

  • Cal é o método da chamada HTTP?
  • Cal é o pathda chamada HTTP?
  • Cal sería a URL completa da chamada HTTP (debes de unir o host e path)?
  • Que indica o campo Sec-Fetch-Mode?

Apartado 3​

Selecciona cabeceira da resposta e activa a opción Sin procesar. Realiza unha captura.

Contesta as seguintes cuestións coa información do paso anterior:

  • Cal é o código da reposta HTTP?
  • Que tipo de contido MIME se envía no corpo da resposta?

Apartado 4​

Realiza os seguintes pasos:

  • Preme na lapela Resposta e activa a opción Sen procesar. Realiza unha captura.
  • No menú das Herramientas para desarrolladores pulsa agora en Inspector.

Podes pasar por encima das etiquetas e verás a parte da web que engloba ditas etiquetas. Navega polo código HTML ata que atopes a etiqueta que engloba a información do tempo seguinte:

Unha vez detectada, abre as etiquetas necesarias para que se poida ver a información da cidade e a temperatura actual. Realiza unha captura desa parte do HTML.

Agora pulsa nun dos resultados da busca de Santiago de Compostela. Observa como se modifica o contido utilizando AJAX. Realiza unha captura co código HTML modificado.