ugrás a tartalomhoz

Ajax könyv kérdés

leone92s · 2009. Dec. 5. (Szo), 17.43
Sziasztok!
Tudtok ajánlani valami olyan könyvet/weboldalt, ami a legkezdőbbeknek is megtudja jól tanítani az ajax használatát? Már töltöttem me annyi ebookot, de van amelyik angol, van amelyik már olyan alaptudást követel ami még nekem nincs, szóval tudtok vlami ilyesmit ajánlani? Amúgy, az alapprobléma az egy regisztrációs form kitöltésénél, a kitöltött username keresése a mysql adattáblába, ha erre van linketek az is jó!

köszi előre
bb sl
‹ karakterek, ajax JS form element klónozása prototype-pal ›
 ■
1

javascript?

Drawain · 2009. Dec. 5. (Szo), 22.14
Nem írtad, hogy a javascripttel hogyan állsz - mindenesetre felteszem, hogy láttál már korábban ilyen kliens oldali kódot. A problémádat sem részletezted túlzottan, de gondolom azt akarod vizsgálni, hogy a kitöltött felhasználónév létezik e a rendszerben és ennek függvényében kiírni, hogy "minden ok" vagy azt, hogy válasszon másikat.

Ajánlom a figyelmedbe a JQuery-t, ez egy javascript keretrendszer, ami pont az ilyen problémákban tud óriási segítséget adni. Az oldalukon ráadásul találsz egy nagyon jó doksit illetve tutorialokat kezdők számára.

A problémádra nagyon egyszerű a megoldás. Először az oldal head részében hívd be a jquery.js-t valamilyen forrásból. Ezután nincs más dolgod mint a username input meződ változását figyelned, és ha ez megtörtént, akkor egy ajax kéréssel elküldeni a beírt adatot és figyelni a választ. Valahogy így:

...
<input type="text" name="username" id="username" />
<div id="usernameinfo"></div>
...


<script type="text/javascript">
    /* Biztosítjuk, hogy akkor fusson le a kód, ha letöltődött az oldal */
    $(document).ready(function() {
        
        $("#username").change(function() {
            var felhasznev = $(this).val(); // Kivesszük az input értékét
            if ($.trim(felhasznev) == "") return; // Ne terheljük a szervert ha üresen 
                                                  // hagyja vagy kitörli az input tartalmát

            $("#usernameinfo").load('username_kereses.php', { username: felhasznev });
        });

    });
</script>
Hát röviden ennyi :) A szerveroldali scriptet mindegy milyen nyelven írod, de az elérhetőségét a username_kereses.php helyére írjad be. A szerver oldal username post paraméterként fogja megkapni a felhasználónevet (pl. php-nél: $_POST['username']). A választ amit itt kiíratsz, a usernameinfo id-jű div-be fog másolódni. Így ellenőrzés után nincs más dolgod mint kiecho-zni, hogy minden ok vagy, hogy változtasson nevet.

Természetesen sok mindennel meg lehet fűszerezni a scriptet, ez csak egy váz volt. Érdemes lekezelni, hogy egyszerre csak egy ilyen ellenőrzés menjen el, azt is, hogyha hibás választ kapsz (szerver error), illetve, hogy ne az input onchange-re fusson le a kód, hanem valami "biztonságosabb" eseményre, eseményekre.
2

Professional Ajax

toxin · 2009. Dec. 6. (V), 07.34
http://weblabor.hu/konyvek/professionalajax, kapaható pl. az Anima könyvesboltokban

üdv Csaba
4

Hát az a baj, hogy most

leone92s · 2009. Dec. 6. (V), 14.11
Hát az a baj, hogy most ebbokban jobb lenne, mert kb. 0Ft az a keret, ami ilyen könyvekre fordítható az én kis kasszámban. De azért köszi!

bb sl
3

Köszi a választ

leone92s · 2009. Dec. 6. (V), 14.10
Köszike a választ, de aztán este addig törtem rajta a kis buksimat, amig meg nem oldódott... olvastam hozzá kb. 3 könyvet, ami "megemlíti" az ajaxot (hát kevesebbet írtak le majdnem mint amit tudtam), google stb, aztán csak megszületett... akkor megmutatom, lehet hogy kezdő script...

// JavaScript Document
var isuser;

function checkUsername(){
	var username=document.getElementById('username').value;
	if(username.length>20){
		return false;
	}else if(username.length<6){
		return false;
	}else{
		return checkRegisteredTags(username);
	}
	t=window.setTimeout("checkUsername()", 50);
}

function checkRegisteredTags(username){
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null) {
		alert ("A böngészod nem támogatja az Ajaxot!");
		return false;
	}
	var url="checkuser.php"
	url=url+"?username="+username;
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	if(isuser=="yes")
		return true;
	else
		return false;
}

function GetXmlHttpObject(handler) {
	var objXMLHttp=null;
	if (window.XMLHttpRequest) {
		objXMLHttp=new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return objXMLHttp;
}

function stateChanged() {
	if (xmlHttp.readyState==4 ||
		xmlHttp.readyState=="complete"){
		isuser=xmlHttp.responseText;
	}
}
és a form:

 <input type="text" id="username" name="username"
        onkeyup="document.getElementById('returnUsername').innerHTML=checkUsername() ? 'Megfelel' : 'Nem felel meg'"
        onmousemove="document.getElementById('returnUsername').innerHTML=checkUsername() ? 'Megfelel' : 'Nem felel meg'"/>
        <div id="returnUsername">Nem felel meg</div>
Adobe Dreamweaver-ben csináltam, ott működik, teszteltem még firefoxban és operában (IE-ben elfelejtettem). Hát kb ennyi lenne, nah meg a checkUsername() függvény return értékéhez állítottam azt is, h a submit gomb megjelenik vagy sem.

köszi mindent bb sl

u.i.: hogy miért kapcsoltam két eseményhez is az ellenőrzést? mert ahogy tesztelem, beírtam egy nevet, nem volt jó (szándékosan), de aztán 1 betűt hozzáírtam és visszatöröltem akkor már jónak tűnt számára... szóval ezért. Azt pedig, hogy van e már beírva valami a mezőbe, azzal nézem, h ha kisebb a karakterszám mint 6, akkor ne is fusson le a script.