Keskustelu: Nettisivujen teko: OnClick, Ajax ja function

Eli käytössä on Ajax live function. Kaikki pelaa hyvin Mozillalla mutta IE ei suostu pelaamaan.

IE hakee tiedon mutta kun hakee uudestaan tulee vain se tieto mikä on ekakerran ladattu. Sain sen suurinpiirtein pelaan niin että laitoin id:n aina eriksi niin haki tiedot uudelleen. Olisko tähän mitään ratkaisua miksi tekee näin.

Eli haetaan esim. <div id="tiedot"></div>

Sitten on paikka jossa on haku <div id="haku"></div> Sen alla on formi johon tulee tietoa ja painike <input type="button" value='lisää' onClick='lisaa(this.form); tiedot();'>. Eli lisää menee php:hen jossa laitetaan tiedot tietokantaan ja tiedot function hakee ne sieltä. Mozilla lataa tiedot() uudelleen mutta IE vain näyttää sen mikä on kertaalleen ladattu.

function tiedot(){
	var ajaxRequest;  // The variable that makes Ajax possible!

	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('tiedot');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}


	var id = document.getElementById('id').value;
	var nimi = form.kuntotyyppitulos.value;
	var sukunimi = form.omaaika.value;


	var queryString = "?id=" + id + "&nimi=" + nimi + "&sukunimi=" + sukunimi;
	ajaxRequest.open("GET", "tiedot.php" + queryString, true);
	ajaxRequest.send(null);


}

Eli jotain syystä IE ei päivitä samaa diviä uudelleen. ID:n arvo on annettu kun on rekisteröitynyt sivuille.

Melkeinpä voisin suoraan koodia katsomatta suositella jonkun valmiin Ajax-kirjaston käyttöä, esim. jQueryä. Valmiissa kirjastoissa on yleensä suoraan ratkaistu kaikkien käytetyimpien selainten eroavaisuudet yms...

Ongelmana on varmaanki se, että IE (tietämättä IE9:n tilanteesta) kakuttaa tuon ajax-pyynnön. Ratkaisu: puuppaa hakuosoitteeseen jotain muuttuvaa dataa, esim. hakupyynnön aikaleima.

var queryString = "?id=" + id + "&nimi=" + nimi + "&sukunimi=" + sukunimi + "&supdawg=" + Math.random();

Suosittelen minäkin erittäin paljon jQueryä ja $.ajax joka parhaimillaan tekee sun puolesta 500 riviä koodia vastaavia toimintoja yhellä rivillä koodia

Näin on muuttuvaa dataa pitää pukata niin se pelittää IE:llä oikein hyvin. Pitää vaan vielä kehitellä että muuttuva data vaihtuu koko ajan päivittämättä mitään.

esajeejee kirjoitti:

"&supdawg" + Math.random()

Randomin ongelma on, että queryStringin on edelleen mahdollista olla sama useampaan otteeseen. Häviävän pienellä todennäköisyydellä ei ole mitään väliä kun parempikin ratkaisu on olemassa. Ehdotin aikaleimaa siksi, että se queryString on sen kanssa "aina" – ajax-haut kuitenkin kestävät yli sen millisekunnin, joka saadaan komentamalla new Date().getTime() – edellisistä eroava. Tässä tilanteessa haussa vaaditaan vielä käyttäjän klikkausta, joten aikaleima on varma valinta. Lisäksi tuo "supdawg=" on täysin turha, riittää kun puuppaa aikaleiman uudeksi avaimeksi.

Kuriositeetti: tuotahan vois optimoida siten, että nappaa aikaleimasta digittejä pois siten, että välimuistin voi odottaa olevan jo tyhjä. Toisaalta tuo URL on lähtevästä pyynnöstä vain pieni osa ja lisäksi sitä voidaan lyhentää paljon helpomminkin, mutta sitten karsitaan jo koodin selkeydestä.

esajeejee kirjoitti:

ja $.ajax

Kannattaa (jQueryn dokkarin mukaan) käyttää yksinkertaisempia $.get ja $.post -vaihtoehtoja, mikäli vaan tilanteeseen taipuvat.

Siis molemmat noista on täysin purkkaviritelmiä ja käytännössä yhtä huonoja.

Oikea tapa on tehdä ajax kansio joista vaikka htaccessillä kaikki filut lähettää automaattisesti headerit

Cache-Control: max-age=0,no-cache,no-store,post-check=0,pre-check=0
Pragma: no-cache
Expires: joku mennyt aika

$.get tai $.post ei ole yhtään sen yksinkertaisempi kun $.ajaxkaan, ja niissä vaihtoehdot ja toiminnot ovat erittäin rajoittuneita.

Käytännössä joo :), lähinnä jos on pakko kikkailla. Pitkältihän tuo ajax vs get/post-metodit on makuasia, ite vaan tykkään kirjottaa

$.post('test.php',
  { name: 'John' },
  function(data) {
    alert('Data loaded: ' + data);
  });

vs.

$.ajax({
  type: 'POST',
  url: 'test.php',
  data: { name: 'John' },
  success: function(data) {
    alert('Data loaded: ' + data)';
  },
  dataType: 'xml'
});

Suositus oli tosiaan jQueryn dokkareista. Monimutkaisemmissa kyselyissä ajaxin tarjoamat säädöt ovat nannaa.