بخش های اصلی

آموزش AJAX

آموزش AJAX – عملیات (Action)

در این بخش تصویر روشنی از مراحل دقیق عملیاتِ AJAX بدست خواهید آورد.

مراحل عملیاتِ AJAX

  •      یک رویداد سمت کلاینت رخ میده.
  •      یک شیءِ XMLHttpRequest ایجاد میشه.
  •      شیءِ XMLHttpRequest پیکربندی میشه.
  •      شیءِ XMLHttpRequest یک درخواست ناهمگام از سرور می سازه.
  •      وب سرور نتایج را که حاوی سندِ XML هستن، برمی گرداند.
  •      شیءِ XMLHttpRequest، تابعِ callback() را فراخوانی کرده و نتایج را پردازش می کنه.
  •      HTML DOM به روز رسانی میشه.

در ادامه تمام این مراحل را یکی یکی انجام میدیم.

یک رویداد سمت کلاینت رخ میده

  • بعنوان نتیجه ی یک رویداد، یک تابع جاوا اسکریپت فراخوانی میشه.
  • مثال: تابعِ جاوا اسکریپتِ validateUserId() بعنون یک event handler، به رویدادِ onkeyup مربوط به فیلد فرم ورودی ای که مقدارِ idاش “userid” است، map میشه.
  • <input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">.

شیءِ XMLHttpRequest ایجاد میشه

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction(){
   try{
      
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
   
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
      
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

شیءِ XMLHttpRequest پیکربندی میشه

در این مرحله، تابعی می نویسیم که با رویداد سمت کلاینت اجرا شده و فراخوانی تابعِ callback، processRequest ثبت میشه.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

ایجاد درخواست ناهمگام از سرور

همانطور که میبینین سورس کد این قسمت در قطعه کد بالا مشخص شده. قسمتی از کد که بصورت bold نوشته شده مسئول ایجاد درخواست از سروره. این کار با استفاده از شیءِ ajaxRequest که از نوعِ XMLHttpRequest است انجام میشه.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

فرض می کنیم در جعبه ی ورودیِ useid عبارتِ Zara را وارد کردین، بنابراین URL، در درخواست بالا، بصورتِ "validate?id=Zara" در میاد.

وب سرور نتایج را که حاوی سندِ XML است برمی گرداند

می توانید اسکریپت سمت سرور را با هر زبانی که بخواین پیاده سازی کنین، ولی در هر صورت منطق اسکریپت باید بصورت زیر باشه.

  •      درخواستی از کلاینت بگیره.
  •      ورودی سمت کلاینت را تجزیه و تحلیل کنه.
  •      پردازش های لازم را انجام بده.
  •      خروجی را به کلاینت بفرسته.

فرض می کنیم که میخواین یک servlet بنویسین، در این صورت کد بصورت زیر خواهد بود.

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException 
{
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim()))
   {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("true");
   }
   else
   {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("false");
   }
}

تابعِ callback، processRequest() فراخوانی میشه

 

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

HTML DOM به روز رسانی میشه

این مرحله آخرین مرحله ست، در این مرحله صفحه ی HTML به روز رسانی میشه. این عمل بصورت زیر انجام میشه:

  • جاوا اسکریپت با استفاده از DOM API، رفرنسی به هر عنصر میگیره.
  • روش توصیه شده برای دست یافتن به رفرنسِ یک عنصر، فراخوانیِ:
document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document
  • ممکنه از جاوا اسکریپت برای تغییر خصیصه های (attributes) عناصر، تغییر پراپرتی های استایل عنصر یا اضافه، حذف، یا تغییر عناصر فرزند استفاده بشه. در ادامه مثالی در این رابطه آورده شده:
<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
   var userMessageElement = document.getElementById("userIdMessage");
   var messageText;
   
   if (message == "false") {
      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.childNodes[0]) {
      userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
   } 
   else
   {
      userMessageElement.appendChild(messageBody);
   }
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>

اگه هفت مرحله ی مذکور را یاد گرفته باشین، تقریباً یادگیری AJAX را به پایان رساندین. در بخش بعدی، جزئیات بیش تر شیءِ XMLHttpRequest را بررسی خواهیم کرد.

مبحث آموزشی

آموزش AJAX

Learn AJAX

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد