Why is ajax request working cross-domain in the google extension sample without jsonp? -
i going through tutorial making simple chrome extension gets images flicker api , loads them extension popup.making simple chrome extension
i cant understand 1 thing. ajax request made here simple request. why working cross-domain. not jsonp. script file popup.js follows
// copyright (c) 2012 chromium authors. rights reserved. // use of source code governed bsd-style license can // found in license file. /** * global variable containing query we'd pass flickr. in * case, kittens! * * @type {string} */ var query = 'kittens'; var kittengenerator = { /** * flickr url give lots , lots of whatever we're looking for. * * see http://www.flickr.com/services/api/flickr.photos.search.html * details construction of url. * * @type {string} * @private */ searchonflickr_: 'https://secure.flickr.com/services/rest/?' + 'method=flickr.photos.search&' + 'api_key=90485e931f687a9b9c2a66bf58a3861a&' + 'text=' + encodeuricomponent(query) + '&' + 'safe_search=1&' + 'content_type=1&' + 'sort=interestingness-desc&' + 'per_page=20', /** * sends xhr request grab photos of lots , lots of kittens. * xhr's 'onload' event hooks 'showphotos_' method. * * @public */ requestkittens: function() { var req = new xmlhttprequest(); req.open("get", this.searchonflickr_, true); req.onload = this.showphotos_.bind(this); req.send(null); }, /** * handle 'onload' event of our kitten xhr request, generated in * 'requestkittens', generating 'img' elements, , stuffing them * document display. * * @param {progressevent} e xhr progressevent. * @private */ showphotos_: function (e) { var kittens = e.target.responsexml.queryselectorall('photo'); (var = 0; < kittens.length; i++) { var img = document.createelement('img'); img.src = this.constructkittenurl_(kittens[i]); img.setattribute('alt', kittens[i].getattribute('title')); document.body.appendchild(img); } }, /** * given photo, construct url using method outlined @ * http://www.flickr.com/services/api/misc.urlkittenl * * @param {domelement} kitten. * @return {string} kitten's url. * @private */ constructkittenurl_: function (photo) { return "http://farm" + photo.getattribute("farm") + ".static.flickr.com/" + photo.getattribute("server") + "/" + photo.getattribute("id") + "_" + photo.getattribute("secret") + "_s.jpg"; } }; // run our kitten generation script document's dom ready. document.addeventlistener('domcontentloaded', function () { kittengenerator.requestkittens(); });
i got it. cors.
in flicker api, response header has access control allow origin header set *. hence, ajax request work.
you need edit server configuration file if u need set header. default not *.
Comments
Post a Comment