Ajax Kullanarak Gerçek Zamanlı Form Doğrulaması

Şimdiye kadar İnternette form verisi girdiyseniz, büyük olasılıkla, verilerin belirli bir ölçüt setini karşıladığını doğrulamak için sunucu tarafında işleme kullanıldığı durumlarla karşılaşmış olabilirsiniz. JavaScript, e-posta adresleri, telefon numaraları, tarihler veya kredi kartı numaraları gibi basit verilerin biçimini doğrulamak için istemci tarafında kullanılabilir. Bununla birlikte, istemci tarafında işleme, iş kurallarını uygulayamayacağı veya doğrulamayı gerçekleştirmek için sunucu tarafı veri kaynaklarına erişememesi nedeniyle sınırlıdır.

Aşağıdaki kullanım durumlarından bazılarını göz önünde bulundurun:

• Bir çevrimiçi hesap oluştururken bir kullanıcı adına zaten kayıtlı olup olmadığını doğrulamanız gerekiyor
• Özel iş mantığı gerektiren bir seri numarasını veya kupon kodunu doğrulamanız gerekir
• Veriyi sunucudaki veya veritabanında bulunan gerçek zamanlı verilerle bağlantılı olarak doğrulamanız gerekir

Geleneksel web uygulamaları, form verisinin sunucuya gönderilmesini gerektirir. Bunun ardından bu verilerin arka uç işleme tabi tutulması ve nihayet postun sonuçlarını veren bir HTML sayfası yenilemesi izlemektedir. Bununla birlikte, bu strateji, özellikle tek bir form alanının geçersiz olduğu ve kullanıcının büyük miktarda form verisini tekrar girmesi gerektiği durumlarda, son kullanıcı için dikkati dağıtabilir. Dolayısıyla sorun şu şekilde olur:

Sorun: “HTML sayfasını yenilemeden sunucu tarafı mantığı gerektiren form verilerini doğrulama nasil yaparsınız?”

Eşzamansız JavaScript ve XML (Ajax) etkileşimleri kullanarak, kullanıcı verileri bir HTML formunda yazarken neredeyse gerçek zamanlı olarak veri doğrulanabilir. Bu durumda, form verisi, arka planda bir sunucu tarafı bileşen tarafından doğrulanıyorken HTML sayfasının olayları işleme devam etmesini sağlayan eşzamansız olarak doğrulanır. Form verileri sunucu tarafı mantığının gerektirdiği ile eşleşmezse, kullanıcı hemen bilir ve HTML sayfasını yenilemek zorunda kalmadan değiştirebilir.

Bu çözüm basit bir stratejiyi izlemektedir:

1. Birincisi, istemcideki bir Ajax doğrulaması, bir form alanındaki bir tuşa basma veya odaklamayı kaybeden bir form alanında olduğu gibi bir HTML JavaScript olayıyla başlatılır. Bir JavaScript işlevi daha sonra bir XMLHttpRequestnesne oluşturur ve yapılandırır; bu nesne, çağrılacak URL’yi, doğrulamak için form verilerini (URL parametreleri olarak gönderilebilir) ve bir geri arama işlevini içerir. Bu örnekte, XMLHttpRequestnesne çağıran URL bir servlet ile eşleştirilir. XMLHttpRequestHTML sayfasının gönderilmesinden sonra , HTML sayfası olayları işleme devam eder.
2. Sunucu tarafında, servlet isteği alır ve Java Servlet API’sini kullanarak doğrulamak üzere form parametrelerini ayıklar. Servlet daha sonra, form verisini doğrulamak için gerekli tüm iş mantığını uygular ve nihayet form XMLHttpRequestverilerinin geçerli olup olmadığını gösteren bir XML belgesini nesneye döndürür .
3. Yanıt XMLHttpRequestalındığında , nesne önceden yapılandırılmış geri arama işlevini çağırır. Bu işlev, sunucudan döndürülen XML belgesini temel alan HTML sayfasını güncelleştirir. Güncellenen sayfanın bölümleri derhal yeniden oluşturulur ve kullanıcı form verisinin geçerli olup olmadığını görebilir

Aşağıdaki resimler istemciye HTML sayfasındaki doğrudan geribildirimi göstermektedir.

Müşteri, kimlik girilirken kullanıcı kimliğinin geçerli olduğunu görecektir.

Sonuç: Geçersiz bir kullanıcı kimliği girildiğinde, kullanıcı hemen bilecek. Geçersiz kimliklerin bulunduğu durumlarda “Hesap Oluştur” düğmesinin de devre dışı bırakıldığına dikkat edin.

Bu noktada, bir form gönderilmeden önce dinamik olarak form alanı verilerini denetlemek için Ajax’ı kullanan bir örnek uygulama inceleyelim. İşte, etkileşimi gerçekleştirmek için gereken istemci ve sunucu kodu.

• Index.jsp – Bu istemci tarafı HTML sayfası, önemli olaylara yanıt olarak Ajax isteklerini sunucuya gönderen basit bir form içeriyor. Bu Ajax istekleri, bir doğrulama servletini kullanarak form içeriğini doğrulayacaktır.

• Şekil 3: Ajax Doğrulaması için Sıra Diyagramı

  
  

  İstemci Tarafında İstekler

  Index.jsp sayfasındaki bu HTML giriş formu, gerçek zamanlı doğrulama gerçekleştiren kullanıcı girdisini kabul eder.

  <Input type = "metin" Size = "20" Id = "kullanıcı kimliği" Isim = "kimlik" Otomatik tamamlama = "kapalı" Onkeyup = "validateUserId ()"> 1 2 3 4 5 6   <Input type = "metin"             Size = "20"                 Id = "kullanıcı kimliği"             Isim = "kimlik"     Otomatik tamamlama = "kapalı"          Onkeyup = "validateUserId ()">

   
  Biz dahil ettik unutmayın 'autocomplete="off"'özelliği. Autocompletion, aynı kimliğe sahip önceki metin form alanlarına girdiklerinizi “hatırlayan” bir tarayıcı özelliğidir. Tarayıcı, form alanına metin girdiğiniz her sefer bir açılır menüde önceki girişleri görüntüleyerek girişinizi otomatik tamamlamaya çalışır. Bu genellikle yararlı bir özelliktir. Bununla birlikte, gerçek zamanlı form doğrulamasında, tarayıcının otomatik tamamlama kullanmasını önlemek istiyoruz, bu nedenle bu özelliğin kapatılmasını talep ediyoruz.

  Bu form, validateUserId()her tuşa basıldığında JavaScript işlevini çağırır . (Daha kapsamlı bir örnek, gecikme ve sunucu yükü bir sorun haline gelebileceği için sadece “onkeyup” dışında başka etkinliklere temel doğrulamayı seçebilir. Böyle bir örnek ayrıca hangi tuşların basıldığını inceleyebilir ve “Kontrol”, ” “Meta” veya ok tuşları.) Ajax etkileşimini yöneten validateUserId()işlev veAJAXInteractionnesne aşağıda gösterilmektedir.

  Işlev AJAXİşlevsızlık (url, callback) { Var req = init (); Req.onreadystatechange = processRequest; Işlevi init () { If (window.XMLHttpRequest) { Yeni XMLHttpRequest () dön; } Else if (window.ActiveXObject) { Yeni ActiveXObject dön ("Microsoft.XMLHTTP"); } } Işlevi processRequest () { // readyState of 4, talebin tamamlandığını belirtir If (req.readyState == 4) { // 200 durumu, başarılı HTTP çağrısını belirtir If (req.status == 200) { If (geri arama) geri arama (req.responseXML); } } } This.doGet = işlev () { // URL'ye eşzamansız olarak bir HTTP GET isteği oluştur Req.open ("GET", url, true); Req.send (null); } } Işlev validateUserId () { Var target = document.getElementById ("kullanıcı kimliği"); Var url = "validate? Id =" + kodlama bileşeni (target.value); Var ajax = new AJAXInteraction (url, validateCallback); Ajax.doGet (); } Işlev validateCallback (responseXML) { // daha fazla bilgi için aşağıdaki "Geri Arama Fonksiyonu" na bakınız. } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Işlev AJAXİşlevsızlık (url, callback) {       Var req = init ();     Req.onreadystatechange = processRequest;              Işlevi init () {       If (window.XMLHttpRequest) {         Yeni XMLHttpRequest () dön;       } Else if (window.ActiveXObject) {         Yeni ActiveXObject dön ("Microsoft.XMLHTTP");       }     }          Işlevi processRequest () {       // readyState of 4, talebin tamamlandığını belirtir       If (req.readyState == 4) {         // 200 durumu, başarılı HTTP çağrısını belirtir         If (req.status == 200) {           If (geri arama) geri arama (req.responseXML);         }       }     }       This.doGet = işlev () {       // URL'ye eşzamansız olarak bir HTTP GET isteği oluştur       Req.open ("GET", url, true);       Req.send (null);     } }   Işlev validateUserId () {     Var target = document.getElementById ("kullanıcı kimliği");     Var url = "validate? Id =" + kodlama bileşeni (target.value);     Var ajax = new AJAXInteraction (url, validateCallback);     Ajax.doGet (); }   Işlev validateCallback (responseXML) {   // daha fazla bilgi için aşağıdaki "Geri Arama Fonksiyonu" na bakınız. }

   
  Burada validateUserId()işlev , URL’yi ve “validateCallback” geri arama işleviyle AJAXInteractionyeni AJAXInteraction(url, validateCallback)çağırarak bir nesne oluşturur. Bu örnekte, URL yalnızca kullanıcı kimliği bir URL parametresi olarak içerir. Sunucuda doğrulamak için URL parametreleri olarak daha fazla form değeri eklemeyi seçebilirsiniz. Eşzamansız Ajax isteği çağrıldığında başlatılır ajax.doGet(). Bu örnek, “validate” URL’sine eşzamansız bir istek göndermek için HTTP GET yöntemini kullanmaktadır. “Kullanıcı kimliği” metin alanının değeri, “kimlik” adı olan bir kaçış URL parametresi olarak gönderilir. Sunucuda, “validate”, URL’ye eşlenen realtive bir URL’dir ValidateServlet.

  Sunucu Tarafında İşlem

  İstek sunucuya ValidationServlet doGet()ulaştığında , yöntem doğrulama isteklerini gerçekleştirir. İlk olarak, gönderilen kimlik, aşağıda gösterildiği gibi basit bir java.util.HashMaphesapta bulunan kullanıcı kimlikleri listesine karşı kontrol edilir . Daha kapsamlı bir örnek, bir veritabanı veya diğer adlandırma kayıt defterine karşı kontrol edebilir.

  Public void init (ServletConfig yapılandırması) ServletException atıyor { Super.init (); Accounts.put ("greg", "hesap verileri"); Accounts.put ("duke", "hesap verileri"); } Public void doGet (HttpServletRequest isteği, HttpServletResponse yanıtı) IOException, ServletException atıyor { String targetId = istek.getParameter ("id"); If ((targetId! = Null) &&! Accounts.containsKey (targetId.trim ())) { Response.setContentType ("metin / xml"); Response.setHeader ("Önbellek Kontrolü", "no-cache"); Response.getWriter (). Write ("true"); } Else { Response.setContentType ("metin / xml"); Response.setHeader ("Önbellek Kontrolü", "no-cache"); Response.getWriter (). Write ("false"); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     Public void init (ServletConfig yapılandırması) ServletException atıyor {         Super.init ();         Accounts.put ("greg", "hesap verileri");         Accounts.put ("duke", "hesap verileri");     }          Public void doGet (HttpServletRequest isteği,                       HttpServletResponse yanıtı)         IOException, ServletException atıyor     {                  String targetId = istek.getParameter ("id");             If ((targetId! = Null) &&! Accounts.containsKey (targetId.trim ())) {             Response.setContentType ("metin / xml");             Response.setHeader ("Önbellek Kontrolü", "no-cache");             Response.getWriter (). Write ("true");         } Else {             Response.setContentType ("metin / xml");             Response.setHeader ("Önbellek Kontrolü", "no-cache");             Response.getWriter (). Write ("false");         }     }

   
  Bir doğrulama isteğinde geçersiz bir kullanıcı kimliği, kullanıcıya döndürülen bir hata iletisine neden olabilir. Bu örnekte, istemci XMLHttpRequestnesnesinin bu örnekteki XML’i bekleyeceğinden , Content-Type öğesinin text / xml olarak ayarlanması gerektiğini unutmayın. Buna ek olarak, bazı tarayıcı istemcilerinin önbelleğe alınmış yanıtları kullanmasını önlemek için Cache-Control üstbilgisi no-cache’e ayarlanmalıdır (HTTP 1.0 istemcileri için üstbilgi adı Pragma’dır).

  Geri Arama Fonksiyonu

  Sunucudan bir yanıt aldıktan sonra, istemci tarafı XMLHttpRequestnesnesi (nesneye sarılır AJAXInteraction) Ajax çağrısınınsonucunu denetler. Eğer XMLHttpRequest readyStatebaşarılı bir Ajax etkileşimi anlamına 4, ve HTTP yanıt kodu başarılı bir HTTP çağrısı gösteren 200 olduğunu, daha sonra validateCallback()geri çağırma işlevi çağrılır.

  Sunucudan alınan XML belgesi processRequest(), aşağıda gösterilen işleve bir argüman olarak iletilir .

  Işlev validateCallback (responseXML) { Var msg = responseXML. GetElementsByTagName ("geçerli") [0] .firstChild.nodeValue; If (msg == "false") { Var mdiv = document.getElementById ("userIdMessage"); // div üzerindeki stili geçersiz olarak ayarla Mdiv.className = "bp_invalid"; Mdiv.innerHTML = "Geçersiz Kullanıcı Kimliği"; Var submitBtn = belge.getElementById ("submit_btn"); SubmitBtn.disabled = true; } Else { Var mdiv = document.getElementById ("userIdMessage"); // div üzerindeki stili geçerli olarak ayarlayın Mdiv.className = "bp_valid"; Mdiv.innerHTML = "Geçerli Kullanıcı Kimliği"; Var submitBtn = belge.getElementById ("submit_btn"); SubmitBtn.disabled = false; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Işlev validateCallback (responseXML) {      Var msg = responseXML.        GetElementsByTagName ("geçerli") [0] .firstChild.nodeValue;      If (msg == "false") {          Var mdiv = document.getElementById ("userIdMessage");          // div üzerindeki stili geçersiz olarak ayarla          Mdiv.className = "bp_invalid";        Mdiv.innerHTML = "Geçersiz Kullanıcı Kimliği";        Var submitBtn = belge.getElementById ("submit_btn");        SubmitBtn.disabled = true;       } Else {          Var mdiv = document.getElementById ("userIdMessage");          // div üzerindeki stili geçerli olarak ayarlayın          Mdiv.className = "bp_valid";        Mdiv.innerHTML = "Geçerli Kullanıcı Kimliği";        Var submitBtn = belge.getElementById ("submit_btn");        SubmitBtn.disabled = false;     }   }

   
  <valid>Içeren unsur, ya “doğru” ya da “yanlış”, kontrol edilir ve HTML belgesi ve stilleri hemen sonuçlarına göre değiştirilir. CSS stilleri, JavaScript kodundan dışa aktarılır ve sayfanın üst kısmında tanımlanır:

  <Stil türü = "metin / css"> .bp_invalid { Beyaz renk; Arka plan: kırmızı; } .bp_valid { Renk: yeşil; } </ Stil> 1 2 3 4 5 6 7 8 9 <Stil türü = "metin / css"> .bp_invalid {     Beyaz renk;     Arka plan: kırmızı; } .bp_valid {     Renk: yeşil; } </ Stil>

   
  Müşteri bir <valid>false</valid>ileti alırsa <div id="userIdMessage">öğenin içeriğini bir hata iletisi ile günceller ve öğenin içeriği ve stili aşağıdaki ifadeleri kullanarak ayarlanır:

  Mdiv.className = "bp_invalid" Mdiv.innerHTML = "Geçersiz Kullanıcı Kimliği" 1 2 Mdiv.className = "bp_invalid" Mdiv.innerHTML = "Geçersiz Kullanıcı Kimliği"

   
  Çağrı başarılı olursa, userIdMessageşu ifadeyi kullanarak çağrılır:

  Document.getElementById ("userIdMessage") 1 Document.getElementById ("userIdMessage")

   
  Ve elemanın içeriği ve tarzı aşağıdaki gibi ayarlanır:

  Mdiv.className = "bp_valid" Mdiv.innerHTML = "Geçerli Kullanıcı Kimliği" 1 2 Mdiv.className = "bp_valid" Mdiv.innerHTML = "Geçerli Kullanıcı Kimliği"

   
  HTML belgesi otomatik olarak yeniden oluşturulacak ve uygun mesaj görüntülenecektir.

  <Tr> <Td> <b> Kullanıcı Kimliği: </ b> </ td> <Td> <Input type = "metin" Size = "20" Id = "kullanıcı kimliği" Isim = "kimlik" Otomatik tamamlama = "kapalı" Onkeyup = "validateUserId ()"> </ Td> <Td> <Div id = "userIdMessage"> </ div> </ Td> </ Tr> 1 2 3 4 5 6 7 8 9 10 11 12 13 14     <Tr>      <Td> <b> Kullanıcı Kimliği: </ b> </ td>      <Td>       <Input type = "metin"                 Size = "20"                     Id = "kullanıcı kimliği"                 Isim = "kimlik"          Otomatik tamamlama = "kapalı"              Onkeyup = "validateUserId ()">      </ Td>      <Td>       <Div id = "userIdMessage"> </ div>      </ Td>     </ Tr>

   
  <div id="userIdMessage">Yukarıdaki HTML snippet’i, gerçek zamanlı doğrulama sonuçlarını göstermek için form alanının yakınında görünen öğeyi gösterir .

  Onaylanmış Kullanıcı Kimliğini Gönderme

  Son olarak, kullanıcı “Hesap Oluştur” düğmesini tıklattığında, form HTTP POST yöntemini kullanarak “validate” URL’sine gönderilir.ValidateServlet doPost()Sunucuda yöntem daha sonra isteğini işler.

  Public void doPost (HttpServletRequest isteği, HttpServletResponse yanıtı) IOException, ServletException atıyor { String targetId = istek.getParameter ("id"); If ((targetId! = Null) && ! Accounts.containsKey (targetId.trim ())) { Accounts.put (targetId.trim (), "hesap verileri"); Request.setAttribute ("targetId", targetId); Context.getRequestDispatcher ("/ success.jsp"). Ileri (istek, cevap); } Else { Context.getRequestDispatcher ("/ error.jsp"). Ileri (istek, cevap); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23     Public void doPost (HttpServletRequest isteği,                        HttpServletResponse yanıtı)         IOException, ServletException atıyor      {           String targetId = istek.getParameter ("id");           If ((targetId! = Null) &&             ! Accounts.containsKey (targetId.trim ()))         {               Accounts.put (targetId.trim (), "hesap verileri");             Request.setAttribute ("targetId", targetId);             Context.getRequestDispatcher ("/ success.jsp").                 Ileri (istek, cevap);           } Else {               Context.getRequestDispatcher ("/ error.jsp").                 Ileri (istek, cevap);           }     }

   
  Burada, doPost()yöntem kullanıcı ID parametresini isteğinden ayıklar ve kayıtlı kullanıcı kimlikleri listesine ekler. Sonuç olarak, bu kullanıcı kimliğini girme girişimi sonraki isteklerde bir hatayla sonuçlanır. Müşteri daha sonra, id’in eklenip eklenemeyeceğine bağlı olarak basit bir başarı veya hata sayfasına yönlendirilecektir.

  Ajax işlevselliği bir kullanıcı kimliğinin geçerli olduğunu bildirmiş olsa da, kod kullanıcı kimliğinin listeye eklenmediğini yine de denetler. Bu, bir üçüncü tarafın istemcinin doğrulama isteği ile form gönderimi arasında bu kimliği kaydetmesi ihtimaline karşı bir güvenlik önlemidir. Form verileri, sunucu tarafında işlemeden önce daima yeniden doğrulanmalıdır. Form verilerini yenilemek başarısız olursa, sunucuda güvenlik açıkları veya tutarsız duruma neden olabilir.