Как использовать file_get_contents и json_decode в Javascript

Question

Я пытаюсь использовать этот PHP API в Javascript. Как я могу использовать file_get_contents и json_decode в Javascript?

PHP API код

$content=@file_get_contents("http://doma.in/api/?url=http://www.google.com&api=APIKEY"); 
$url=json_decode($content,TRUE);//Decodes json into an array 

if(!$url["error"]){ // If there is no error 
echo $url["short"]; //Outputs the short url 
}else{ 
echo $url["msg"]; //Outputs the error message 
} 

Javascript

(function($) { 
    $(document).ready(function() { 
    var url = window.location.href; 
    var host = window.location.hostname; 
    var title = $('title').text(); 
    title = escape(title); 

    var twitter = 'http://twitter.com/home?status='+title+'%20'+url; 
    var facebook = 'http://www.facebook.com/sharer.php?u='+url; 

    var tbar = '<div id="sicons">'; 
    tbar += '<a href="'+twitter+'" id="twitter" title="Share on twitter">Twitter</a>'; 
    tbar += '<a href="'+facebook+'" id="facebook" title="Share on Facebook">Facebook</a>'; 
    tbar += '</div>'; 

    }); 
})(jQuery); 

Edit: Благодаря ответам

data.php

$content = @file_get_contents('http://doma.in/api.php?api=asd4sdf5634d&url=' . urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'])); 
echo $content; 

Я добавил это к Вершине Javascript

$.getJSON('data.php', function(data) { 
    if(!data.error){ // If there is no error 
    alert(data.short) //Outputs the short url 
    }else{ 
    alert(data.msg) 
    } 
}); 

The Javascript теперь смотрит как этот

(function($) { 
    $(document).ready(function() { 
    var shorturl = data.short; 
    var title = $('title').text(); 
    title = escape(title); 

    var twitter = 'http://twitter.com/home?status='+title+'%20'+url; 
    var facebook = 'http://www.facebook.com/sharer.php?u='+url; 

    var tbar = '<div id="sicons">'; 
    tbar += '<a href="'+twitter+'" id="twitter" title="Share on twitter">Twitter</a>'; 
    tbar += '<a href="'+facebook+'" id="facebook" title="Share on Facebook">Facebook</a>'; 
    tbar += '</div>'; 

    }); 
})(jQuery); 

Я уверен, что я делаю что-то неправильно. Извините, но я новичок в Coding (C, C++)

Answer 1

Загрузка данных через AJAX составляет асинхронный. Ваш первый вызов ($.getJSON) выполняется, как только страница загружается, но функция обратного вызова, передаваемая в качестве параметра, выполняется только после завершения основного HTTP-запроса. Это означает, что ваша программа не блокирует, чтобы дождаться HTTP-запроса; после вызова $.getJSON(...) ваша программа запускается, и метод обратного вызова вызывается в то время, когда HTTP-запрос завершен.

Вы оцениваете свои данные (во второй функции), как только загружается страница. Но, поскольку ваши данные загружаются асинхронно, они еще не загружены, когда документ визуализируется и ваша функция выполняется.

Решение вашей проблемы будет переместить код, который оценивает ваши данные в функцию обратного вызова $.getJSON(...):

$.getJSON('data.php', function(data) { 
    if (!data.error) { 
     // Process your data here! 
    } else { 
     alert(data.msg) 
    } 
});