5

I am trying to implement the Google URL shortener API with the help of jQuery by making an AJAX call. I have done something like this:

$(function() { $('#btnshorten').click(function() { var longURL = $('#tboxLongURL').val(); $.ajax({ url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://www.google.com/&key=AIzaSyANFw1rVq_vnIzT4vVOwIw3fF1qHXV7Mjw', type: 'POST', contentType: 'application/json; charset=utf-8', data: '{ longUrl: "' + longURL +'"}', dataType: 'json', success: function(response) { var result = eval(response); // Evaluate the J-Son response object. } }); }); });

But it is generating an error in IE. It is showing "Access is denied" and in Firebug it is showing "405 method not allowed." Am I doing something wrong here?

Improve this question

3 Answers 3

Reset to default
17

In Javascript, here are 2 ways to to implement the Google URL shortener API:

METHOD #1: Using jsonlib, http://call.jsonlib.com/jsonlib.js Try it out here: http://jsfiddle.net/Qh4eR/

var longUrl = "http://google.com"; document.write("Long Url: "+longUrl); function googlurl(url, cb) { jsonlib.fetch({ url: 'https://www.googleapis.com/urlshortener/v1/url', header: 'Content-Type: application/json', data: JSON.stringify({longUrl: url}) }, function (m) { var result = null; try { result = JSON.parse(m.content).id; if (typeof result != 'string') result = null; } catch (e) { result = null; } cb(result); }); } googlurl(longUrl , function(s) { document.write("<BR>Short Url: "+s); });

METHOD #2: Using the google client library, https://apis.google.com/js/client.js, Try it out here: http://jsfiddle.net/pPHKe/2/

//var apiKey = 'YOUR_API_KEY'; //gapi.client.setApiKey(apiKey); var longurl = 'http://www.google.com/'; gapi.client.load('urlshortener', 'v1', function() { var request = gapi.client.urlshortener.url.insert({ 'resource': { 'longUrl': longurl } }); var resp = request.execute(function(resp) { if (resp.error) { $("#show").html('Error. ' + resp.error.message); } else { $("#show").html("Short URL for "+longurl+" is: " + resp.id); } }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

Indeed you are, I'm afraid. You can't make cross-domain ajax calls because of browser security.

I know that Ext JS offer a ScriptTagProxy object which can do the work, but I'm not sure if jQuery has anything similar.

An alternative would be to create a kind of "proxy" server-side script on your own host, which could accept parameters from your ajax call, make an HttpWebRequest or similar to googleapis.com and output the response to be picked up again by your ajax call. Then just modify your ajax url parameter to call your new proxy script instead of googleapis. In other words - let the server-side do the cross domain request.

Improve this answer

4 Comments

what server side language are you using?
Maybe I should make myself clearer: Change your ajax call to request a server-side script on your own domain, passing appropriate parameters. Create this server side script to accept parameters, make an HttpWebRequest or similar to googleapis.com, and then output the response, which would be picked up by your jQuery ajax call and eval-ed in the success function you've already defined. Is that clear? I've updated the answer accordingly
how come i'm able to load via $.getJson the data from other domains ie twitter?
Maybe via JSONP? The fact stands that using browser implemented XMLHttpRequests you cannot make calls cross-domain. As my response mentions: there are various ways of getting around it, eg: Ext JS's ScriptTagProxy, or JSONP (which is used by jQuery for cross-domain calls and is essentially a script tag proxy anyway).
0

You can use a dynamic script tag to make cross domain ajax calls. As pointed here this method has some problems: It's difficult to know when the content is available, there is no standard methodology, and can be considered a "security risk".

However the method works fine in my case. refer to here for a good example. The approach is a bit tricky.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.