I need to scrape/parse some info from an external XML file (xml hosted on other domain) and place that info on my site.
I tried this, and didn't succeed:
jQuery(document).ready(function()
{
jQuery.ajax({
type: 'GET',
url: 'http://42netmedia.com/smart/signal_onAir10.xml',
crossDomain: true,
dataType: 'jsonp',
success: parseXml
});
});
function parseXml(xml)
{
jQuery(xml).find('nowOnAirTitle').each(function()
{
jQuery(".my-site-element").append(jQuery(this).find('nowOnAirTitle').text());
});
}
I hope I managed to explain properly.
PS. I am using jQuery because my site is hosted on WordPress
The short answer is that you cannot do what you're trying to do from Javascript running in a browser.
The same origin policy will block AJAX requests for URLs on different domains. There are a couple of exceptions to this policy:
If the target server supports CORS, it can indicate that cross-origin requests are OK. The URL you are trying to reach is on a server that does not support CORS.
If the target server supports JSONP, your script can retrieve data from the target server by using a <script> tag in your page with a src attribute pointing to the target URL and including a callback parameter to tell the server to wrap the data in a javascript function that returns the data. The URL you are trying to reach is on a server that does not support JSONP.
Yes, jQuery does allow you to make a JSONP request across to the other domain, but the response is not Javascript but XML. Your browser is trying to execute the XML as if it was Javascript and fails with a syntax error.
Any solution to this will require server-side support on the server which hosts your code. You could set up a proxy URL on your web server, but you'd need to do that very carefully because you don't want your server to be used as an open proxy. You could also use a cron job to grab the URL using curl and save it to a static file on your server, but that's probably a bit rude.
Related
I'd like to embed a slideshare iframe based on its URL. http://www.slideshare.net/developers/oembed says I should be able to get a JSON object about the resource and within that is the embed code to use. E.g. if I open
Reference Link
in the browser, I get JSON. If I open the same via jquery
$.getJSON('http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/lyndadotcom/code-drivesworld12&format=json', function (obj) { console.log(obj) });
then I get
XMLHttpRequest cannot load http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/lyndadotcom/code-drivesworld12&format=json&callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ideally I'd like to also control slideshare from an external link - which this page - http://www.slideshare.net/developers - says is possible if you follow the SlideShare Player API - which is a 404 page.
Googling for slideshare developer just links me to many shared slideshows, not actual help that exists or works ... grrr
When you try to load JSON from another domain, it fails because there is a domain boundary you can not cross.To avoid this, you have to use JSON with Padding. JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy. Try this following code mate.Hope this might help you. :)
$.ajax({
type: "GET",
url: 'http://www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/lyndadotcom/code-drivesworld12&format=jsonp',
dataType: 'jsonp',
success: function (data) {
$('.dynamic').html(data.html);
}
});
Fiddle here
I'm trying to get data from an API with javascript but i'm getting an error on the request.
$.ajax({
dataType: "jsonp",
url: "https://www.bitstamp.net/api/ticker/",
type: "GET",
succes: myfunction
});
result:
{"error": "GET parameters not allowed for this request."}
I use Jsonp because its another domain.
Why can't I get the data with Jquery?
If I just browse to the link I can see the Json.
I just tried getting data from the url you provided using AJAX. The server did not return any data using the $.ajax and this clearly shows that the server does not support cross domain requests. That is why I asked you if you had access to code because you have to manually specify if you want API to support cross domain requests.
One way around to this is using some server side language to access this API. I once had similar problem and the used PHP CURL to access the API. The php code then served data to JQuery to be used on frontend. So you can write relay code to solve this problem.
Because, as the error message says, bitstamp do not allow it.
If they get a JSONP request for the data, they respond with the error instead of the normal response.
I am really getting confused. If I post into a browser the following link, it works, no problem, but when I ask jQuery do to it, it comes back blank, but no error.
Link:
http://www.theyworkforyou.com/api/getConstituency?key=FU8MWTEQnvVsHC6GM7B82zie&postcode=BS345NT
Code:
$.ajax({
url: 'http://www.theyworkforyou.com/api/getConstituency?key=FU8MWTEQnvVsHC6GM7B82zie&postcode='+postcode+'&output=js',
type: 'POST',
success: function(response) {
console.log(response);
}
});
I can change the Key, so don't worry about the fact I posted it.
Any ideas why it's not working?
Your javascript is running in the context of a web page downloaded from an origin server into a browser. It tries to request a page from a different server, but this is a violation of the same origin policy. Javascript cannot make requests to servers other than the origin server.
The JSONP technique can be used to get around this, but only if the non-origin server supports it. In this technique the javascript code dynamically creates a script tag whose src element 1) points to the non-origin server, and 2) passes (as a query parameter) the name of a function which exists in the local javascript. The non-origin server returns the source code of a script which merely invokes the function on data provided by the non-origin server. In this way the javascript can request data from a non-origin server.
If the non-origin server does not support JSONP, then you won't be able to do what you want.
I'm working on an application which use ajax call to get html from the server.
When I run it on the server, everything works fine.
But when I'm running on a localhost, I've a 'Access-Control-Allow-Origin' error.
I looked arround and it seems like using jsonp could be the solution.
So, my ajax call looks like that:
$.ajax({
url: url,
dataType: 'jsonp',
crossDomain: true,
type: 'GET',
success: function(data){
// should put the data in a div
},
error: function(){
//do some stuff with errors
}
});
I get html from the server, but I always have this error:
Uncaught SyntaxError: Unexpected token <
Is there a way to wrap the jsonp response in html?
Thanks!
You can't use JSONP to grab an HTML document. You need to wrap your HTML in a JavaScript variable. JSONP has some very specific requirements to make it work properly, including a callback function/attribute. If you're not in control of the server hosting the target page, you won't be able to make it work. This is a security precaution to prevent a random page from being able to steal your personal information from sites you're logged into via an AJAX call.
UPDATE
I read your question more thoroughly. It sounds like your problem is that you're in a development environment that doesn't have the resource in question. JSONP isn't the answer because it's a lot of trouble to get running just to make your page work in development. You should create a local copy of the target HTML and grab it using a relative or server-absolute URL such as "/the/page/i/need.html" instead of "http://myserver.com/the/page/i/need.html"
If you want to get the data by jsonp, then the server side need to support jsonp.
There is no way just change the dataType to get the data.
If the server side doesn't support jsonp, then you need to make a proxy in your localhost.
I have one server located at example.com running apache, serving my static html files.
I also have a json service located at api.example.com running python with cherrypy.
The user requests example.com and get the index html page. On that page I make an ajax request with jquery to the json service. document.domain returns example.com
$.ajax({
type: 'GET',
url: 'http://api.example.com/resource/',
dataType: 'json',
success: successCallback,
error: errorHandler
});
However, I can't see the response body for the ajax request in firebug. This leads me to believe that the browser (FF) doesn't support this.
What are the best methods to achieve this? I would prefer not to use any proxying on the apache backend for example.com if possible.
You can also use JSONP by adding callback=? to the end of the url. jQuery already knows how to handle these type of requests but it does require some server side changes to handle the callback param.
AJAX request is only supported on the same domain. However, you can write an http proxy in your preferred scripting language and make calls to that http proxy. You can check out this little tutorial on an AJAX proxy written in php.
try changing your domain in your sub-domain, like this
<script type="text/javascript">
document.domain = 'example.com';
</script>
if does not work, change your document.domain in your domain page too.
As far as I know, you can't do AJAX cross-domain.
Why is cross-domain Ajax a security concern?
Though I guess you could do an IFRAME workaround
Cross Sub Domain Javascript
Use document.domain to make the domain be the top level domain instead of the subdomain.
document.domain="example.com"
This is described in detail on MDN.