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"
Related
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.
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 am trying to make a $.ajax call but get a different result on different server.
In my js file, I have the following code
function getData () {
$.ajax({
async: false,
type:'GET',
contentType: "application/json",
url: 'sample.json',
dataType: 'json',
success:function(result){
alert("successful");
},
error: function (xhr, status) {
alert("failed");
}
});
}
The js file is included in an HTML file where there is a button with its onclick method as getData().
My problem is, it will pop up a "failed" alert window if I open the html file in IE or Chrome, but a "successful" window if I open the html in Firefox.
Solved:
I had the problem when trying to run that function from a local html file instead of on a server. And running on server solves the problem.
This is a security measure in browsers which prevents access to the file system. Firefox just has a different security measure that allows file access. Use a webserver and you won't run into this issue.
I am having trouble with the google app engine blob store. I am running in the development environment (ie local on my machine.)
Heres what i am doing...
once the form pops up i call into a servlet to generate the URL like this
String url = blobstoreService.createUploadUrl("test/joi");
once i have that i save it in my java scrip and then once the user submits the form i am doing this
$.ajax({ url: self.url,
type: "POST",
//crossDomain: true,
dataType: "jsonp",
//dataType: "multipart/form-data",
success:
function(response, textStatus, jqXHR)
{
alert("saved.");
}
});
}
however, when i do that i get the following exception
GET 405 (HTTP method GET is not supported by this URL) jquery.js:4
i am really struggling with this and any help would be greatly appreciated!
Apart from any other issues, the blobstore expects file uploads in multipart form format; you're attempting to post to it using jquery. If you want to do the post in javascript, you will need to format the body of the POST request appropriately.
I am having a very strange issue with Chrome and AJAX, I have an autocomplete form that has been working for a while. I fired up Visual Studio this morning and it doesn't work anymore. It works fine in production (with Chrome) and works fine locally if I use Firefox or IE, for chrome it doesn't!
I get the error:
Failed to load resource
in Developer tools, When I expand on the error I get:
f.support.ajax.f.ajaxTransport.sendjquery-1.7.1.min.js:4
f.extend.ajaxjquery-1.7.1.min.js:4
$.autocomplete.sourceCreate:217
a.widget._searchjquery-ui-1.8.17.custom.min.js:127
a.widget.searchjquery-ui-1.8.17.custom.min.js:127
(anonymous function)jquery-ui-1.8.17.custom.min.js:127
I placed a breakpoint in the callback function on the server but it doesn't even make it to the server. The error is definitely on the client side, here is the client-side code:
$("#LocationTxt").autocomplete({
minLength: 4,
source: function (req, resp) {
$.ajax({
type: "GET",
url: "/Ad/SearchLocations",
data: "term=" + req.term,
contentType: "application/json; charset=utf-8",
success: function (data) {
resp($.map(data, function (value, key) {
return { data: value, label: data[key].Name, value: data[key].Name };
}));
},
error: function (data) {
alert(data.statusText);
}
});
},
select: function (e, ui) {
var cityId = ui.item.data.Id;
$('#AdListing_LocationID').val(cityId);
}
});
Also the error event gets triggered, and the statusText property is simply "error". Not very helpful. I am running Chrome version: 17.0.963.46 (I have the latest version as on 2/9/2012). I believe my Chrome updated this morning when I fired up my PC, but I am not sure. Is there a log to tell when my chrome was updated?
If you are working on a local copy of the code, make sure you are working from within a web-server such as localhost. If you are working directly from the file system, google chrome will not allow you to make ajax requests to files on the file system for security reasons.
A few more things...
Remove this:
contentType: "application/json; charset=utf-8",
You aren't sending json, you are sending a GET request. Instead, add this
dataType: "json",
so that jQuery expects to receive json.
It also may help to have your server return headers setting the contentType to application/json with the proper charset utf-8.