Error en traer datos con JSON

[zreep]

Hola estoy probando un tutorial en el cual desde html y por medio de ajax, creo, trea la info de un php que esta alojado en mi servidor.

http://projects.previant.com.ar/JSON/traer.php

Primero cuando pruebo esta url, me da los siguientes errores y el codigo es este:

Código PHP:

  $datos= array(); 
 
while ($obj = mysql_fetch_object($sql)) { 
    $datos[] = array('Id' => $obj->Id, 'Nombre' => $obj->Nombre, 'Apellido' => $obj->Apellido,); 
} 
 
echo '' . json_encode($datos) . ''; 
mysql_close($servidor); 
 
header('Content-type: application/json'); 
header("Access-Control-Allow-Origin: *");  
   

y en el html el codigo es este:

Código HTML:

<script type="text/javascript">

		var dato1="";
		var dato2="";
		var dato3="";

		function traer() {
			$.getJSON('http://projects.previant.com.ar/JSON/traer.php',
				
				function(data){
					dato1=data[0].Id;
					dato2=data[0].Nombre;
					dato3=data[0].Apellido;

				 			 }
				  );
		}
		function mostrar() {
			$("#dato-1").text(dato1);
			$("#dato-2").text(dato2);
			$("#dato-3").text(dato3);
		}
	
	
	</script>


<input class="btn btn-default" type="button" name="" value="Traer datos" onclick="traer()">
<input class="btn btn-default" type="button" name="" value="Mostrar datos" onclick="mostrar()">
		<h3 id="dato-1">DATO 1</h3>
		<h3 id="dato-2">DATO 2</h3>
		<h3 id="dato-3">DATO 3</h3> 

De forma local funciona perfecto, pero cuando reemplaso el "$.getJSON" no funciona.

Espero me ayuden, gracias!