[JQUERY] data tonen terwijl ajax bezig is.

Status
Niet open voor verdere reacties.
ecross

ecross

Gebruiker
Lid geworden
4 mrt 2009
Berichten
638
hallo allemaal,

ik ben bezig met het maken van een script waarbij een grote hoeveelheid data moet worden opgehaald dmv een ajax call en worden getoond op mijn pagina. Het zou zeer prettig zijn als de data (text en html) al te zijn is terwijl de pagina nog niet helemaal is opgehaald. Is dat mogenlijk?

(een deel van) het script dat ik nu heb:
[JS]
$.Get({
type: "GET",
url: "getcontent.php",
data: "page="+page,
success: function(msg){
$("#right").html(msg);
}
});
[/JS]

alvast bedankt :thumb:
 
Hoi ecross,
Als ajax-noob :cool: komt de volgende vraag bij me op: kan je niet opsplitsen en twee (of meer) calls maken, die elk een portie uit de database ophalen? Dan lijkt me dat de eerste portie alvast getoond kan worden, terwijl de rest van de bestelling nog onderweg is.
Een soortement voorgerecht dus om het bezoek bezig te houden, of een vijf gangen-menu.

Om de snelle scrollers van dienst te zijn, zou je misschien ook nog op de lege borden van het volgende gerecht een (tijdelijk) briefje kunnen plakken: "Ogenblikje svp, de gegevens worden opgehaald"; of een voorgangs-indicatortje of zoiets.
Zodat iedereen weet dat er in de keuken heel hard gewerkt wordt! :)

Met vriendelijke groet,
CSShunter
 
hey csshunter,

leuke analogie :)
de ajax call gaat naar een php pagina die data van verschillende bronnen bij elkaar haalt (database, rss-feed, stukje hard-coded) en in een html-vormpje giet, het is (denk ik) lastig om te zeggen haal record 1 t/m 5 en dan 6/10 op, hoe kan ik dat het beste aanpakken? misschien een cache of zo?
ik zal morgen anders even de php code posten die ik tot nu toe heb.

groeten, ecross
 
hier het beloofde stukje code, ik heb al geprobeerd het idee te implenteren, alleen nu stelt het php script telkens eerst de hele pagina samen en pakt hij dan pas het stukje eruit dat opgevraagt wordt door het javascript. Dit kost dus meer tijd dan eigenlijk nodig moet zijn, hoe kan ik dat beter doen?

de parameters die door het javascript (via get) worden door gegeven zijn:
page, vanafregel en totregel

PHP: 
<?php
$addFacebookposts = false;
$addContact = false;
$addAboutme = false;
$addRoosterproject = false;

switch($_GET['page']){
	
	case "aboutme":
		$addAboutme = true;
	case "contact":
		$addContact = true;
	break;
	
	case "facebookposts":
		$addFacebookposts = true;
	break;
	case "roosterproject":
		$addRoosterproject = true;
	break;
	
	case "nieuws":
	default:
		$addFacebookposts = true;
		$addRoosterproject = true;
	break;	
}

$items = array();
if($addFacebookposts){
	
	$url = "###";
	$rsspage = file_get_contents($url);
	$xml = new SimpleXMLElement($rsspage);
	
	foreach($xml->channel->item as $item){
		$date = strtotime($item->pubDate);
		$text = "<div class='short'>
					<img src='facebook_gray.png' class='facebook' style='width:64; height:64px;'>
					<p class='small'>".date("j F G:i:s", $date)."</p>
					<br>".$item->title."
				</div>
				<div class='long'>
					<img src='facebook.png' style='width:64; height:64px;'>
					<p>".date("j F G:i:s", $date)."</p>
					<br>
					<div class='text'>".$item->title."</div>
					<div class='link'>
					<a href='".$item->link."' target='_blank'>bekijk bericht</a>
					</div>
				</div>";
		$items[] = array("type"=>"facebook", "text"=>$text);
	}
}
if($addContact){
	$items[] = array("type"=>"large", 
						"text"=>
							"<div class='short'>
								<form action='' method='GET'>
								<input type='hidden' name='do' value='sendmail'>
								<span style='display:inline-block; width:50px;'>email:</span><input type='text' name='emailfrom' value='' style='width:450px'><br />
								bericht:<br>
								<textarea style='width:500px;' rows='20' name='emailtext'></textarea><br />
								<input type='submit' value='send'>
								</form>
							</div>"
					);
}
if($addRoosterproject){
	$items[] = array("type"=>"text", 
						"text"=>
							"<div class='short'>
								dit moet nog gevuld worden
							</div>
							<div class='long'>
								echt :P er staat hier nog niets
							</form>
							</div>"
					);

}


$counter = 0;
$maxhoritems = 2;


for($f = $_GET['vanafregel']; $f < $_GET['totregel']; $f++){
	if(array_key_exists($f, $items)){
		$item = $items[$f];
		if($counter == 0){ // start of a line
			echo "<div class='row'>";
		}

		echo "<div class='cell ".$item['type']."'>";	
		echo $item['text'];
		echo "</div>";

		$counter++;
		if($counter >= $maxhoritems){ // end of a line
			echo "</div>";
			$counter = 0;
		}
	} else {
		break;
	}
}
if($counter != 0){echo "</div>";}
echo "</table>";

?>
 
Hoeps! Hier laat ik het schromelijk afweten, want als gezegd een ajax/database noob. :rolleyes:

Deskundige gevraagd!

Met vriendelijke groet,
CSShunter
 
Javascript-code wordt uitgevoerd op het moment dat het op de pagina staat. Vandaar dat (overigens meestal een slecht idee) document.write() werkt zoals 't werkt.

Nu, over je AJAX vraag:
je kan je request een async meegeven die true is - dan zal 'ie dus niet synchroon laden. Als het false is, zal ie alles stoppen en de call maken totdat deze terug is. Maar over het algemeen is dat niet echt netjes. Als het niet synchroon is zal de pagina dus gewoon netjes verder laden en ondertussen op de achtergrond de xhr call maken.

Als je eens terug kijkt naar je 1e post:
Het zou zeer prettig zijn als de data [...] al te zijn (sic) is terwijl de pagina nog niet helemaal is opgehaald.
Klik om te vergroten...
Dit komt eigenlijk neer op een 'platte' HTML pagina: tijdens het laden is er text! Daar heb je helemaal geen AJAX etc. voor nodig.

Wat je dus eens moet proberen is dit: de pagina include() (php) je getcontent.php. Nadeel is dat de pagina langer moet laden.
​

Daarnaast kan je eens kijken of het niet handiger is om de verschillende data sources op te halen met verschillende xhr calls. Je moet dan wel verschillende php scriptjes maken, maar dat is verder geen probleem.


Over je cache idee: dit kan prima, maar is misschien helemaal niet nodig. Heb je een live voorbeeldje?
Overigens is het redelijk makkelijk te maken. Gewoon zoiets:

PHP: 
<?php

   $laatstekeer = file_get_contents('lasttime.txt');   // lasttime.txt bevat een timestamp
   if(time() - $laatstekeer > 60)
   {
      // laatste cache was langer dan een minuut geleden! omgbbq.

      // pak de nieuwe source
      $getData = file_get_contents('source.php');   // oid

      // save als cache
      file_put_contents('cache.html', $getData);

      // save nieuwe timestamp
      file_put_contents('lasttime.txt', time());

      // return de data
      echo $getData;
   }else{
      // cache is nog OK

      // ... dus return de cache
      echo file_get_contents('cache.html');
   }

?>
 
Laatst bewerkt:
bedank voor je reactie, ik was een weekje weg dus vandaar dat mijn reactie even op zich liet wachten.

hier het voorbeeld: http://scripts.ecross.nl/clean

Wat je dus eens moet proberen is dit: de pagina include() (php) je getcontent.php. Nadeel is dat de pagina langer moet laden.
Klik om te vergroten...

dit had ik dus eerst, maar de getcontent pagina is zo groot dat het een hele tijd duurt om hem helemaal op te halen, wat bovendien ook niet nuttig is. Zoals je kunt zien in het voorbeeld gaat het om een facebook time line, en hoe verder je naar beneden scrolled hoe oudere berichten je te zien krijgt. Later wordt er ook nog data van andere sources op gehaald en er tussen gezet.

ik ga zo even kijken of het allemaal wat sneller met een cache gaat.

mvg. Ecross
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan