having issues getting my jsonp to work with my client backbone script,pagenator keep gettgin invalid key error
having looked around people say its to to do with my service not return jsonp.
For example SyntaxError: invalid label, i've written a mvc4 web api service this is what it returns does it look right and also is there anything i need to add to my api to support jsonp ?
{
"odata.metadata":"http://test.test.uk/api/odata/$metadata#lnews","value":[
{
"ID":1,"title":"This is a test news artical","mainContent":"<p>\r\n\tthis is a test article</p>\r\n","featured":1,"visiblehomepage":1,"thedatetime":"2013-08-05T10:36:05.98","expireon":"2013-08-15T00:00:00","category":17,"embargo":null,"embargotime":"PT0S","embargodate":null,"customthumbnail":null,"news_layout":3,"LNBE":0,"LNBN":0,"LNBS":0,"LNBW":0,"LNWV":0,"LNWS":1,"LNDY":0,"LNSW":0,"LNSH":0,"LNCV":0
},{
"ID":2,"title":"This is a test article","mainContent":"<p>\r\n\twelcome to the best site in the world</p>\r\n","featured":1,"homepage":1,"thedatetime":"2013-08-05T10:42:54.763","expireon":"2013-08-22T00:00:00","category":null,"embargo":null,"embargotime":"PT0S","embargodate":null,"customthumbnail":"Water lilies.jpg","news_layout":4,"LNBE":1,"LNBN":1,"LNBS":1,"ff":1,"LNWV":1,"LNWS":1,"LNDY":1,"LNSW":1,"LNSH":1,"LNCV":1
}
]
}
Here is a JSONP URL:
http://odata.netflix.com/v2/Catalog/Genres?$format=json&$callback=?
Here is a diagram:
CLIENT SERVER
------ ------
Makes URL request Looks up function matching this URL param ($callback)
Executes asynchonously If found, executes function asynchonously
Returns from callback Returns data from server side as a function, or error
References
Learn By Example Guide for Select State.gov Data (SSD): JSONP
Related
I have this simple page that just needs to show contents that is loaded from an external url (ajax request, response in json format)
I should say I'm a AngularJS newbie.
I've googled a bunch and found different ways of doing this and couldn't manage to determine which is the correct/simple/up-to-date way to achieve this.
My 2 challenges -
Making the AJAX request run on startup (I can load the page before that happens and just load the contents one the ajax request finishes. Maybe show a 'Loading..' indicator)
Doing a ajax request correctly.
Here is my attempt. I know that the ajax request is never made because its not setup correctly.
You are getting into .error function:
http://jsbin.com/oDUsuVA/3/edit
For jsonp your response should be something like:
callback([
{
"title":"License Title 1",
"licenseUrl":"http://cnn.com",
"licenseText": " test"
}]);
Edit:
You can simply do .get() request too, but if you had to use jsonp request interface, you would have to correct response.
A Jsonp request always wraps the logic into a json callback wrapper function.
I just did $http.get instead of your $http.jsonp and it did work for me.
Please excuse my bad english, I'm french ;)
SO, I've to make an Ajax call you this kind of url :
http://maps.googleapis.com/maps/api/geocode/json?latlng=45.85941212790755,0&sensor=true
With this code :
$.ajax({ url:'http://maps.googleapis.com/maps/api/geocode/json?latlng='+pos.coords.latitude+','+pos.coords.longitude+'&sensor=true',
success: function(results){
// ...
}
});
But it never succeeds for IE8 (It's ok for chrome and FF, IE9&10).
Have you got an idea ?
EDIT
My bad, in IE8 you cannot request a geocode from the client side any longer because google has removed JSONP support from their geocoder.
You can do one of two things
Use your own server as a proxy (I do this).
This basically means that you make a request to a script on your own server that uses cURL (or similar) to make a request to the google geocoder and then return the results back to you.
If you're using the google maps api, you have the option of using it's built-in geocoder (https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple)
OLD REPLY
It's a cross domain call in IE8 - you'll get a No Transport error (or if you add jQuery.support.cors = true you'll still get an Access is Denied error.
Best solutions is to use JSONP. jQuery makes using JSONP trivial.
Check out this jQuery Docs page and scroll down to their example using JSONP with the Flickr API.
I am trying to write a browser-based Javascript client for a ReST application which responds with XML (so it seems JSONP is out of the questions).
I am trying to retrieve the data using dojo.io.script.get but the parameter that is passed to the callback function is an object from which it seems I cannot retrieve the XML data of the response.
dojo.io.script.get({url:"http://enterpriseapp.enterprisedomain/path/to/rest/collection",
load:function (data) {
// 'data' does not contain the actual response (which is XML)
}
});
What is the correct way to retrieve this data?
The dojo.io.script.get method will inject a <script> from the specified web address. The data content from this script will be passed to your load function; hence, the content must validate as Javascript. You can't load XML into a script tag.
If you want to load XML, you'll need to use dojo.xhrGet; however, this will not allow requests to 3rd party urls. The advantage of using dojo.io.script.get is that you can use different origin address' than the page loading them.
dojo.xhrGet({
handleAs: "xml",
load: function(dom){
// do something with the DOM XML object
},
error: function(error){
}
});
See: dojo.xhrGet Documentation
If you are trying to load the XML from another website it's a bit of a dead-end. You can use the Access-Control-Allow-Origin header if you have access to the sending server.
Another solution that I have used is to write a proxy script (in PHP or other server language) to mirror the XML on the correct domain. You'll need to be careful if you do this to include good checks so that your server code is not abused by someone for proxying.
See the following Stackoverflow conversation for more about Access-Control-Allow-Origin:
jQuery XML REST Access-Control-Allow-Origin
I'm new to backbone.js and I've read other solutions to similar problems but still can't get my example to work. I have a basic rails api that is returning some JSON from the url below and I am trying to access in through a backbone.js front end. Since they are one different servers I think I need to use a 'jsonp' request. I'm currently doing this by overriding the sync function in my backbone collection.
Api url:
http://guarded-wave-4073.herokuapp.com/api/v1/plans.json
sync: function(method, model, options) {
options.timeout = 10000;
options.dataType = 'jsonp';
options.url = 'http://guarded-wave-4073.herokuapp.com/api/v1/plans.json'
return Backbone.sync(method, model, options);
}
To test this I create a new 'plans' collection in my chrome console using "plans = new Plans()" and then "plans.fetch()" to try and get the JSON.
When I call plans.models afterwards I still have an empty array and the object that returns from plans.fetch() doesn't seem to have any json data included.
Any ideas where I'm going wrong?
I have had the same problem before. You should not have to override your sync method.
Taken from Stackoverflow Answer
"The JSONP technique uses a completely different mechanism for issuing HTTP requests to a server and acting on the response. It requires cooperating code in the client page and on the server. The server must have a URL that responds to HTTP "GET" requests with a block of JSON wrapped in a function call. Thus, you can't just do JSONP transactions to any old server; it must be a server that explicitly provides the functionality."
Are you sure your server abides to the above? Test with another compatible jsonp service (Twitter) to see if you receive results?
Have you tried overriding the fetch method as well?
You should add ?callback=? to your api url in order to enable jsonp
Here is my situation:
Im creating a widget that site admins can embed in their site and the data are stored in my server. So the script basically has to make an ajax request to a php file in my server to update the database. Right? Right :)
The ajax request works excellent when i run it in my local server but it does not work when the php file is on my ONLINE server.
This is the code im using:
var url = "http://www.mydomain.net/ajax_php.php";
var params = "com=ins&id=1&mail=mymail#site.net";
http.async = true;
http.open("POST", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
//do my things here
alert( http.responseText );
}
}
http.send(params);
In firebug it shows: http://www.mydomain.net/ajax_php.php 200 OK X 600ms.
When i check the ajax responnseText I always get a Status:0
Now my question is: "Can i do cross-domain ajax requests by default? Might this be a cross-domain ajax problem? Since it works when the requested file resides in my local server but DOESN'T work when the requested file is in another server, im thinking ajax requests to another remote server might be denied? Can you help me clear on this?
Thanks..
Cross-domain requests are not directly allowed. However, there is a commonly-used technique called JSONP that will allow you to avoid this restriction through the use of script tags. Basically, you create a callback function with a known name:
function receiveData(data) {
// ...
}
And then your server wraps JSON data in a function call, like this:
receiveData({"the": "data"});
And you "call" the cross-domain server by adding a script tag to your page. jQuery elegantly wraps all of this up in its ajax function.
Another technique that I've had to use at times is cross-document communication through iframes. You can have one window talk to another, even cross-domain, in a restricted manner through postMessage. Note that only recent browsers have this functionality, so that option is not viable in all cases without resorting to hackery.
You're going to need to have your response sent back to your client via a JSONP call.
What you'll need to do is to have your request for data wrapped in a script tag. Your server will respond with your data wrapped in a function call. By downloading the script as an external resource, your browser will execute the script (just like adding a reference to an external JS file like jQuery) and pass the data to a known JS method. Your JS method will then take the data and do whatever you need to do with it.
Lots of steps involved. Using a library like jQuery provides a lot of support for this.
Hope this helps.