Ao criar o artigo Retornar JSON com ASP.NET/C# e o artigo Calcular distância entre dois endereços – Google Maps API enfrentei algumas dificuldades para usar Ajax com URL externa.
Devido à política de mesma origem, linguagens client-side, como o JavaScript só podem fazer chamadas para o mesmo domínio.
Se fizer uma chamada AJAX para outro domínio, ou então para seu próprio domínio, mas com uma porta diferente, HTTPS ou para um subdomínio, a chamada Ajax vai falhar.
Então como chamar url externa usando jQuery?
Bom, para resolver este problema vamos usar o JSONP (jQuery.getJSON()), que vai fazer as solicitações entre os domínios.
JSONP ou "JSON with padding" é um complemento ao formato de dados JSON. Ele provê um método para enviar requisições de dados de um servidor para um domínio diferente, uma coisa proibida pelos navegadores típicos.
Exemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.1.js" type="text/javascript"></script>
<script type="text/javascript">
function pegaJSONExterno() {
$.getJSON("http://maps.googleapis.com/maps/api/distancematrix/json?origins=Porto%20Alegre&destinations=Sao%20Paulo&mode=driving&language=pt-BR&sensor=false",
function (data) {
//Status - pegar valor no primeiro nível
if (data.status == "OK") {
if (data.rows[0].elements[0].status != "OK")
//Status atual (pegar valor em vários níveis)
alert(data.rows[0].elements[0].status);
else {
//JSONP - pegar valor em vários níveis
alert(data.rows[0].elements[0].distance.text);
}
}
}
)
.success(function() { alert("Sucesso"); })
.error(function() { alert("Erro"); })
.complete(function() { alert("Completo"); });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Testar" onclick="pegaJSONExterno()" />
</div>
</form>
</body>
</html>