并非所有Ajax内容都在一个域上加载

时间:2010-01-20 13:06:39

标签: javascript json jquery cross-domain

我将域http://whatthecatdragged.in/转发(隐藏)到http://moppy.co.uk/wtcdi/

根页面(index.html)使用Ajax加载内容。在原始主机(moppy.co.uk/wtcdi)页面和所有内容加载。但是,在域转发域(whatthecatdragged.in)中,某些内容无法加载。是否与.each提到的 // Content building code: $(function(){ // Set a few variables (no need for secrecy with Flickr API key). var apiKey = 'myapikey'; // var tags = ''; var tagsArr = new Array(); // Get the photos of flickr user WhatTheCatDraggedIn. // This Ajax call always seems to complete. $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=46206266@N05&extras=date_taken,tags&format=json&jsoncallback=?', function(data){ // Set some variables to ensure alldata is fecthed from second API // call (below) before building majority of content. var totalExpected = data.photos.total; var totalFetched = 0; var photohtml = ''; // For each photo, do the following: $.each(data.photos.photo, function(i, item) { // Set size of photo thumbnail to display. var size = 's'; var append = ''; if (i == 0) { // Display most recent thumbnail larger, and add a line // break for small pics beneath it. size = 'm'; append = '<br />' } //Only display thmbnails of 4 most recent catches (1 large, 3 small). if (i <= 3) { var photoSrc = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_' + size + '.jpg' //Each thumbnail links to that photo's Flickr page. var flickrPage = 'http://flickr.com/photos/' + item.owner + '/' + item.id + '/'; // Each thumbnail has a big tooltip, with tags formatted appropriately. var formattedTags = item.tags.replace(/\s/g, "<br />"); formattedTags = formattedTags.replace(/cat/, "cat: "); formattedTags = formattedTags.replace(/loc/, "location: "); formattedTags = formattedTags.replace(/victim/, "victim: "); formattedTags = formattedTags.replace(/status/, "status: "); formattedTags = formattedTags.replace(/floor/, " floor"); formattedTags = formattedTags.replace(/toy/, " toy"); //Append the built html to one varable for adding to page shortly photohtml += '<a class="flickr-page-link" href="' + flickrPage + '"><img src = "' + photoSrc + '" title="' + formattedTags + '"/>' + append + '</a>'; } var photoID = item.id; // Get the detailed photo information (including tags) for the photo. // This is the call that perhaps fails or at least content // generated after this call does not load. $.getJSON( 'http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data){ if (data.photo.tags.tag != '') { $.each(data.photo.tags.tag, function(j, item) { // Place all tags in an aray for easier handling. tagsArr.push(item.raw); }); // Incrememt number of photos fetched. totalFetched += 1; // Have we got them all? if (totalFetched == totalExpected) fetchComplete(); } }); // Builds a shedload more content once all JSON calls are completed. function fetchComplete() { // ### BUILD VICTIM list ### // format a regex to match tags beginnign : "victim: " var vicRe = /^v[a-z]+:\s([a-z\s]+)/ // Match the regex to the tags and count number of matches per tag. var vicCounts = tagsArr.countVals(vicRe); var victimsHtml = ""; // For each victim. for (var i in vicCounts) { var strippedTag = [i].toString().replace(/\W/g, ""); console.debug(strippedTag); // Add a line of html with the type of victim and the number of victims of that type victimsHtml += "<a href='http://flickr.com/photos/46206266@N05/tags/victim" + strippedTag +"/'>" + [i] + " (" + vicCounts[i] + ") </a><br />"; }; // Replace existing HTML with new version. $('#types-dragged').html(victimsHtml); // ### BUILD STATUS PIE CHART ### // Build a theme for chart colours. var wtcdicharttheme= { colors: ['#C66800', '#D3C70B', '#DD3D0B', '#D30729', '#DDA70B'], marker_color: '#000000', font_color: '#000000', background_colors: ['#ffffff', '#ffffff'] }; // Create a new chart object, include css id of canvas // where chart will be drawn. var g = new Bluff.Pie('status', '275x250'); // Set a theme and stuff. g.set_theme(wtcdicharttheme); // No title, as this exists via the raw page HTML. g.title = ''; g.legend_font_size = "50px"; g.marker_font_size = "20px"; // Build a regex string to match tags beginning "status: ". var statRe = /^s[a-z]+:\s([a-z\s]+)/ // Match regex to tags and return an object with tag // names and number of occurences. var statCounts = tagsArr.countVals(statRe); // For each status. for (var i in statCounts) { // Add data to the chart g.data([i], [statCounts[i]]); }; // Draw the chart. g.draw(); // ### BUILD LOCATION LIST ### // Build a regex that matches tags beginning "loc: " var locRe = /^l[a-z]+:\s([a-z\s]+)/ // Match regex to tags and return an object with // tag names and number of occurences. var locCounts = tagsArr.countVals(locRe); var locatHtml = ""; // For each location. for (var i in locCounts) { var strippedTag = [i].toString().replace(/\W/g, ""); // Add a line of html with the location and the //number of times victims found in that location. locatHtml += "<a href='http://flickr.com/photos/46206266@N05/tags/loc" + strippedTag +"/'>" + [i] + " (" + locCounts[i] + ") <br />"; }; // Replace existing html with newly built information. $('#locations').html(locatHtml); // ### BUILD CAT LIST ### // Build a regex that maches tags beginning "cat: ". var catRe = /^c[a-z]+:\s([a-z_\s]+)/ //Match regex to find number of catches each cat has made var catCounts = tagsArr.countVals(catRe); // For each cat. for (var i in catCounts) { var strippedTag = [i].toString().replace(/\W/g, ""); // Insert number of catches to div titled "(catname)-catch" $('#'+ [i] + '-catch').html( "<a href='http://flickr.com/photos/46206266@N05/tags/" + strippedTag + "/'>" + catCounts[i] + "</a>"); }; } }); // Insert total dragged onto page. $('#total-dragged').html(data.photos.total); // Insert photos onto page. $('#latest-catches').html(photohtml); // Add tooltips to the images from Flickr. $('img').each(function() { $(this).qtip({ style: { name: 'wtcdin' }, position: { target: 'mouse', adjust: { x: 8, y: 10 } } }) }); }); }); 用于触发Ajax调用的方式有关?

我试图对此进行调试,但在Firefox 3.5中特别启用AnthonyWJones控制台实际上似乎会加载所有内容。

{{1}}

更新1:我联系了域名公司,他们的建议基本上是“不要使用Firebug”。仍然无法理解为什么它会在一个域名下工作而不是另一个域名......这可能与他们通过框架“转发”域名这一事实有关吗?

1 个答案:

答案 0 :(得分:2)

浏览器将阻止在托管脚本的域外发送的AJAX请求。这很可能是因为事情的原因导致问题的原因。

编辑:我发现了问题,你的脚本中有console.debug()调用。此方法由Firebug控制台定义,这就是为什么它仅在控制台处于活动状态时才能工作。尝试删除对console.debug()的任何调用,看看它是如何进行的。