AJAXデータを、AJAXリクエストを呼び出した順番に表示する方法はありますか? jQueryが、単純に純粋なjavascriptですか?例えばAjax/HTTPからのデータのリストを呼び出した順に返します
:
//file 1 takes 3 seconds & file2 takes 1 second
input: ['example1.com', 'example2.com']
output: [example1_response, example2_response]
私は自分のHTMLページに小さなおもちゃの問題を設定することにより開始しました。 2つのプレースホルダー<div>
をテキストwait
と私のウェブページ&の間に追加します。私のURLリクエストが完了したら、適切な<div>
のプレースホルダーのテキストが置き換えられました。しかし、依然として、私が要求した順序に基づいてコンテンツをロードするという最終目標は達成できません。
JSFIDDLE:https://jsfiddle.net/nf4p1bgf/5/
var body = document.getElementsByTagName('body')[0]
var urls = [ "website1.com", "website2.com"];
//Helper function to simulate AJAX request
function fakeAjax(url,cb) {
var fake_responses = {
"website1.com": "data from website1.com",
"website2.com": "data from website2.com"
};
var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
console.log(`Requesting: ${url}. Response time: ${randomDelay}`);
setTimeout(function(){
cb(fake_responses[url]);
},randomDelay);
}
urls.forEach(function(url) {
//creating placeholder <div>'s before AJAX data returns
var div = document.createElement("div");
div.innerHTML = "this is a place holder - please wait";
body.appendChild(div);
fakeAjax(url, function(data) {
div.innerHTML = data;
});
});
EDIT & SOLUTIONここ JSFiddle:https://jsfiddle.net/fa707qjc/11/
//*********** HELPERS (SEE CODE BELOW HELPERS SECTION) ***********/
var body = document.getElementsByTagName('body')[0]
var urls = ["website1.com","website2.com"];
function fakeAjax(url,cb) {
var fake_responses = {
"website1.com": "data from website1.com",
"website2.com": "data from website2.com"
};
var randomDelay = (Math.round(Math.random() * 1E4) % 8000) + 1000;
console.log(`Requesting: ${url}. Response time: ${randomDelay}`);
setTimeout(function(){
cb(fake_responses[url]);
},randomDelay);
}
function createElement(typeOfElement, text){
var element = document.createElement(typeOfElement)
element.innerHTML = text;
return element;
}
function handleResponse(url, contents){
//if I haven't recieved response from x url
if(!(url in responses)){
responses[url] = contents;
}
//defining order for response outputs
var myWebsites = ['website1.com','website2.com'];
// loop through responses in order for rendering
for(var url of myWebsites){
if(url in responses){
if(typeof responses[url] === "string"){
console.log(responses[url])
//mark already rendered
var originalText = responses[url];
responses[url] = true;
var p = createElement('p', originalText);
body.appendChild(p);
}
}
//can't render it/not complete
else{
return;
}
}
}
//*********** CODE START ***********
function getWebsiteData(url) {
fakeAjax(url, function(text){
console.log(`Returning data from ${url} w/response: ${text}`)
handleResponse(url, text);
});
}
//As we get our responses from server store them
var responses = {};
// request all files at once in "parallel"
urls.forEach(function(url){
getWebsiteData(url);
})
1.私はあなたが達成したいとは思っていません。 2.この質問はStackOverflowに属します。 – Kapol
これは特定の機能要求であり、一般的なコードレビューの要求ではありません。コールバックを試しましたか? – Mast
@カポル - 私はKyle SimpsonsがGithub - https://github.com/getify/You-Dont-Know-JSで作業してくれたことを感謝しています。 –