4- پردازش درخواست توسط ValidateServlet

اینکه آیا ID کاربر در پایگاه داده ها موجود هست را servlet طراحی شده برای اعتبارسنجی URI بررسی می کند. servlet درخواست XMLHttpRequest را همانند سایر درخواست های HTTP پردازش می کند. مثال زیر نشان می دهد که یک سرور پارامترهه را از درخواست بیرون کشیده و آنها را اعتبارسنجی می نماید.

public class ValidateServlet extends HttpServlet  

{

   private ServletContext context;

   private HashMap users = new HashMap();

public void init(ServletConfig config) throws ServletException

  {

      this.context = config.getServletContext();

      users.put("greg","account data");

      users.put("duke","account data");

  }

public void doGet(HttpServletRequest request, HttpServletResponse response)

   throws IOException, ServletExcepion

   {

      String targetId = request.getParamete("id");

      if((targetId != null) && !users.comtainsKey(targetIdtrim()))

         {

response.setContentType("text/xml");

response.setHeader("Cash-Control", "no-cache");

response.getWriter().write("valid");

         } else {

response.setContentType("text/xml");

response.setHeader("Cash-Control","no-cache");

response.getWriter().write("invalid");

        }

   }

}

در این مثال ساده یک HashMap ساده که به نام users مورد استفاده قرار گرفته است. در این مثال، فرض می کنیم که کاربر کلمه duke را به عنوان ID تایپ کرده است.

5- بازگشت نتیجه بصورت سند XML از ValidateServlet

شناسه (ID)  "duke" در لیست شناسه های HashMap نشان داده می شود. ValidateServlet در پاسخ پیغام نامعتبر را به صورت یک سند XML می نویسد.

DOM, XSLT یا سایر APIها برای تولید پاسخ به موارد کاربردی پیچیده زیادی نیاز دارد.

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

response.geWriter().write("invalide");

طراحان باید به دو مطلب آگاهی داشته باشند. اول، نوع محتوا باید با text/xml هماهنگ باشد و دوم اینکه کنترل باید بدون کش تنظیم گردد. شی XMLHttpRequest فقط درخواستهایی را که نوع محتوی آن text/xml و کش کنترلهای آن به صورت ""no-Cache تنظیم شده باشد را پردازش می کند. تنظیم کش کنترلها به صورت غیرکش (no-Cache) باعث می شود که مرورگرها را از پاسخ کش محلی به درخواستهای مشابه برای یک URL، که ممکن است  پاسخهای متفاوتی را برگرداند، باز می دارد.

6- فراخوانی تابع callback() و پردازش نتیجه توسط شی XMLHttpRequest

شی XMLHttpRequest پیکربندی شده برای فراخوانی تابع callback() زمانیکه تغییراتی در وضعیت آماده (ready state) شی XMLHttpRequest وجود دارد. فرض کنید فراخوانی ValidateServlet انجام شده و وضعیت آماده برابر 4 می باشد، این نشان دهنده این می باشد که فراخوانی شی XMLHttpRequest به طور کامل انجام شده است. کد وضعیت 200 HTTP بیانگر این است که فعل و انفعال HTTP با موفقیت انجام پذیرفته است.

function callback()

{

if(req.readyState = = 4)

     {

if(req.status = = 200)

       {

//update the HTML DOM based on whether or not message is valid

        }

      }

}

مرورگرها یک شی سندی قابل نمایش را نگه می دارند(مراجعه شود به مدل DOM). تکنولوژی جاوا اسکریپت در صفحات HTML به DOM دسترسی دارد و APIهای  موجود ، به تکنولوژی جاوا اسکریپت اجازه می دهد که برای صفحه بارگذاری شده DOM را اصلاح نماید.

درخواست انچام پذیرفته زیر نشان می دهد که تکنولوژی جاوااسکریپت چگونه DOM مربوط به صفحه HTML را اصلاح می کند. شی حاضر XML بازیابی شده از ValidateServlet با استفاده از تابع req.responseXML در دسترس کد جاوا اسکریپت است، البته در مواقعی که شی ما از نوع XMLHttpRequest باشد. APIهای مربوط به Dom وسیله ای را برای تکنولوژی جاوا اسکریپت فراهم می نماید تا محتوی سند XML دریافتی را هدایت کرده و با استفاده از آن DOM مربوط به صفحه HTML را اصلاح نماید. رشته بازگردانده سند حاضر  XML، توسط فراخوانی req.responseXML قابل دسترسی است. با نگاهی به سند بازیابی شده XML از ValidateServlet در مثال زیر، چگونگی استفاده از APIهای DOM توسط تکنولوژی جاوا اسکریپت را ببینیم.

<message>

   valid

</message>

این مثال یک تکه ساده XML، شامل عنصر ارسال کننده پیام می باشد که یک رشته ساده "valid" یا "invalid" است. یک مثال پیشرفته تر شاید شامل بیش از یک پیام و اسامی معتبر تعریف شده توسط کاربر باشد:

function parseMessage()

{

var message = req.responseXML.getElementsByTagName("message")[0];

setMessage(message.childNodes[0].nodeValue);

}

تابع parseMessage() سند XMLبازیابی شده از ValidateServlet را پردازش می کند.این تابع برای به روز کردن  DOMصفحه HTML تابع setMessage() را با مقادیر عناصر پبغام فرا می خواند.

7-  HTML DOM به روز شده

در DOM که تعدادی API بکار برده می شود، برگشت و ارجاع به هر عنصری توسط تکنولوژی جاوا اسکریپت تقویت می شود.شیوه پیشنهاد شده برای تقویت بازیابی یک عنصر فراخوانی document.getElementById("userIdMessafe") می باشد. وقتی که userIdMessage به عنوان صفت یک عنصر در صفحه HTML ظاهر می شود. در رابطه با عناصر، تکنولوژی جاوا اسکریپت، صفات عناصر را اصلاح می کند ، خصوصیات style عناصر، اضافه کردن، کم کردن یا برای اصلاح عناصر فرزند مورد استفاده قرار می گیرد.

شیوه معمول برای تغییر محتوی یک عنصر، تنظیم خصوصیات داخلی HTML موجود در عنصر می باشد. همانند مثال زیر:

<script type="text/javascript">

function setMessage(message)

{

mdiv = document.getElementById("userIdMessage");

if(message = = "invalid")

{

mdiv.innerHTML = "<div style=\"color:red\">invalid User Id</div>";

} else {

mdiv.innerHTML="<div style=\"color:green\">Valid User Id</div>";

}

}

</script>

<body>

<div id="userIdMessage"></div>

</body>

اجزای تحت تاثیر قرارگرفته صفحه HTML بلافاصله بدنبال تنظیمات خصوصیات داخلیHTML بازسازی می شوند. اگرخصوصیات داخلیHTML شامل عناصری از قبیل <image> یا <iframe> باشد، محتوی توسط همان عناصرآورده و توسط همان عناصر بازسازی می شود.

در تکنولوژی جاوا اسکریپت عمده ترین نقطه منفی این روش اینست که عناصر HTML به عنوان رشته هایی دارای کد پیچیده می باشند. کد گذاری پیچیده HTML با تکنولوژی جاوا اسکریپت، روش خوبی نیست، چون خواندن کد را مشکل می سازد . همینطور نگهداری و اصلاح کد دشوار می شود. کاربرد APIهای DOM تکنولوژِی جاوااسکریپت را برای اصلاح و ایجاد عناصر HTML را در نظر داشته باشید. نمایش ترکیبی با کد جاوا اسکریپت به عنوان یک سری رشته، خواندن و ویرایش صفحه را مشکل می سازد. روش دیگر برای اصلاح HTML DOM، ایجاد عناصر جدید و پیوست کردن آنها به عنوان عناصر فرزند به عنصر نهایی مانند مثال زیر:

<script type="text/javascript">

function setMessage(message)

{

var userMessageElement = document.getElementById("userIdMessage");    var messageText;

if(message =="invalid")

{

userMessageElement.style.color = "red";

messageText = "Invalid User Id";

} else {

userMessageElement.style.color = "green";

messageText = "Valid User Id";

}

var messageBody = document.createTextNode(messageText);

//if the messageBody element has been created simple replace it otherwise

//append the new element

if(userMessageElement.childNode[0])

{

    userMessageElement.replaceChild(messageBody, usrMessageElement.childnodes[0]);

} else {

userMessageElement.appendChild(messageBody);

}

}

</script>

<body>

<div id="userIdMessage"></div>

</body>

نمونه کد نشان می دهد که چطور APIهای  DOM برای ایجاد یک عنصر و یا عنصر برنامه ای دیگر می تواند استفاده شود. در مرورگرهای مختلف، پشتیبانی APIهای DOM تفاوت دارد. بنابراین به هنگام توسعه برنامه های کاربردی بایستی مراقب باشید.

امیدوارم که تا اینجا از این مطلب نهایت استفاده رو برده باشین . چند نمونه از این استفاده ها رو در پست بعدی براتون ارسال می کنم .

باز هم از سرکارخانم اسدی جهت کمک در تهیه این مقاله کمال تشکر رو دارم.