Question

I am trying to loading sites from a JSON array to divs one by one. (once loading has finished, then loading the next one), but I do not know how to set it by myself? Sorry for jsfiddle.net
not allowed by Access-Control-Allow-Origin.

$(document).ready(function() {
//var mark = false;
//if(mark==false){
    //var json = {"set":"[{'web':'google','site':'http://www.google.com'},{'web':'bing','site':'http://www.bing.com'},{'web':'yahoo','site':'http://www.yahoo.com'}]"} 
    var json = {"set":"[{'web':'google','site':'1.html'},{'web':'bing','site':'2.html'},{'web':'yahoo','site':'3.html'}]"} 

    json = eval(json.set);
    for(var i=0; i<json.length; i++){
        var divid = json[i].web;
        var url = json[i].site;
        $('#'+divid+'').load(''+url+'',function(){
            //mark = false;
        });
    }
//}
});



<div id="google"></div>

<div id="bing"></div>

<div id="yahoo"></div>​

Answer 1

Sorry for jsfiddle.net not allowed by Access-Control-Allow-Origin.

Your problem has nothing to do with jsfiddle. Due to same origin policy restrictions that’s built in browsers you simply cannot send AJAX requests cross domain. You can forget about doing:

$('#google').load('http://www.google.com');

unless of course the page containing this script is hosted on http://www.google.com.

In your case you could build a server side script on your domain (using some server side language such as PHP, Java Servlets, ASP.NET, …) that will serve as a bridge between your domain and the remote domain that you are trying to fetch. Then you will send your AJAX request to your server side script.

You may also take a look at the following article which explains some cross domain AJAX techniques.

---

UPDATE:

Assuming you want to queue your AJAX requests in such a way that the second request is triggered only after the first succeeds and so on you could write a recursive method:

$(function() {
    // TODO: it's pretty trivial to build this list array given your initial
    // json object, so I am not including it here
    var list = [
        { url: '/url1/', target: '#google' },
        { url: '/url2/', target: '#bing' },
        { url: '/url3/', target: '#yahoo' },
    ];

    (function(list) {
        var element = list.shift();
        if (element) {
            var caller = arguments.callee.caller;
            $(element.target).load(element.url, function() {
                caller(list);
            });
        }
    })(list);
});