Na swojej stronie mam formularz rejestracji. Jednym z pól jest pole email do wpisywania maila. Po stronie przeglądarki następuje sprawdzenie czy nie jest on za krotki jak na email, a następnie jest on wysyłany ajaxem na serwer w celu zweryfikowania poprawności na bazie strony podanej po znaku @ a także sprawdzenia, czy nie zawiera on jakichś dziwnych znaków.
Wynik zwracam do funkcji w opcjach metody ajax. Tak wygląda kod, który aktualnie posiadam:
var email = $("#email"); var emailInfo = $("#emailInfo"); email.blur(validateEmail); function validateEmail() { var text = email.val(); var flag = "napis"; if(email.val().length<5) { errorInput(email,emailInfo,"Za krótki email"); return false; } var request = $.ajax({ type:"POST", url:"test2.php", data:"opcja=email&wartosc="+text, async:false, success:function(data){ flag = data; }, error:function(XMLHttpRequest, textStatus, errorThrown) { errorInput(email,emailInfo,"Wystąpil błąd na stronie"); return false; } }); /*email.ajaxStart(function(){ email.html('<img src="load.gif"/>'); });*///@moja proba wlaczenie loada request.fail(function(){alert("Wystąpił błąd");}); if(flag=="true") { correctInput(email,emailInfo,"OK"); return true; } else { errorInput(email,emailInfo,"Zły adres e-mial"); return false; } }
Jak widać nie mogę zwrócić bezpośrednio z funkcji w opcji success true lub false, bo nie zwróci mi się wtedy wynik z działania całej funkcji validateEmail, a jest mi on potrzebny. Dlatego postanowiłem zastosować flage, której nadaję wartość wynikową wywołania skryptu php. Żeby zostało to odpowiednio odczytane przez resztę funkcji validateEmail zastosowałem asynchroniczne wysyłanie.
Właśnie tutaj występuje pewien problem, bo zgodnie z dokumentacją takie wywołanie powoduje chwilowe zawieszenie strony w zależności od czasu wykonania zapytania. Niestety dokumentacja nie kłamie i już teraz, przy zerowym obłożeniu serwera i niełączeniu się z bazą danych ten ułamek sekundy jest odczuwalny. Próbowałem dodać gifa z animacja ładowania - to też się nie udało, ale to jest tylko ozdoba informująca, że coś się dzieje, cały czas strona jest "zatrzymywana" na chwilę.
Tak więc wygląda mój pomysł i moje wykonanie. Teraz zwracam się do was z pytaniem, jak mogę to wykonać, żeby walidacja emaila przebiegała sprawnie i poprawnie, czyli żeby nie było odczuwalne to zawieszenie się strony, poprawnie został zwrócony wynik z funkcji validateEmail i ewentualnie, żeby się włączyła animacja ładowania, w czasie gdy skrypt będzie oczekiwał na odpowiedź ze skryptu.