calling a MVC 3 Apicontroller from another website

I have a mvc 3 api controller in my project

namespace Carabistouille.Controllers
{
    public class CarabistouilleController : ApiController
    {
        /// <summary>
        /// Method to retrieve all of the carabistouille in the catalog.
        /// Example: GET api/carabistouille
        /// </summary>
        [HttpGet]
        public HttpResponseMessage Get()
        {
            IEnumerable<Carabistouille.DB.Carabistouille> list = Carabistouille.DB.CarabistouilleDAL.GetAllCarabistouille();
            if (list != null)
            {
                return   Request.CreateResponse<IEnumerable<Carabistouille.DB.Carabistouille>>(HttpStatusCode.OK, list);
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.NotFound);
            }
        }
    }
}

and I want other website to be able to query that api to get the data so i do something like this :

        $("#query_results").empty();
        $("#query_results").append('<table id="ResultsTable" class="BooksTable"><tr><th>Description</th><th>Auteur</th><th>Date</th></tr>');
        $.ajax({
            type: "get",
            contentType: "application/json; charset=utf-8",     

            url: "http://ift.tt/1PthdbV",
            success: function(msg) {
                    var c = eval(msg.d);
                    for (var i in c) {
                            $("#ResultsTable tr:last").after("<tr><td>" + c.Description + "</td><td>" + c.Auteur + "</td><td>" + c.Date + "</td></tr>");
                        }
                }
        });

Well all i get is :

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

here is my project architecture

what am i missing ?