I have a json file with data. I am trying to access it through ajax call. i am accessing the script in the https website. I am getting the following error.
Error: jQuery110204653455846038177_1518073501526 was not called
at Function.error (https://sitename/news/scripts/jquery-1.10.2.min.js?v=1:21:4112)
at l.jsonp.n.dataTypes.(anonymous function).n.converters.script json (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:17176)
at On (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:15599)
at k (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:13940)
at HTMLScriptElement.n.onload.n.onreadystatechange (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:16467).
If I use the same script in an http website, there is no issue.
$.ajax({
url: "data.json",
data: {},
dataType: 'jsonp',
success: function (e) {
alert();
},
error: function (e, l, s) {
console.log(s)
}
});
Use getJSON instead $.ajax with JSONP or change dataType from "jsonp" to "json". JSONP is a technique that allows you to transfer JSON data across multiple domains.
$.getJSON('/data.json',{}, function(data) {
console.log(data);
});
And here part of jQuery 1.2 documentation:
If you have problem with origins, you should modify serwer configuration. Add custom headers to .htaccess or modify server headers in a different way(apache virtual host configuration for example):
Header set Access-Control-Allow-Origin "http://localhost:80/"
After this modification you'll be able to download this file from external serwer.
Related
This question already has answers here:
Unexpected token colon JSON after jQuery.ajax#get
(2 answers)
Closed 7 years ago.
I am trying to get data with Ajax.
Data is json. I use jquery and angular.
But result is undefined or error.
Here is my jquery code:
$(document).ready(function() {
var url = "http://market.dota2.net/history/json/";
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
console.log(data);
}
});
});
In Angular i am usin jsonp method. Whats wrong ?
By the way, in pure Java i can get data from this url...
Whats wrong?
You're trying to call an endpoint that provides JSON as though it provided JSONP. That won't work; they are different (though related) formats.
Example JSON:
{"foo":"bar"}
Example JSONP:
callback({"foo":"bar"})
Note the difference: JSONP is actually a JavaScript function call, wrapped around the JSON.
If the API supports JSONP, call an endpoint that supports it.
If not, you can't query it directly unless the provider supports Cross-Origin Resource Sharing and shares with your origin, because of the Same Origin Policy that applies to ajax calls.
By the way, in pure Java i can get data from this url...
Because the Java code is not running in a context that is controlled by the SOP, and so can get the data from that endpoint (as JSON) and use it. This is also the same reason that just posting that URL into a browser address bar lets us see the data. But ajax calls are governed by tighter rules.
If you expect json, dont use jsonp but json.
$(document).ready(function() {
var url = "http://market.dota2.net/history/json/";
$.ajax({
type: 'GET',
url: url,
async: true, /* it fails with false */
contentType: "application/json",
dataType: 'json',/* <== here */
success: function(data) {
console.log(data);
}
});
});
Are you using jsonp consciously ? Do you know what it is ? If not, use json. Or get informed about JSonP: https://en.wikipedia.org/wiki/JSONP
I tried on Safari:works.
On Chrome & FFox: does not work + Erreur "Cross Domain Origin"
XMLHttpRequest cannot load http://market.dota2.net/history/json/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
That means you cannot get JSon with your client/machine from the API server. So you should indeed use JSonP, but... you miss the callback or something in the API documentation.
Im trying to accomplish SOAP-post to get back XML data.
Problem is that "No 'Access-Control-Allow-Origin' header" and I suppose that the server needs to add the header.
So I created a MockService in SOAPui and copied the server response. But I still get the same problem. In soapUI in the response I added this http://imgur.com/TZXM2Ca
function soap() {
var sr = MySoapRequest;
$.ajax({
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction", "x");
},
type: "POST",
dataType: "xml",
data: sr,
crossDomain: true,
success: function (data) {
console.log(data);
},
error: function (error) {
},
contentType: "text/xml; charset=\"utf-8\""
});
}
By default, browsers cannot make POST requests via AJAX to URLs which are not in the same origin as the current page. For example, if you have open a page that sits in the URL http://foo.com, and that page tries to post some data (via AJAX) to http://bar.com, you will normally get the error you are seeing now.
If you want to make this work, you have to configure your server to accept requests via Cross-Origin Resource Sharing (CORS). I suggest that you get some information about CORS, you can find a lot of documentation online about it. An extensive overview can be found here.
As for the actual implementation of CORS on your server, it depends on which platform you are using. If you are using PHP, have a look at this question.
I have been trying to load a JSON file from a cross-domain server. I've tried examples from stackoverflow and from the jQuery docs. I did get it working in a previous project, but now it strangely does not. The error returned from jQuery is unreadable to me. What can possibly go wrong here?
$(document).ready(function() {
console.log("Start loading");
$.ajax({
type: 'GET',
url: "http://www.nightoferror.nl/data/data.json",
dataType: 'jsonp',
crossDomain: true,
error: function(data) {
console.log('error', data);
},
success: function(data) {
console.log('success', data);
}
});
});
And the erratic JSFiddle here: http://jsfiddle.net/ZuyJV/4/
Content-Type:application/javascript
rather than Content-Type:application/json;
Could it be because your file is named .js, that Apache is serving the content type itself?
Try changing the file type, to JSON and setting up Apache to serve that filetype with the correct MimeType.
I found this using Fiddler - A HTTP Debugger.. open Fiddler(2), make your request in your browser and Fiddler2 then picks it up. From there, just checked the response for your file.
It looks like your server is returning the response as "Application/Javascript"
I'm trying to access a cross domain .js file using ajax:
$.ajax({
type:'get',
crossDomain:true,
url: "http://localhost/62588/scripts/bootStrapper.js",
contentType: "application/json",
dataType: 'jsonp'
}).done(callback);
I have a callback at the moment:
getBootStrapperScript(function (callback) {
//do somethibg
})
I get the following error:
XMLHttpRequest cannot load http://localhost/62588/scripts/bootStrapper.js. Origin http://localhost:62607 is not allowed by Access-Control-Allow-Origin.
I have been reading about JSONP but I'm not sure how to use it to load a .js file from anoather domain.
If I change the above code to use 'jsonp' for the datatype but I then get this errer:
GET http://localhost/62588/scripts/bootStrapper.js?callback=jQuery18206067646441515535_1354459693160&_=1354459696966 404 (Not Found)
How can I load cross domain js files?
Don't use any AJAX, simply use the $.getScript function:
$.getScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);
As you know, you could be pointing the <script> tag to any domain you wish without violating the same origin policy. That's the basis of JSONP. But you don't need any JSONP, because all you need is to reference a script form a remote domain, which is as simple as pointing the <script> tag to this script or if you want to do it dynamically use the $.getScript function that jQuery has to offer you.
UPDATE:
The $.getScript function will append a random cache busting parameter to the url. If you want to get a cached version of your script you could define a custom cachedScript function as shown in the documentation:
jQuery.cachedScript = function(url, options) {
options = $.extend(options || {}, {
dataType: 'script',
cache: true,
url: url
});
return jQuery.ajax(options);
};
and then:
$.cachedScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);
I have developed WCF rest service and deployed it on a link that can be accessed via the browser because its action is "GET".
I want to get that data using jQuery. I tried my best to get WCf get response using jQuery
but in vain. I also tried $.Ajax with 'jsonp' with no luck. Can any one help me?
The url is: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation
You can check that url response by pasting url in browser.
You need to set Access-Control-Allow-Origin to value [*] in your response header.
this blog gives the more details how it can be done in WCF REST service
if you were to do this in Web API you could have just added
Response.Headers.Add("Access-Control-Allow-Origin", "*")
calling the service using a fiddle
$(function() {
$.ajax({
url: "http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation",
datatype: 'json',
type : 'get',
success: function(data) {
debugger;
var obj = data;
}
});
});
I got the error
XMLHttpRequest cannot load
http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation.
Origin http://fiddle.jshell.net is not allowed by
Access-Control-Allow-Origin.
I can't make a cross domain example to show you but
$('#a').load('http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation?callback=run');
would work had those things been set.
Your service needs to either enable JSONP callbacks or set the Access-Control-Allow-Origin header for cross domain requests to work, or you need to run the script from the same domain. Given that your url says AndroidApp I'm thinking you want cross domain.
Sample code below:
$.ajax
(
{
type: 'GET',
url: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation,
cache: false,
async: true,
dataType: 'json',
success: function (response, type, xhr)
{
window.alert(response);
},
error: function (xhr)
{
window.alert('error: ' + xhr.statusText);
}
}
);