Come fare una chiamata jQuery GET verso URL remota Come fare una chiamata jQuery GET verso URL remota



In questa guida andremo ad analizzare come utilizzare Ajax jQuery per effettuare una chiamata GET su URL esterna al sito (nell'esempio che segue il sito remoto che andremo a chiamare si da per scontato che sia sempre di nostra proprietà, in caso contrario spesso vengono rese disponibili apposite API).

Il problema che sorge in questi casi, è che si ottiene un errore di cross-domain (relativo a Access-Control-Allow-Origin) che occorre aggirare aggiungendo alla chiamata il parametro dataType: 'jsonp'.

PAGINA HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Pagina con chiamata jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

<body>
	<span class="pulsante" id="chiamataGet">Estrapola articoli jquery</span>
	
	<div id="result"></div>
	
	<script>
	$(document).ready(function(){
	  $('#chiamataGet').click(function(){
		$.ajax({
		  url: 'https://www.dominio.ext/script.php?termine=jquery',
		  type: 'GET',
		  jsonp: "callback",
		  dataType: 'jsonp',
		  success: function(responseJson){
			var risultati = responseJson;
			$.each(risultati,function(key,val){
			  $('#result').append('<div>'+val+'</div>');
			});
		  }
		});
	  });
	});
	</script>
</body>
</html>

Durante la chiamata GET Ajax di tipo jsonp, jQuery aggiunge un parametro alla fine della nostra URL con nome "callback" (perchè abbiamo specificato anche il parametro jsonp:"callback") è importante che nella pagina di destinazione andiamo a leggere questo parametro e che ci ritorni come parte della risposta, in questo modo:

SCRIPT.PHP SUL SERVER REMOTO:

<?php
/*
ATTENZIONE: Questo è solo un esempio per mostrare il 
funzionamento del GET AJAX JQUERY SU SERVER ESTERNO, 
in un codice reale il tutto potrà essere gestito in 
maniera più sicura con maggiori controlli
*/

# impostiamo il corretto header, jsonp è di tipo application / javascript
header('Content-Type: application/javascript');

include("connection.php");

/*
in questo esempio mettiamo che vogliamo andare a 
selezionare dal DB tutti i nomi degli articoli che 
contengono il termine jQuery nel titolo
*/

$termineRicerca = $_GET['termine']; // contiene "jquery"

$resp = mysql_query("SELECT id,titolo FROM blog WHERE titolo LIKE '%termineRicerca%'");

$arr_articoliTrovati = array();

while($articolo = mysql_fetch_assoc($resp)){
  array_push($arr_articoliTrovati,$articolo['id'].' - '.$articolo['nome'])
}

/*
questa è il passaggio più importante, qui ripassiamo 
la callback di jQuery e incapsuliamo il nostro array come json
*/

echo $_GET['callback']."(".json_encode($arr_articoliTrovati).")";
?>

RISULTATO:

1 - Chiamata AJAX con jQuery
2 - Come effettuare un GET con jQuery
3 - Istruzioni per effettuare una chiamata GET jQuery su URL esterna
4 - jQuery AJAX su server remoto

Spero che questa guida possa aiutarvi ad evitare ore di ricerche su Google alla ricerca della soluzione.

Se avete anche voi consigli su come migliorare l'approccio commentate sotto questo articolo.

Alla prossima!

Valuta questo articolo

Articoli correlati


Commenti