Ajax. 3-qism

ZsxnvLvXueby5G3xO4od_21.png

Barcha browserlar ham AJAXni ishlata olmasligi mumkin. Quyida AJAXni ishlata oladigan browserlar ro’yxati keltirilgan.

  • Mozilla Firefox 1.0 va undan yuqori
  • etscape version 7.1 va undan yuqori
  • Apple Safari 1.2 va undan yuqori
  • Microsoft Internet Explorer 5 va undan yuqori
  • Konqueror.
  • Opera 7.6 va undan yuqori

AJAXdan foydalanib ilova yozishda ayrim browserlarning AJAXni ishlata olmasligini ham hisobga oling.

Yodda tuting. Browser AJAXni ishlata olmasligi bu shu browserning JavaScript XMLHttpRequest obyektini qo’llab quvvatlamasligini bildiradi.

Ilovangiz barcha browserlarda ishlashini ta’minlash uchun JavaScriptning try… catch blogidan foydalaning.

<html>

   <body>

      <script language = "javascript" type = "text/javascript">

         <!--

         function ajaxFunction() {

            var ajaxRequest;  // The variable that makes Ajax possible!

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

                     // Qandaydir xatolik

                     alert("Browseringizda ajax ishlamadi");

                     return false;

                  }

               }

            }

         }

         //-->

      </script>

      <form name = 'myForm'>

         Name: <input type = 'text' name = 'username' /> <br />

         Time: <input type = 'text' name = 'time' />

      </form>

   </body>

</html>

Yuqoridagi JavaScript kodda XMLHttpRequestni ishlatish uchun uch marta try dan foydalandik. Birinchi ishlatishimiz - ajaxRequest = new XMLHttpRequest();. Bu Opera 8.0+. FireFox va Safari browserlari uchun edi. Agar shu qismda xatolik yuz bersa try ni yana ikki marta Internet Explorer browser uchun quyidagi kodlarni ishlatib ko’ramiz:

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

Agar yuqoridagi ikkita kod ham ishlamasa, demak browser juda eski hisoblanadi va unda XMLHttpRequest ishlamaydi deb olinadi.

. Amaliy.

Bu qismda siz AJAXning ishlash jarayonini aniq qadamlar bilan ko’rasiz.

AJAXning ishl ish jarayoni qadamlari:

  • Mijoz tomonidan biror hodisa amalga oshiriladi
  • XMLHttpRequest obyekti yaratiladi
  • XMLHttpRequest obyekti sozlanadi
  • XMLHttpRequest obyekti web serverga asinxron so’rov yuboradi
  • XMLHttpRequest
  • Web server XML hujjat ko’rinishidagi natijaviy ma’lumotni qaytaradi.
  • XMLHttpRequest obyekt callback() funksiyani chaqirib natijani qayta ishlaydi.
  • HTML DOM yangilanadi.

Ushbu qadamlarni bittalab ko’rib chiqamiz.

Mijoz tomonidan biror hodisa amalga oshiriladi.

  • JavaScript funksiya sodir bo’lgan hodisaga javob sifatida ishga tushiriladi.
  • Masalan: validateUserId() funksiyasi sahifadagi foydalanuvchi idsi kiritiladigan maydonga yozuv yozilganda sodir bo’livchi hodisaga javob sifatida ishga tushadi. <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">

XMLHttpRequested obyekt yaratiladi.

var ajaxRequest;
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) {

            // Nimadir xatolik chiqdi
            alert("Browseringiz ishlamadi!");
            return false;
         }
      }
   }
}

XMLHttpRequest obyekt sozlanadi.

Bu qadamda mijoz tomonidan biror hodisa ishga tushirilganda hamda processRequest() callback funksiyasi yaratilganda ishga tushadigan funksiya yozamiz.

function validateUserId() {
   ajaxFunction();

   // Bu yerda processRequest()callback funksiya bo’ladi.
   ajaxRequest.onreadystatechange = processRequest;

   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

 

Webserverga asinxron so’rov yuborish

Bu yerda yuqorida yozilgan  so’nggi kodni yana qaytib yozamiz. Qora bilan yozilgan kodlar webserga so’rov yuborishni amalga oshiriladi. Bularning barchasi ajaxRequest XMLHttpRequest obyekti bilan qilinyapti.

 

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

 

Faraz qilaylik, siz userid sifatida Eshmat deb kiritdingiz, bu holatda yuqoridagi so’rovda URL “validate?id=Eshmat” bo’lib ishlatiladi.

Webserver XML hujjat ko’rinishida natijani qaytaradi. Serverdagi kodni xohlagan dasturlash tilida yozishingiz mumkin. Har qanday tilde ham mantiq quyidagicha bo’ladi:

 

  • Mijozdan so’rovni qabul qilib ol
  • Olingan ma’lumotlardan kerakli qismini ajratib ol
  • So’ralgan amalni bajar
  • Natijani mijozga jo’nat

Faraz qilaylik, mijozdan olingan ma’lumotni katta harflar bilan yana qaytaraylik:

<?php
   header('Content-Type: application/json');
   $data =strtoupper($_GET['userid']);
   print_r($data); 
?>

processRequest() callback funksiyasi chaqiriladi.

XMLHttpRequest obyektining holati readyStatega o’zgarganda XMLHttpRequest obyekt processRequest() funksiyasini chaqirishga sozlab qo’yiladi. Hozir bu funksiya serverdan natijani qabul qiladi va kerakli amalni bajaradi. Quyidagi misolda serverdan natija kelganiga qarab xabar keldi yoki kelmadi degan yozuv chiqaradi.

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

 

HTML DOM yangilanadi.

Bu oxirgi qadam bo’lib bu qadamda HTML sahifangiz yangilanadi. U quyidagicha yuz beradi:

  • JavaScript DOM API yordamida sahifaning kerakli elementini oladi. document.getElementById("userIdMessage"), // "userIdMessage" HTML DOMdagi element id si.
  • Keyin JavaScript yordamida elementning attributini, stil xususiyatlarini o’zgaritirish, qo’shish o’chirish mumkin. M:
    • <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 (userMessageElement.childNodes[0]) {
               userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
            } else {
               userMessageElement.appendChild(messageBody);
            }
         }
         -->
      </script>

Agar yuqoridagilarni tushungan bo’lsangiz demak siz deyarli AJAX bilan ishlay olasiz.

XMLHttpRequest obyekti.

XMLHttpRequest AJAXning eng asosiy qismi hisoblanadi.

XMLHttpRequest(XHR) – API bo’lib u JavaScript, Jscript, VBScript va boshqa web browser script tillarida HTTPdan foydalanib serverga(hamda serverdan) XML ma’lumot uzatish(va qabul qilish)da foydalaniladi. Bunda u web sahifaning mijoz qismi va server qismi orasida mustaqil aloqa kanali o’rnatadi.

Shu paytgacha XMLHttpRequest yaratishga misol ko’rdingiz. Quyida siz bilishingiz kerak bo’lgan bazi metod va xususiyatlar berilgan:

  • abort() – joriy so’rovni bekor qiladi.
  • getAllResponseHeaders() – HTTP header ning to’liq to’plamini qaytaradi
  • getResponseHeader(headerName) – so’ralgan HTTP header ning qiymatini qaytaradi
  • open(metod, URL)
  • open(metod, URL, async)
  • open(metod, URL, async, userName)
  • open(metod, URL, async, username, password) – so’rovning metodini, URLini va boshqa kerakli parametrlarini o’rnatadi. Metod “GET”, “POST” yoki “HEAD” bo’lishi mumkin. Boshqa “PUT” va “DELETE” kabi HTTP metodlar ham ishlatilishi mumkin. “async” parametri so’rov asinxron holda ishlashi kerakmi yoki yo’qligini belgilaydi. Agar “true” bo’lsa ma’lumotni qayta ishlash send() metodi ishlashi bilan amalga oshiriladi. Bunda serverdan javob kelishi kutib o’tirilmaydi. “false” holatida serverdan javob kelmagunicha boshqa unga bog’liq birorta script ishlamay turadi.
  • send(kontent) – so’rovni yuboradi.
  • setRequestHeader(label, value) – HTTP header ga jo’natish uchun label/value juftligini qo’shadi.

XMLHttpRequest xususiyatlari

onreadtstatechange – biror hodisaning har bir holat o’zgarishida shu hodisani ishga tushiradi.

readyState – XMLHttpRequestning joriy holatini aniqlaydi.

Quyida readyState beruvchi qiymatlar keltirilgan:

Holat Izoh
0 So’rov yaratilmadi
1 So’rov sozlanmadi
2 So’rov jo’natilmadi
3 So’rov qayta ishlanmadi
4 So’rov amalga oshirildi

readyState = 0 – XMLHttpRequest obyekt yaratishdan oldin open() metodi yaratib qo’yilganda.

readyState = 1 – send() metodi open() metodidan oldin ishlatilganda

readyState = 2 – send() metodi ishlatilganidan keyin

readyState = 3 – browser server bilan aloqa o’rnatishidan oldin server javob qaytargan holatda

readyState = 4 – serverdan javob muvaffaqiyatli qabul qilib olinganda.

 

  • responseText – javobni string ko’rinishida qaytaradi
  • responseXML – javobni XML ko’rnishida qaytaradi.
  • Status – statusni raqam ko’rinishida qaytaradi.(m: 404, 200)
  • statusText – statusni string ko’rinishida qaytaradi(“Not found”, “OK”)