Validate Username with Ajax

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Risk
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2006 01:16
Τοποθεσία: Κάπου εδώ γύρω...
Επικοινωνία:

Validate Username with Ajax

Δημοσίευση από Risk » 25 Φεβ 2008 22:34

Αγαπητά μέλη ζητάω την εμπειρία σας και τις γνώσεις σας!!! Ότι θα περιγράψω παρακάτω αποτελεί τον "παρθενικό" μου κώδικα σε ajax και για τον λόγο αυτό ζητώ την βοήθειά σας. Θέλω να εισάγω μέσα σε μια φόρμα για registration ajax κώδικα που θα ενημερώνει τον χρήστη εάν το username που εισήγαγε χρησιμοποιείται ή όχι!

Έχω δημιουργήσει ήδη κάποιο κομμάτι κώδικα το οποίο δεν λειτουργεί όπως θα έπρεπε και για τον λόγο αυτό τον παραθέτω παρακάτω για να μπορέσετε και εσείς να το δείτε και να μου πείτε τι είναι αυτό που μπορεί να φταίει:

Αρχικά ενσωματώνω το παρακάτω script στον κώδικα της φορμας όπου γίνεται το registration:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&#123;TITLE&#125;</title>
<link rel="stylesheet" type="text/css" href="./layout.css">
<script language="javascript" src="./javascript/registration.js"></script>

<script>
function validate &#40;user&#41;
&#123;

	var http=false;

if &#40;window.ActiveXObject&#41;
&#123;
	http=new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
&#125;

else if &#40;window.XMLHttpRequest&#41;
&#123;
	http=new XMLHttpRequest&#40;&#41;;
&#125;
	
	http.open &#40;"GET","./Templates/ajax/ajaxform.php?name="+user, true&#41;;
	
	http.onreadystatechange=function&#40;&#41;
	&#123;
		if &#40;http.readyState==4&#41;
		&#123;
			document.getElementById&#40;'foo'&#41;.innerHTML= "Status&#58; "+http.responseText;
		&#125;
	&#125;

http.send&#40;null&#41;;

return;

&#125;
</script>
</head>
<body>
<tr>
 <td align="right" id="lcell"> Username&#58;</td>

 <td id="rcell"><input id="rinbox" type="text" onfocus="this.style.border='2px solid #000'" onblur="this.style.border='2px solid #ccc'" name="username" size="35" onchange="validate&#40;this.value&#41;;"/></td>

<td id="rcell"><div id="foo"></div></td>
</tr>
</body>

Στο παραπάνω κομμάτι κώδικα εννοείται πως ακολουθούν και άλλα πεδία, απλά εγώ παρουσιάζω μόνο το username.

Παρακάτω ακολουθεί ο κώδικας του ajaxform.php

Κώδικας: Επιλογή όλων

<?php
function validate&#40;$name&#41;&#123;

if &#40;strlen&#40;$name&#41;<3&#41;
&#123;
	echo "Username too short\n"; //return "Username too short";
&#125;

echo "Username OK!"; //return "Username OK!";

//echo validate &#40;trim&#40;$_REQUEST&#91;'name'&#93;&#41;&#41;;

&#125;
?>
Πρόβλημα που αντιμετωπίζω είναι το εξής: Κατά την εισαγωγή του username ο χρήστης δεν ενημερώνεται αν το username που εισήγαγε είναι μικρό ή είναι "ΟΚ", δηλαδή είναι σαν να μην λειτουργεί το http.responseText. Διευκρινίζω πως το παραπάνω script είναι δοκιμαστικό και πως ο τελικός μου στόχος είναι να ενημερώνεται ο χρήστης να το username είναι διαθέσιμο. Πιστεύω πως αν επιλυθεί το πρόβλημα που μου παρουσιάζεται,μετά το άλλο είναι εύκολο με ένα sql ερώτημα!

Πηγή του παραπάνω script είναι η εξής: daniel.lorch.cc/docs/ajax_simple/

Ευχαριστώ!
Εικόνα

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

Validate Username with Ajax

Δημοσίευση από dik_ » 26 Φεβ 2008 00:30

Κάπου στο υπόλοιπο ajaxform.php καλείς την validate(), σωστά;

Επίσης νομίζω θα χρησιμοποιούσα POST και όχι GET, αλλά αργότερα αυτές οι λεπτομέρειες :D

Άβαταρ μέλους
Risk
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2006 01:16
Τοποθεσία: Κάπου εδώ γύρω...
Επικοινωνία:

Validate Username with Ajax

Δημοσίευση από Risk » 26 Φεβ 2008 01:06

Αρχικά θα ήθελα να πω πως, επιτέλους μετά από πολλές ώρες το πρόβλημα λύθηκε...μην περιμένετε να σας πω τι ακριβώς έφτεγε, δεν το έχω ακόμα καταλάβει, απλά έκανα το αυτονοήτο που μέχρι που έκανα το πρώτο μου post δεν το είχα κάνει...έκανα copy - paste τα κομμάτια κώδικα από την πηγή που σας έδωσα σε "καθαρη σελίδα" (!!!!) και αφού δούλεψε μετά σιγά σιγά τα ενσωμάτωσω στον δικό μου κώδικα και δούλεψε.... :o ...δεν ξέρω πραγματικά τι να πω....

Dik_ σε ευχαριστώ για την απάντησή σου! Όπως μπορείς να δεις και στην σχετική πηγή, στο ajaxform.php δεν καλώ πουθενά άλλου το validate είναι όπως το βλέπεις! Τώρα όσο για το θέμα αν θα χρησιμοποιήσεις "POST" ή "GET" πιστεύω το GEΤ είναι το κατάλληλο καθώς αν παρατηρήσεις στον κώδικα του registration καλούμε τo validate της ajaxform με την εξής μορφή: ajaxform.php?name=dik_. Σε αυτή την περίπτωση λοιπόν η χρήση POST δεν βοηθάει πιστεύω!
Εικόνα

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Validate Username with Ajax

Δημοσίευση από skeftomilos » 26 Φεβ 2008 01:41

Υπάρχουν πολλές πιθανές αιτίες για το πρόβλημα:

1) Σφάλμα στο script. Δες την κονσόλα Javascript του Firefox (Tools -> JavaScript Console).
2) Σφάλμα στο URL. Δες τα logs του web server. Στην http.open καλύτερα να δίνεις absolute urls (http://..)
3) Σφάλμα στο server script. Γράψε το URL στη location bar να δεις τι θα συμβεί.
4) Σφάλμα λόγω ανεπιθύμητου cashing. Βάλε λίγο salt στο url για να διαφέρει από request σε request. Π.χ. ...&salt=' + new Date().getTime()
5) Λάθος στη σειρά των εντολών. Καλύτερα η http.onreadystatechange να προηγείται της http.open.
6) Name collision. Υπάρχει άλλη ρουτίνα validate(); Υπάρχει κανένα element με id="validate" ή name="validate"; Καλύτερα δώσε πιο συγκεκριμένο όνομα στη ρουτίνα, π.χ. validateUserName().
7) Πολλαπλές script engines. Αλλού έχεις <script language="javascript"> και αλλού σκέτο <script>. Καλύτερα παντού <script type="text/javascript">.
8) Πρόβλημα στο encoding. Αρχικά δοκίμασε με αγγλικά ονόματα.

Αν όλα αποτύχουν, δοκίμασε να βάλεις κανένα alert('@') σε διάφορα μέρη του κώδικα, να δεις τι τρέχει και τι δεν τρέχει.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Validate Username with Ajax

Δημοσίευση από skeftomilos » 26 Φεβ 2008 01:55

Ουπς! Λύθηκε κιόλας!

Κι εγώ θα έλεγα ότι το GET είναι προτιμότερο, γιατί το request δεν προκαλεί μεταβολή στο state του server.

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

Validate Username with Ajax

Δημοσίευση από dik_ » 26 Φεβ 2008 02:05

Risk, αν το ajaxform.php περιέχει μόνο ό,τι παρέθεσες, απορώ πως σου έτρεξε τελικά! Κανονικά θα έπρεπε να είναι κάπως έτσι:

Κώδικας: Επιλογή όλων

<?php
validate&#40;$_GET&#91;'name'&#93;&#41;;
function validate&#40;$name&#41;&#123; 
    ...
&#125;
?>
αλλιώς η validate() δεν εκτελείται ποτέ, και γι' αυτό δεν έχεις αποτέλεσμα.

Όσο για τις μεθόδους GET/POST, μπορείς να στείλεις values και με POST με το XMLHttpRequest.

Άβαταρ μέλους
Risk
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2006 01:16
Τοποθεσία: Κάπου εδώ γύρω...
Επικοινωνία:

Validate Username with Ajax

Δημοσίευση από Risk » 26 Φεβ 2008 10:36

dik_ έγραψε:Όσο για τις μεθόδους GET/POST, μπορείς να στείλεις values και με POST με το XMLHttpRequest.
Dik_ χτες σου απάντησα κάπως βιαστηκά και σίγουρα δεν τεκμηριώσα σωστά την απάντησή μου! Στην παρατήρηση που κάνεις συμφωνώ, values στέλνονται σίγουρα και με POST, όμως υπάρχει διαφορετικός τρόπος υλοποίησης του κώδικα. Δες ένα παράδειγμα:

1. Περίπτωση GET

Κώδικας: Επιλογή όλων

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open&#40;"GET", url+"?"+params, true&#41;;
http.onreadystatechange = function&#40;&#41; &#123;//Call a function when the state changes.
	if&#40;http.readyState == 4 && http.status == 200&#41; &#123;
		alert&#40;http.responseText&#41;;
	&#125;
&#125;
http.send&#40;null&#41;;
2. Περίπτωση POST

Κώδικας: Επιλογή όλων

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open&#40;"POST", url, true&#41;;

//Send the proper header information along with the request
http.setRequestHeader&#40;"Content-type", "application/x-www-form-urlencoded"&#41;;
http.setRequestHeader&#40;"Content-length", params.length&#41;;
http.setRequestHeader&#40;"Connection", "close"&#41;;

http.onreadystatechange = function&#40;&#41; &#123;//Call a function when the state changes.
	if&#40;http.readyState == 4 && http.status == 200&#41; &#123;
		alert&#40;http.responseText&#41;;
	&#125;
&#125;
http.send&#40;params&#41;;
Πηγή: www.openjs.com/articles/ajax_xmlhttp_using_post.php

Άρα λοιπόν έτσι όπως έχω υλοποιήσει τον ajax κώδικα το GET είναι το κατάλληλο! Τώρα για το $_GET['name'], η αλήθεια είναι πως και εγώ όταν έφτιαξα τον κώδικα το είχα βάλει, μέτα όμως από το copy-paste που έκανα αυτό το GET δεν υπάρχει. Άμα δεις και στην αντίστοιχη σελίδα απ' όπου πήρα τον κώδικα ούτε εκεί υπάρχει! Μου προκάλεσε και εμένα απορία, αλλά με είχε παιδεύσει τόσο μέχρι να βγει, που δεν έδωσα και πολύ σημασία να σου πω την αλήθεια!!!

@skeftomilos:
Οι απόψεις ενός script master είναι πάντα οφέλιμες!!! Είναι πολύ ενδιαφέρουσες οι πιθανές αιτίες που ανέφερες και σίγουρα θα τις έχω υπ' όψιν μου για κάποιο άλλο bug κάποια άλλη στιγμή!

Σας ευχαριστώ όλους σας!!!
Εικόνα

Άβαταρ μέλους
dik_
Δημοσιεύσεις: 476
Εγγραφή: 07 Ιουν 2007 11:28

Validate Username with Ajax

Δημοσίευση από dik_ » 26 Φεβ 2008 12:59

Στο script της σελίδας υπάρχει η κλήση στην validate():

Κώδικας: Επιλογή όλων

echo validate&#40;trim&#40;$_REQUEST&#91;'name'&#93;&#41;&#41;;
Τώρα βλέπω ότι υπάρχει και στη δική σου παράθεση, αλλά είναι commented out και σε λάθος σημείο (μέσα στην ίδια τη validate() και όχι έξω όπως θα έπρεπε)...

Για την POST δεν είπα ότι πρέπει να αλλάξεις μόνο τη λέξη GET σε POST. Λέγοντας να χρησιμοποιήσεις POST εννοούσα να προσαρμόσεις το όλο js script. Αλλά αφού είσαι ευχαριστημένος με τη GET και την προτείνει και ο skeftomilos, οκ! ;) Βεβαιώσου ότι τεστάρεις με κενά, ελληνικούς χαρακτήρες, ampersands κτλ!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης