5

AJAX 呼び出しを行うことにより、jQuery を使用して Google URL 短縮 API を実装しようとしています。私はこのようなことをしました：

$(function() {
    $('#btnshorten').click(function() {    
        var longURL = $('#tboxLongURL').val();

        $.ajax({
            url: 'https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&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.
            }
         });
    }); 
});

しかし、IEでエラーが発生しています。「アクセスが拒否されました」と表示され、Firebug では「405 メソッドは許可されていません」と表示されます。ここで何か間違ったことをしていますか？

4

3 に答える 3

17

JavaScript で Google URL Shorter API を実装するには、次の 2 つの方法があります。

方法 #1: jsonlib を使用して、ここでhttp://call.jsonlib.com/jsonlib.js試してみてください: 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); });

方法 #2: Google クライアント ライブラリを使用する、https://apis.google.com/js/client.jsここで試してみてください: 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);
        }
    });
});
于 2011-12-30T16:59:22.873 に答える
5

確かにそうですよね。ブラウザーのセキュリティのため、クロスドメインの ajax 呼び出しを行うことはできません。

Ext JS がこの作業を実行できる ScriptTagProxy オブジェクトを提供していることは知っていますが、jQuery に同様のものがあるかどうかはわかりません。

別の方法は、独自のホスト上に一種の「プロキシ」サーバー側スクリプトを作成することです。これは、ajax 呼び出しからパラメーターを受け入れ、HttpWebRequest などを googleapis.com に作成し、応答を出力して、あなたのajax 呼び出し。次に、ajax url パラメータを変更して、googleapis の代わりに新しいプロキシ スクリプトを呼び出すだけです。つまり、サーバー側にクロスドメインリクエストを実行させます。

于 2011-01-14T12:18:55.870 に答える
0

動的スクリプトタグを使用して、クロスドメインajax呼び出しを行うことができます。ここで指摘したように、この方法にはいくつかの問題があります。コンテンツがいつ利用可能になるかを知るのは難しく、標準的な方法論はなく、「セキュリティリスク」と見なすことができます。

ただし、私の場合、この方法は正常に機能します。良い例については、ここを参照してください。このアプローチは少し注意が必要です。

于 2011-01-14T12:41:41.243 に答える