نحوه کار Ajax – آموزش Ajax

جمعه ۱۹ مرداد ۱۳۹۷
بازدید ۱,۵۹۰ نفر
یعثوب سیفی زاده
(13 امتیاز از 3 رای)
Loading...

تصویر how-ajax-works_3077 نحوه کار Ajax - آموزش Ajax

نحوه کار Ajax

در این بخش نحوه کار AJAX را به صورت مرحله به مرحله بررسی می کنیم.

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

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

بیایید این مراحل را یکی پس از دیگری انجام دهیم.

یک رویداد در سمت کاربر رخ می دهد

یک تابع جاوا اسکریپت به عنوان نتیجه رخداد یک رویداد فراخوانی می شود.
مثال: تابع validateUserId() به عنوان یک پردازنده رویداد onkeyup برای یک فیلد ورودی با شناسه “userid” تنظیم شده است.
<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;
         }
      }
   }
}

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 پیکربندی می شود

در این مرحله، یک تابع ایجاد می کنیم که توسط رویداد onkeyup فراخوانی می شود و یک تابع نیز برای پردازش نتیجه دریافتی از سمت وب سرور ثبت می کنیم.

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);
}

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);

}

ایجاد درخواست ناهمزمان (Asynchronous) به وب سرور

تابعی که در بالا سورس کد آن را مشاهده می کنید، مسئولیت ارسال درخواست به وب سرور را به عهده دارد و این کار را با استفاده از شیء ajaxRequest که از نوع XMLHttpRequest می باشد، انجام می دهد.

بخشی از کد بالا که با سرور کار می کند در کد زیر به صورت bold نشان داده شده است:

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

function validateUserId() {

ajaxFunction();

// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;

<strong>if (!target) target = document.getElementById("userid");

var url = "validate?id = " + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);</strong>

}

زمانی که شما در فیلد ورودی یک مقدار (مثلا ali) را وارد می کنید، تابع فوق فراخوانی می شود و یک درخواست به صورت “validate?id=ali” به سرور ارسال می شود.

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

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

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

مانند کد زیر:

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("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

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("<valid>true</valid>");

} else {

response.setContentType("text/xml");

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

response.getWriter().write("<valid>false</valid>");

}

فراخوانی تابع callback برای پردازش نتیجه دریافتی

شیء XMLHttpRequest که در بالا ایجاد کرده ایم، تابع processRequest() را زمانی فراخوانی می کند که وضعیت شیء به حالت readyState تغییر کند. اکنون این تابع، نتایج پاسخ سرور را دریافت می کند و در صورت لزوم پردازش مورد نیاز را بر روی آن انجام می دهد. در مثال زیر مقدار متغیر message بر اساس پاسخ دریافتی از سرور بر روی true یا false تنظیم می شود.

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

function processRequest() {

if (req.readyState == 4) {

if (req.status == 200) {

var message = ...;

...

}

HTML DOM به روز می شود

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

انتخاب عنصری که می خواهیم مقدار آن را به روز کنیم، با استفاده از تابع getElementById().

document.getElementById("userIdMessage"),
// where "userIdMessage" is the ID attribute
// of an element appearing in the HTML document

document.getElementById("userIdMessage"),

// where "userIdMessage" is the ID attribute

// of an element appearing in the HTML document

بعد از انتخاب عنصر، می توانید با استفاده از جاوا اسکریپت صفات آن را تغییر دهید.

مثال

<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>

<!--

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>

</body>

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

ایجکس - XMLHttpRequest ایجکس - پشتیبانی مروگرها