AJAX (asinxron JavaScript və XML) bir müştəri və server arasında asynchronous məlumat mübadiləsi vasitəsilə sorunsuz, interaktiv veb saytlar yaratmaq üçün bir üsuldur. AJAX, serverlə ünsiyyət qurmaq və ya səhifəni ənənəvi səhifə yeniləmədən qismən yeniləmək üçün asanlaşdırır.

asynchronous deməkdir.

Bu texnologiya özü olmasa da, 2005-ci ildə Jesse James Garrett tərəfindən hazırlanmış bir termindir. Bu, / , , [TG01], , , və ən əsası XMLHttpRequest obyektidir. istəklərini idarə etmək üçün XMLHttpRequest API (kısaltılmış ) istifadə edir.

məlumatların mübadiləsinin asinxron xarakterli olması çox faydalıdır. Görünüşündən əvvəl məlumatlar yalnız müştəri qarşılıqlı mərhələsində göndərilə bilər (ilk dəfə veb səhifəsi istənildiğinde). Bu, bütün məlumatların yükləmə müddətinə yüklənməli olduğunu və ya GET və ya POST əməliyyatları ilə birgə "dəmir" məlumatlarını (məsələn, bir səhifə yüklə, məlumatların dəyişdirilməsi, məlumatların göndərilməsi, bir səhifə yüklənməsi və s. .). Bütün məlumatların müştəriyə yüklənməməsi və ya hər bir GET və ya POST tələbi ilə əsas səhifənin yenidən yüklənməsi resurslar baxımından ucuzdur. müştəriyə məlumatları asynchronously yükləmək üçün javascript istifadə edərək veb modelini dəyişdi.

Müştəri yeni bir XMLHttpRequest açır və normal bir müştəri zəngində olduğu kimi bir web page XMLHttpRequest . Ancaq bu tələb, adətən, JavaScript üçün yalnız məlumat yükləyən xüsusi səhifəyə göndərilir. Beləliklə, bölüşdürülməsi tələb olunan məlumatlar yalnız vaxt, yaddaş və bant genişliyi qənaət etmək üçün bu funksiyaya lazım olanlarla məhdudlaşa bilər. Asynchronous olduğundan, bu qarşılıqlılıq veb səhifəsində aparılan hər hansı digər tədbirləri maneə törətməməli və müştərinin / brauzerin veb səhifəsi ilə bir proqram kimi davranmasına, digər resursları yenidən yükləmədən məlumatları mübadilə etməyə imkan verir.

da "X" , hər hansı bir məlumat növü göndərilə və qəbul edilə bilər. ( JavaScript obyekti notasyonu ) ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə ə Bunun əsas səbəbi, ilk növbədə analiz edir, isə daha yavaş və çətin bir müştəri kitabxanası ilə təhlil edilməlidir. Bu gün yeni ArrayBuffer obyektləri ( ArrayBuffer , Blob və s.) ArrayBuffer ilə XMLHttpRequest vasitəsilə ikili faylları tələb edə və daha güclü və tam özellikli web proqramları yarada bilərsiniz.

XMLHttpRequest , server və müştəri ilə əlaqə qurmaq üçün əsas üsuldur; Bu, bütün müasir brauzerlər tərəfindən dəstəklənir. Internet Explorer'in erkən versiyaları (IE 5 və 6), imkanlarının əksəriyyətinə sahib olan API- dəstəkləməsinə baxmayaraq, doğma API- dəstəkləmir (bunun bir nümunəsi new ActiveXObject("MSXML2.XMLHTTP.3.0") ). Qeyd edək ki, XMLHttpRequest birbaşa istifadə edildikdə, link səviyyəsini işləməlidir və tamamlanması üçün sorğunun cavabını gözləməlidir. Bunu aşağıdakı xəttdə görə bilərsiniz if (xmlhttp.readyState == 4 xmlhttp.status == 200) . Bu test, sorğunun statusunun tamamlanmadığını və düzgün cavab 200 olub-olmadığını yoxlayır. Bunun səbəbi, bu geri çağırma funksiyası, hər bir müştərinin serverdən bir paket aldıqları zaman çağırılacaqdır.


AJAX nümunəsi:

 var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4  xmlhttp.status == 200) { //stuff to do with response text (xmlhttp.responseText) } } xmlhttp.open("GET", "url", true); xmlhttp.send(); 

AJAX Məsələn 2:

 function (url, params) { // IE 5.5+ and every other browser var xhr = new(window.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0'); xhr.open("POST", url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8"); xhr.setRequestHeader("Accept", "application/json"); xhr.onreadystatechange = function () { if (this.readyState === 4) { if (this.status >= 200  this.status < 400) { console.log(JSON.parse(this.responseText)); } } } xhr.send(params); xhr = null; }, 

Bu üçün mürəkkəbliyi əlavə olduğundan, bu qarşılıqlılığı sizin üçün idarə edəcək bir çox kitabxanası var. Aşağıda geniş istifadə olunan kitabxanası və onun sadələşdirilməsi .


Məsələn jQuery AJAX:

 $.ajax({ url: "url", context: document.body }).done(function() { //stuff to do with response text }); 

Chrome 42, Edge 14 və Firefox 39/52-də brauzerlərdə ajaxı asanlaşdıran yeni bir API yaradılıb. Internet Explorer üçün dəstək yoxdur. fetch bir sözə əsaslanır.

AJAX nümunəsini alın:

 fetch('/url').then(res => res.json()).then(jsonData => console.log(jsonData)); fetch('/url', { method: 'POST', body: JSON.stringify({id: 1}), }) .then(res => res.json()).then(jsonData => console.log(jsonData)); 

AJAX çərçivələrinin siyahısı:

  1. Jquery ui
  2. MooTools
  3. Prototip
  4. YUI kitabxanası
  5. ASP.NET AJAX
  6. Spry çərçivəsi
  7. Dojo Toolkit
  8. Ext js
  9. Backbone.js
  10. AngularJS
  11. Unified.JS

Sərvətlər: