0

So let's say you're trying to do a jquery ajax request, something like:

$.ajax({
    ...
    url: http://other-website.com
    ...
})

I understand that because of the same-origin principle, this request will fail because the URL is an external domain.

However I've heard that GetJSON() does not obey this principle and can send asynchronous get requests to external servers using JSONP and an appended URL.

My question is: is it possible to use GetJSON() to retrieve all the HTML from an external name as a single string within a JSON object? If it doesn't do so by default, is there any way I can force / trick it into doing so?

UpQuark
  • 791
  • 1
  • 11
  • 35
  • 1
    That only works with JSONP, and then the external URL would have to actually output valid JSONP and not HTML, otherwise you're screwed. – adeneo Aug 19 '13 at 20:32
  • Yes, YQL will allow you to request html from an external domain as jsonp. Note however you will then have to extract the html from the returned jsonp. – Kevin B Aug 19 '13 at 20:41

3 Answers3

3

Yes, you can request html from a remote location, however you must use a proxy to do so. One publicly available proxy is YQL.

http://jsfiddle.net/BKJWu/

var query = 'SELECT * FROM html WHERE url="http://mattgemmell.com/2008/12/08/what-have-you-tried/" and xpath="//h1" and class="entry-title"';
var url = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&format=json&callback=??";


$.getJSON(url,function(data){
    alert(data.query.results.h1.content);
})

You could of course build your own on your server that returns plain html rather than json.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • Beautiful, wasn't even sure if this was possible. Thanks much. – UpQuark Aug 19 '13 at 23:34
  • So this is working excellently for me on JSFiddle, but for some reason when I try to use the same code in a button click event, it's not cooperating. – UpQuark Aug 20 '13 at 13:57
  • this code should work regardless of where you put it, what about it isn't working? no success callback firing? – Kevin B Aug 20 '13 at 14:04
  • Yeah. Not firing success callback. I tried taking it out of the event handler and just putting it in a – UpQuark Aug 20 '13 at 14:09
  • Are you including the `&callback=??` part of the url? and `format=json`? the only thing you can safely change from that url is the `query`. – Kevin B Aug 20 '13 at 14:12
  • When I paste the code from your fiddle into a new fiddle it also isn't working, so I'm guessing I'm just missing some sort of dependency? I'm inexperienced with JS so I haven't used JSFiddle before, so I must have missed something simple? Edit: I think my JQuery version is too old, I'll update and check again. For whatever reason the default Visual Studio version of Jquery when making a web project is 1.4.1 – UpQuark Aug 20 '13 at 14:13
  • Yep. Was just an old version of JQuery problem. Thanks. – UpQuark Aug 20 '13 at 14:20
1

The answer is no, you cannot trick it or force it to load html from an external source. GetJSON only works on servers that serve JSONP, and only valid JSON objects are able to be read.

Neil S
  • 2,304
  • 21
  • 28
0

You can retrieve any JSON object that you have access to with GetJSON. Here is an example with Razor an MVC Controller.

jQuery Code

$(function () {
            $.getJSON('@Url.Action("GetColorsJson", "Json")', function (jsonData) {
                var css = new customContentJs.css.apply(jsonData);
            });
        });

Controller Code

using System.Web.Mvc;
using DAL;
using Newtonsoft.Json;

    public class JsonController : Controller
    {
        private readonly CustomContentContext _db = new CustomContentContext();

        /// <summary>
        /// Return a json serialized object of user saved colors
        /// </summary>
        /// <returns></returns>
        public string GetColorsJson()
        {
            return JsonConvert.SerializeObject(_db.Site.Include("Colors"));
        }
    }
JabberwockyDecompiler
  • 3,318
  • 2
  • 42
  • 54