How do I know if a server has JSONP turned on? It is not my server, but I try to access some information from the rendered html.
Thanks in advance.
For most servers, you can make a request in your browser to whatever JSON page/service they have and just add a callback function in the URL, for example if it's this:
http://example.com/getJson?var=something
Add the callback query parameter, like this:
http://example.com/getJson?var=something&callback=myFunction
The response instead of this (it will look like this if it doesn't support JSONP):
{ "thing": "value" .... }
Should look like this (again, if it supports JSONP):
myFunction({ "thing": "value" .... });
The server has JSONP turned on if you can add callback to the URL:
http://example.com/api/get_info.js?callback=myfunc
and the server responds with your requested information in JSON-format, wrapped with your callback:
myfunc({
/* json formatted data goes here */
});
You read the API documentation for the web service that you are trying to access.
Related
what I need to do is read the content of a "public" google spreadsheet (by public I mean that I saved the sheet clicking on "File > Publish to the web", so it's accessible without the need to be logged in into a google account), and, why not, write something into it too.
googlin' around, I found that I can access the sheet and get the xml equivalent of the sheet content with something like
https://spreadsheets.google.com/feeds/list/<sheetCode>/od6/public/values
It works great if I load that url into a browser. But I need to find a "javascript-way" to get and handle the returned value, ie the xml (or json, but xml would be preferable).
I tried to use an ajax call, but I think there's something messy with the protocol.. I can't get the server response correctly.
$.ajax({
type: "GET",
url: "https://spreadsheets.google.com/feeds/list/<sheetCode>/od6/public/values",
success: function(data){alert("yeah");},
error: function(){alert("fail..");},
dataType:"xml",
});
I also tried to get the json instead of xml, adding "?alt=json" to the url and changing the datatype, but I still have the problem..
Any idea / suggestion?
Thanks in advance, best regards
You need to request with a JSONP call and you need to specifiy a callback - method. This can be done in jQuery using:
var url = 'https://spreadsheets.google.com/feeds/list/<CODE>/od6/public/values?alt=json-in-script&callback=?';
jQuery.getJSON(url).success(function(data) {
console.log(data);
}).error(function(message) {
console.error('error' + message);
}).complete(function() {
console.log('completed!');
});
Documentation and samples for google spreedsheets .
I am trying to pass parameters to the TinyPaste API. I have the following JQuery script in an HTML file,
$.post("http://tinypaste.com/api/create.json",
{
"paste": "This is test paste",
"title": "Test",
"is_code": 0,
"is_private": 1
},
function(data) {
console.log(data);
}
);
As seen in the Firefox's Web Console, I can see that the request is made and is successful (The content length of the response is as expected). But the callback function is not printing anything in the console window.
What am I doing wrong here?
Looks like you are making a request to another domain from your website and this violates the SAME ORIGIN POLICY of browers, you need to use JSONP to work around this..
you should write like this
$.post("http://tinypaste.com/api/create.json",
{
'paste': "This is test paste",
'title': "Test",
'is_code': 0,
'is_private': 1
},
function(data) {
console.log(data);
},
'jsonp'
);
You must send also a data type to server, means jsonp.
EDIT: POST does not work for cross domain USE $.getJSON instead
$.getJSON("http://tinypaste.com/api/create.json",
{
"paste": "This is test paste",
"title": "Test",
"is_code": 0,
"is_private": 1
},
function(data) {
console.log(data);
}
);
It is entirely possible the API does not serve JSONP, in which case you will need to resort to alternate methods
The major (and only) problem with the script posted in the question is that it is making a cross domain HTTP/POST request while on a normal webpage. I previously believed you were working on some browser extension, which if configured properly will allow you to have cross-domain requests. HTTP/POST will just not work in your case. Although there are hacks to get HTTP/GET working, like using the script tag, and JSONP.
In your case, what I suggest is let your server (which serves out your page) carry out the request for you.
The process will be:
You submit a request to the server with the parameters for tinypaste.
The server side script will do the HTTP/POST to tinypaste, and fetch the response. This response is sent across to the browser.
Browser gets the response. (and may be redirects or something)
Or as #charlietfl suggests, you could use YQL and Jquery
Hi I am trying to parser the json response of the url but i am not able to do it.
$(document).ready(function() {
$.getJSON('https://www.googleapis.com/oauth2/v1/userinfo?&access_token=xxxxxxxxxxxxx&token_type=Bearer&expires_in=3600', function(data) {
alert (c.email);
});
});
In this page there is my code http://pastie.org/3379735
I hope you can help me.
What is c.email, think you want data.email
$(document).ready(function() {
$.getJSON('https://www.googleapis.com/oauth2/v1/userinfo?&access_token=xxxxxxxxxxxxx&token_type=Bearer&expires_in=3600&callback=?', function(data) {
alert (data.email);
});
});
Update
as the OP has now stated after reading the documentation you need to provied the callback for jsonp as part of the path, not the params in the form of
https://oauth2-login-demo.appspot.com/oauthcallback?code={authorizationCode}
docs can be found here
Due to the same origin policy restriction you cannot send cross domain AJAX requests. There's no JSONP support for this so you cannot directly access his url from your code.
You may take a look at the following demo based on the gwt-oauth2.js script which uses this code to authenticate with Google.
I have the following code I am using to send data to a MailChimp Newsletter List (API v3). Everytime I remove the type: POST from the function it attempts to post the data via GET and it sends the data properly (ok response in MailChimp API dashboard). When testing this in the browser (FF) I get a .part file with "true" response.
$(function(){
$("a#test").click(function(e){
e.preventDefault()
data = {
"apikey" : "667378947",
"id" : "90298590285",
"email_address" : "test#getmoxied.net",
"output" : "json"
}
$.ajax({
type: "POST",
url: 'http://us2.api.mailchimp.com/1.3/?method=listSubscribe',
data: data,
success: function(data){
alert(data);
},
error: function(){
alert("err");
}
})
});
});
Im pulling my hair out on this one, any insight is greatly appreciated.
Thanks in advance,
JN
There is an undocumented endpoint that uses JSONP to do cross-domain ajax requests.
Just change 'post?' to 'post-json?' and add '&c=?' to the end of the standard url to get the JSONP endpoint. This doesn't requires the API key to be exposed on the client-side, or the creation of a server-side view.
I wrote a jQuery plugin that uses this method, if that's useful at all
https://github.com/scdoshi/jquery-ajaxchimp
The main issue is what jc commented on your original post - this simply won't work due to Same Origin Policy issues. Firebug is not as vocal about why the GET call fails, but that's why it returns no data. If you watch that with the POST, you'll see Firefox doesn't even make the call. Chrome's js console on the other hand straight explains the Same Origin policy to you.
All in all, this is a very good thing if for no other reason than it prevents you from publicly publishing your account's API Key, which is a very bad thing to do. If the reason why doesn't immediately sink in, go read through the large number of methods available in the API and then realize that all you need to access them is that API Key.
The correct way to do this is to POST data back to your server, then make the request from there. There are several fully built PHP examples (one using jquery, even), here.
e.preventDefault();
data = {
"apikey" : "667378947",
"id" : "90298590285",
"email_address" : "test#getmoxied.net",
"output" : "json"
};
Could be? Semicolon is important. Hehe
What would that code look like?
That other domain/server needs to support JSONP, which basically wraps the JSON in a callback.
In jQuery, the call would look like this:
$.getJSON(
'http://otherdomain.com/api/whatever?callback=?',
{ key: 'value', otherkey: true },
function(data){
//handle response
}
);
The actual response from the other server (if you looked at what was actually being sent) would look like this:
// With this url:
http://domain.com/api/method?callback=the_callback_function_name
// The response would look like this:
the_callback_function_name({ "json": "data here"});
The jQuery getJSON method automatically handles JSONP when you supply the extra callback=?. Just keep in mind some sites using different names like json_callback=?. The important part is that you include it as part of the URL and don't try to add callback: '?' to the data part of the getJSON function.
Only via JSONP. Whether you use jQuery or some other framework, it boils down to a script block like this:
<script type="text/javascript" src="http://path.to/your/javascript"></script>
The <script> block is immune from cross-domain restrictions. The caveat is that the service should support JSONP as well. If the script returns a JSON object like this:
{a: 0, b: 1}
The object will be evaluated but nothing happens. But JSONP services accept a callback function name something like this
<script type="text/javascript" src="http://path.to/your/javascript?callback=yourCallbackFunction"></script>
and wrap the data as a parameter to your callback like this:
yourCallbackFunction({a: 0, b: 1});
So that the function is called when the script is evaluated.
You can use JSONP. in jQuery, try getJSON: http://api.jquery.com/jQuery.getJSON/
Instead you should use a local proxy. Set up a asp.net/php page that will load the remote page on the back end and then use ajax to load the proxy page.