[AJAX] ładowanie, oczekiwanie

[Mar]

Mam np. taką funkcję:

connect();
	http_request.onreadystatechange = function(){ 	

		if(http_request.readyState == 4){
			if(http_request.status == 200){

			document.getElementById(id).style.display = 'none';

			}else todo(id,action);			
		}}

	http_request.open('GET', 'https://www.ares.pl/plik.php, true);	
	http_request.send(null);

I jak taką funkcję wzbogacić np. gifem pokazującym, że trwa wykonywanie skryptu, do czasu aż plik.php wykona się?

Mar.

[kilas88]

Możesz to zrobić na kilka sposób, choć ja zazwyczaj wykonuję następująco:

<div id="warstwa">Jakiś tekst czy inna zawartość</div>

<script type="text/javascript">
function zmienZawartosc(warstwa) {

 var warstwa = getElementByID(warstwa);
 warstwa.innerHTML = 'wczytywanie nowej treśći';

 // wczytywanie danych za pomocą ajaxa

 if (http_request.readyState == 4 && http_request.status == 200)
 warstwa.innerHTML = 'nowa zawartość';

}
</script>

[GrzegorzBanka]

jeśli gif to wiadomo getElementByID(warstwa).className='wczytywanie';, warto też dodać else jako nieudane połączenie

[Mar]

Nie wiedziałem, że to może być takie proste:

connect();
	http_request.onreadystatechange = function(){	 

	document.getElementById(id).innerHTML='<img src="loader.gif" alt="czekaj.." />';

		if(http_request.readyState == 4){
			if(http_request.status == 200){

			document.getElementById(id).style.display = 'none';

			}else todo(id,action);			
		}}

	http_request.open('GET', 'https://www.ares.pl/plik.php, true);	
	http_request.send(null);

Mar.

[kilas88]

Mar, jeśli chcesz wrzucić tam gifa to przy wczytywaniu strony wczytaj już ten rysunek do pamięci

window.onload = load_img;

function load_img() {
 var pic1 = new Image(szerokosc w px, wysokosc w px);
 pic1.src = "https://someplace.com/image1.gif";
}

Dzięki temu później wygenerowany obrazek nie będzie musiał się ładować wraz z wczytywaniem asynchronicznym, bo mogłoby to kiepsko wypaść, zwłaszcza na wolniejszych łączach.

[Mar]

Mam jeszcze jedno pytanie dotyczące AJAX'a.

Jest możliwość rozbicia jakoś zmiennych, tz. skrypt php zwraca mi np. taki string "2345|2324"

..i chciałbym zaktualizować w tym momencie dwa DIVy? Bo takim sposobem

document.getElementById(id).innerHTML=http_request.responseText;

aktualizuję jednego, a chciałbym np. zrobić tak:

document.getElementById(id1).innerHTML=czesc1;
document.getElementById(id2).innerHTML=czesc2;

..tylko pytanie jak rozbić zmienną:

http_request.responseText;

Mar.

[mkr]

data = '2345|2324';
data = data.split('|');
alert(data[0]); alert(data[1]);

[Mion]

Dziwię się Mar, że nie stosujesz bibliotek javascript np. jquery które znacznie upraszczają operacje z AJAX, a zwłaszcza wysyłania danych formularzy POST, GET zresztą też

[General_Depet]

Jest możliwość rozbicia jakoś zmiennych, tz. skrypt php zwraca mi np. taki string "2345|2324"

A nie lepiej/prościej generować już ajaxem gotowy kod zamiast psudo-zmienną (będącą de facto wygenerowaną treścią) którą później trzeba przeparsować javasciptem do odpowiedniej postaci ?

[kilas88]

Dokładnie, w jQuery zdecydowanie łatwiej.

np.

$('#warstwa').hide(500, save_this_shit);

function save_this_shit() {
$.ajax({
	type: "POST",
	url: "/ajax/rating.php",
	data: "id=6&rating=2",

	success: function(msg) {
		$('#warstwa').html('Nowa zawartość').show(500);
	}
});
}

Wszystko działa, a dodatkowo doszły jakieś tam efekty specjalne