Ajax-a giriş. JQuery-ni asinxron Ajax sorğusunu yerinə yetirmək üçün necə əldə edə bilərəm? Jquery sinxron ajax

Səhifəni yenidən yükləmədən serverə sorğu göndərir. Bu, bir çox parametrləri olan aşağı səviyyəli bir üsuldur. Bu, bütün digər ajax metodlarının işləməsinin əsasını təşkil edir. İki istifadə variantı var:

url - sorğu ünvanı.
parametrlər - bu parametrdə bu sorğu üçün parametrləri təyin edə bilərsiniz. Formatda bir obyektdən istifadə etməklə müəyyən edilmişdir (ad: dəyər, ad: dəyər...) . Parametrlərin heç biri tələb olunmur. Siz $.ajaxSetup() metodundan istifadə edərək standart parametrləri təyin edə bilərsiniz.

Parametrlərin siyahısı

↓ ad: tip (standart dəyər)

Sorğu edildikdə, başlıqlar serverdən gözlənilən icazə verilən məzmun növlərini göstərir. Bu növlərin dəyərləri qəbul edilən parametrdən götürüləcək.

Varsayılan olaraq, səhifənin yenidən yüklənməsi olmayan bütün sorğular asinxron şəkildə baş verir (yəni serverə sorğu göndərdikdən sonra cavab gözləyərkən səhifə fəaliyyətini dayandırmır). Sorğunu sinxron şəkildə yerinə yetirmək lazımdırsa, parametri false olaraq təyin edin. Domenlərarası və "jsonp" sorğuları sinxron rejimdə icra edilə bilməz.

Xahiş edirik unutmayın ki, sorğuların sinxron rejimdə yerinə yetirilməsi sorğu tam tamamlanana qədər səhifənin bloklanması ilə nəticələnə bilər.

Bu sahədə serverə ajax sorğusu göndərməzdən əvvəl dərhal çağırılacaq funksiya var. Bu funksiya jqXHR obyektini dəyişdirmək üçün faydalı ola bilər (kitabxananın əvvəlki versiyalarında (1.5-ə qədər), jqXHR əvəzinə XMLHttpRequest istifadə olunur). Məsələn, lazımi başlıqları dəyişdirə/müəyyən edə bilərsiniz və s. jqXHR obyekti funksiyaya birinci arqument kimi ötürüləcək. İkinci arqument sorğu parametrləridir.

Bu sahədə siz əlavə sorğu başlıqlarını təyin edə bilərsiniz. Bu dəyişikliklər, son başlıq redaktələrinin edilə biləcəyi Göndərmə çağırılmadan əvvəl daxil ediləcək.

Bu parametr doğru olaraq təyin edildikdə, sorğu yalnız serverdən gələn cavab əvvəlki cavabdan fərqli olduqda "uğurlu" statusu ilə yerinə yetiriləcək. jQuery bu faktı Son dəyişdirilmiş başlığa baxaraq yoxlayır. jQuery-1.4-dən bəri, Son Modifikasiyaya əlavə olaraq, "etag" da yoxlanılır (hər ikisi server tərəfindən təmin edilir və serverdən tələb olunan məlumatın əvvəlki sorğudan dəyişdirilməməsi barədə brauzeri xəbərdar etmək lazımdır) .

jQuery onu başqa cür tanısa belə, səhifənin mənbə statusunu yerli (fayl protokolu üzərində olduğu kimi) təyin etməyə imkan verir. Kitabxana aşağıdakı protokollar olduqda səhifənin yerli olaraq işlədiyinə qərar verir: fayl, *-uzatma və vidcet.

Parametr dəyərini təyin etmək tövsiyə olunur Yerli qlobal olaraq - fərdi ajax sorğularının parametrlərində deyil, $.ajaxSetup() funksiyasından istifadə etməklə.

Jsonp sorğusu zamanı url-ə əlavə edilən parametrin adını müəyyən edir (defolt olaraq “geri çağırış” istifadə olunur - “http://siteName.ru?callback=...”).

jQuery-1.5-dən etibarən bu parametrin false olaraq təyin edilməsi əlavə parametrin url-ə əlavə edilməsinin qarşısını alacaq. Bu halda, siz açıq şəkildə jsonpCallback xassəsinin dəyərini təyin etməlisiniz. Məsələn: (jsonp:false, jsonpCallback:"callbackName").

Server jsonp sorğusuna cavab verdikdə çağırılacaq funksiyanın adını müəyyən edir. Varsayılan olaraq, jQuery bu funksiya üçün xüsusi ad yaradır ki, bu da kitabxananın işini asanlaşdıran üstünlük təşkil edən seçimdir. Öz jsonp sorğu emal funksiyanızı təyin etməyin səbəblərindən biri GET sorğularının keşləşdirilməsini təkmilləşdirməkdir.

jQuery-1.5-dən etibarən server cavabını özünüz idarə etmək üçün bu parametrdə funksiya təyin edə bilərsiniz. Bu halda, göstərilən funksiya serverdən alınan məlumatları qaytarmalıdır (müəyyən edilmiş funksiyada o, birinci parametrdə mövcud olacaq).

Varsayılan olaraq, serverə ötürülən bütün məlumatlar "application/x-www-form-urlencoded"ə uyğun gələn sətirə (url formatı: fName1=value1&fName2=value2&...) əvvəlcədən çevrilir. Əgər belə emala məruz qalmayan məlumatları (məsələn, DOM sənədi) göndərmək lazımdırsa, prosesData seçimini deaktiv etməlisiniz.

Bu parametr GET tipli domenlərarası ajax sorğuları üçün istifadə olunur, dataType "jsonp" və ya "script" ola bilər. Domenlər arası sorğunun icra olunacağı kodlaşdırmanı müəyyən edir. Xarici domendəki server öz doğma domeninin serverindəki kodlaşdırmadan fərqli kodlaşdırmadan istifadə edirsə, bu lazımdır.

(Bu parametr jQuery-1.5-də təqdim edilmişdir) sorğu icra kodlarının çağırılacaq funksiyalarla əlaqəli olduğu cütlər dəsti. Məsələn, 404 kodu üçün (səhifələr yoxdur) ekranda bir mesaj göstərə bilərsiniz:

$.ajax (( statusCode: ( 404 : funksiya () ( xəbərdarlıq ( "Səhifə tapılmadı" ); ) ) ) );

Sorğunun müvəffəqiyyət kodlarına cavab verən funksiyalar uğurlu sorğu idarəedicisi funksiyaları (uğur parametrində göstərilmişdir) ilə eyni arqumentləri alacaq və səhv kodlarına cavab verən funksiyalar səhv funksiyaları ilə eyni olacaq.

Serverə sorğu uğurla tamamlanarsa, çağırılacaq funksiya. O, üç parametrdən keçəcək: server tərəfindən göndərilən və artıq əvvəlcədən işlənmiş məlumatlar (müxtəlif məlumat növləri üçün fərqlidir). İkinci parametr icra statusu olan sətirdir. Üçüncü parametr jqXHR obyektini ehtiva edir (kitabxananın əvvəlki versiyalarında (1.5-ə qədər), jqXHR əvəzinə XMLHttpRequest istifadə olunur). jQuery-1.5-dən etibarən, bu parametr tək funksiya yerinə, bir sıra funksiyaları qəbul edə bilər.

Serverdən cavab gözləmək vaxtıdır. Millisaniyələrlə təyin edin. Əgər bu vaxt keçərsə, sorğu xəta ilə tamamlanacaq və xəta hadisəsi baş verəcək (yuxarıdakı təsvirə baxın), bu zaman "vaxt aşımı" statusuna sahib olacaq.

Vaxt $.ajax funksiyası çağırıldığı andan sayılır. Ola bilər ki, hazırda bir neçə başqa sorğu işləyəcək və brauzer cari sorğunun icrasını gecikdirəcək. Bu halda vaxt tamamlaya bilər, baxmayaraq ki, əslində sorğu hələ başlamamışdır.

jQuery-1.4 və daha əvvəlki versiyalarda XMLHttpRequest obyektinin vaxtı bitdikdə, o, xəta vəziyyətinə düşəcək və onun sahələrinə daxil olmaq istisna yarada bilər. Firefox 3.0+ versiyasında skript və JSONP sorğuları vaxt aşıbsa, dayandırılmayacaq. Bu müddət bitdikdən sonra da onlar tamamlanacaq.

XMLHttpRequest obyektini təmin edəcək funksiya. Varsayılan olaraq, IE brauzerləri üçün bu obyekt ActiveXObject, digər hallarda isə XMLHttpRequest-dir. Bu seçimlə siz bu obyektin öz versiyasını həyata keçirə bilərsiniz.

(Bu parametr jQuery-1.5.1-də təqdim edilmişdir) XMLHttpRequest obyektinin müvafiq sahələrinin dəyərlərini dəyişdirmək/əlavə etmək üçün (ad: dəyər) cütləri dəsti. Məsələn, domenlər arası sorğunu yerinə yetirərkən onun withCredentials xassəsini doğru olaraq təyin edə bilərsiniz:

$.ajax (( url: a_cross_domain_url, xhrFields: ( Credentials: true ) ) );

jQuery-1.5-də withCredentials xassəsi yerli XMLHttpRequest tərəfindən dəstəklənmir və domenlər arası sorğuda nəzərə alınmayacaq. Bu, kitabxananın bütün sonrakı versiyalarında düzəldildi.

Hadisə İşləyiciləri

BeforeSend, error, dataFilter, uğur və tam parametrlər (onların təsviri əvvəlki bölmədədir) hər bir ajax sorğusunun icrasında müəyyən nöqtələrdə baş verən hadisə idarəedicilərini təyin etməyə imkan verir.

göndərmədən əvvəl sorğu serverə göndərilməzdən dərhal əvvəl baş verir. səhv sorğu uğursuz olduqda baş verir. məlumat filtri verilənlər serverdən daxil olduqda baş verir. Server tərəfindən göndərilən "xam" məlumatları emal etməyə imkan verir. uğur sorğu uğurla tamamlandıqda baş verir. tam sorğu tamamlandıqda baş verir.

Sadə istifadə nümunəsi. Sorğu uğurla tamamlandıqda bir mesaj göstərəcəyik:

$.ajax (( url: "ajax/test.html" , müvəffəqiyyət: funksiya () ( xəbərdarlıq ("Yük yerinə yetirildi." ) ; ) ) );

JQuery-1.5-dən başlayaraq, $.ajax() metodu başqa şeylərlə yanaşı əlavə icra işləyicilərini təyin etməyə imkan verən təxirə salınmış interfeysi həyata keçirən jqXHR obyektini qaytarır. İşləyiciləri quraşdıra biləcəyiniz təxirə salınmış obyekt üçün standart .done(), .fail() və .then() metodlarına əlavə olaraq, jqXHR .success(), .error() və .complete() tətbiq edir. Bu, ajax sorğularını yerinə yetirmək üçün işləyicilərin quraşdırıldığı metodların adi adlarına uyğun olmaq üçün edilir. Bununla belə, jQuery-1.8-dən etibarən bu üç üsul köhnələcək.

Jsonp və ya çarpaz domen GET sorğuları kimi bəzi sorğu növləri XMLHttpRequest obyektlərinin istifadəsini dəstəkləmir. Bu halda, işləyicilərə ötürülən XMLHttpRequest və textStatus undefined dəyərini ehtiva edəcək.

İşləyicilərin daxilində bu dəyişən parametrin dəyərini ehtiva edəcəkdir Kontekst. Quraşdırılmadığı halda, bu parametrlər obyektini ehtiva edəcəkdir.

dataType parametri

$.ajax() funksiyası serverin özündən (MIME vasitəsilə) server tərəfindən göndərilən məlumatların növünü öyrənir. Bundan əlavə, bu məlumatların necə şərh edilməli olduğunu şəxsən göstərmək (aydınlaşdırmaq) imkanı var. Bu dataType parametrindən istifadə etməklə həyata keçirilir. Bu parametr üçün mümkün dəyərlər:

"xml"— nəticədə xml sənədi mətn şəklində olacaq. Standart jQuery alətlərindən (həmçinin html sənədi ilə) istifadə etməklə onunla işləyə bilərsiniz. "html"— nəticədə html mətn şəklində mövcud olacaq. Əgər teqlərdə skriptlər varsa, o zaman onlar yalnız html mətni DOM-a yerləşdirildikdə avtomatik icra olunacaq. "skript"— alınan məlumatlar javascript kimi icra olunacaq. Adətən serverdən gələn cavabı ehtiva edən dəyişənlər jqXHR obyektini ehtiva edir. "json", "jsonp"— alınan məlumatlar əvvəlcədən javascript obyektinə çevriləcək. Əgər təhlil uğursuz olarsa (bu, json-da səhvlər varsa baş verə bilər), o zaman fayl təhlili xətası istisnası atılacaq. Əgər daxil olduğunuz server başqa domendədirsə, json əvəzinə jsonp istifadə edilməlidir. json və jsonp haqqında Vikipediyada öyrənə bilərsiniz. "mətn"— alınan məlumatlar ilkin emal edilmədən düz mətndə mövcud olacaq.

Qeyd 1: Sorğu üçüncü tərəf domeninə göndərildikdə (bu, yalnız jsonp və ya skriptə bərabər dataType ilə mümkündür), xəta idarəçiləri və qlobal hadisələr işə düşməyəcək.

Qeyd 2: DataType-da göstərilən məlumat növü server tərəfindən verilən MIME məlumatı ilə ziddiyyət təşkil etməməlidir. Məsələn, xml məlumatları server tərəfindən mətn/xml və ya proqram/xml kimi təqdim edilməlidir. Bu uğursuz olarsa, jQuery qəbul edilmiş məlumatları müəyyən edilmiş tipə çevirməyə çalışacaq (bu barədə daha çox Konvertorlar bölməsində).

Məlumatların serverə göndərilməsi

Varsayılan olaraq, serverə sorğu HTTP GET metodundan istifadə etməklə edilir. POST metodundan istifadə edərək sorğu etmək lazımdırsa, tip parametrində müvafiq dəyəri göstərməlisiniz. POST metodu ilə göndərilən məlumat W3C XMLHTTPRequest standartının tələb etdiyi kimi, fərqli kodlaşdırmadadırsa, UTF-8-ə çevriləcək.

Məlumat parametri ya key1=value1&key2=value2 (url-də məlumat ötürmə formatı) formatında sətir kimi, ya da (ad:value) cütləri dəsti olan obyekt kimi - (açar1: "dəyər1", açar2: "dəyər 2"). Sonuncu halda, məlumatları göndərməzdən əvvəl, jQuery verilmiş obyekti $.param() istifadə edərək sətirə çevirir. Bununla belə, prosesData parametrini false olaraq təyin etməklə bu çevrilmə geri qaytarıla bilər. Bir sətirə çevrilmə, məsələn, xml obyektinin serverə göndərilməsi halında arzuolunmazdır. Bu halda contentType parametrini buradan dəyişmək məsləhətdir proqram/x-www-form-urlencoded daha uyğun mim tipinə.

Şərh:Əksər brauzerlər mövcud olandan başqa domenləri, alt domenləri və protokolları olan resurslar üçün Ajax sorğularına icazə vermir. Lakin bu məhdudiyyət jsonp və skript sorğularına şamil edilmir.

Serverdən məlumatların qəbulu

Serverdən alınan məlumatlar dataType parametrinin dəyərindən asılı olaraq sətir və ya obyekt kimi təqdim edilə bilər (yuxarıda dataType-a baxın). Bu məlumat həmişə ajax sorğunun icrası işləyicisinin birinci parametrində mövcuddur:

$.ajax (( url: "bəzi.php" , müvəffəqiyyət: funksiya (data) ( xəbərdarlıq ( "Mənfəət məlumatları: " + data ; ) ) );

Mətn və xml növləri üçün server tərəfindən göndərilən məlumatlar jqXHR-də, yəni onun cavab mətni və ya cavabXML sahələrində də mövcud olacaq.

Qabaqcıl Parametrlər

Qlobal parametrdən istifadə edərək, fərdi sorğular üçün hadisə idarəedicilərinin (.ajaxSend(), .ajaxError() və s.) icrasını söndürə bilərsiniz. Bu, məsələn, bu işləyicilərdə animasiya yüklənməsi başladılıb/dayandırıldıqda faydalı ola bilər. Sonra bəzi sorğular çox tez-tez və tez yerinə yetirilirsə, onda işləyicilərin icrasını söndürmək faydalı olacaq. Domenlərarası skript və jsonp sorğuları üçün qlobal parametr avtomatik olaraq söndürülür.

Əgər serverə sorğu göndərmək üçün identifikasiya məlumatları (giriş/parol) tələb olunursa, siz onu ajax sorğusunun istifadəçi adı və parol parametrlərində qeyd edə bilərsiniz.

Serverə sorğunun yerinə yetirilməsi üçün müəyyən vaxt ayrılır. Bu müddət ərzində server cavab göndərməzsə, sorğu xəta ilə başa çatır (status "taymout"). Serverdən cavabın gözləmə müddəti vaxt aşımı parametrində tələb olunan dəyəri (millisaniyələrlə) təyin etməklə dəyişdirilə bilər.

Elə ola bilər ki, host kodlaşdırması ajax sorğusunda tələb olunan javascript faylının kodlaşdırılmasından fərqlidir. Belə hallarda, scriptCharset parametrində sonuncunun kodlaşdırılmasını müəyyən etmək lazımdır.

Əksər hallarda, Ajax sorğusu asinxron şəkildə baş verir, lakin bəzi hallarda sorğunun ardıcıl yerinə yetirilməsi lazım ola bilər (serverdən cavab almadan skriptin sonrakı icrası mümkün olmadıqda). Async parametrini deaktiv etsəniz, sorğunu sinxronlaşdıra bilərsiniz. Bununla belə, yadda saxlamaq lazımdır ki, bu halda serverdən cavab gözləyərkən səhifə donacaq.

İstifadə nümunələri

Ən sadə istifadə halı parametrləri qeyd etmədən $.ajax()-a zəng etmək olardı:

$.ajax(); // GET sorğusu serverə heç bir parametr göstərilmədən cari səhifənin URL-inə göndəriləcək.

Əgər js faylını yükləməli və icra etməlisinizsə, bunu belə edə bilərsiniz:

$.ajax (( növü: "GET" , url: "test.js" , dataType: "script" ) );

Gəlin serverə POST sorğusu edək, iki parametr göstərək və uğurla tamamlanan sorğu haqqında istifadəçini xəbərdar edək:

$.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston" , müvəffəqiyyət: funksiya (msg) ( xəbərdarlıq ( "Məlumat gəldi: " + msg ) ; ) ) ) ;

İstədiyiniz html səhifənin məzmununu yeniləyək:

$.ajax (( url: "test.html" , cache: false , uğur: funksiya (html) ( $("#results" ) .append (html) ; ) ) );

Serverə sinxron sorğu verək. Sorğu yerinə yetirilərkən səhifə istifadəçi hərəkətlərinə cavab verməyəcək:

// serverdən html dəyişəninə göndərilən məlumatları yazın var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

Parametr olaraq serverə xml obyekti göndərəcəyik. Onu düzgün ötürmək üçün parametrlərin ilkin çevrilməsini ləğv etməlisiniz (processData:false). Sorğunun uğurla yerinə yetirilməsi üçün handlerResponse fərdi funksiyasını işləyici kimi təyin edəcəyik:

var xmlDocument = [ xml sənədi yaradın] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, uğur: handleResponse ) );

Qabaqcıl yanaşma

jQuery-1.5 ilə başlayaraq $.ajax() funksiyasından daha dərindən istifadə etməyə imkan verən üç yeni istiqamət var. Onlardan birincisi (Prefilters) sorğu göndərməzdən dərhal əvvəl əlavə manipulyasiyalar aparmağa imkan verir. İkinci yanaşma (Konverterlər) ilə siz jQuery-ə serverdən alınan məlumat gözlənilən formata uyğun gəlmirsə, onu necə çevirəcəyini söyləyə bilərsiniz. Üçüncü yanaşma (Nəqliyyat) ən aşağı səviyyədir, serverə sorğunu müstəqil şəkildə təşkil etməyə imkan verir.

Ön filtrlər

Bu yanaşma hər bir ajax sorğusu verilməzdən əvvəl çağırılan bir işləyicinin qurulmasından ibarətdir. Bu işləyici hər hansı digər ajax işləyicilərinin icrasından əvvəldir. O, $.ajaxPrefilter() funksiyasından istifadə edərək quraşdırılır:

$.ajaxPrefilter (funksiya (seçimlər, originalOptions, jqXHR) ( ) );

Harada
seçimlər— cari sorğunun parametrləri,
orijinal Seçimlər- standart parametrlər,
jqXHR— bu sorğunun jqXHR obyekti.

Ön filtrlər xüsusi parametrləri idarə etmək üçün əlverişlidir (yəni sorğuda göstərilən kitabxanaya məlum olmayan yeni parametrlər). Məsələn, siz öz abortOnRetry parametrinizi daxil edə bilərsiniz, o, aktiv olduqda, eyni url-də aşağıdakı sorğu qəbul edilərsə, gözlənilən sorğuları sıfırlayacaq:

var currentRequests = ( ); $.ajaxPrefilter (funksiya (seçimlər, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ])) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ;))) ;

AjaxPrefilter-də mövcud parametrləri emal etmək rahatdır. Məsələn, domenlər arası sorğunu domen serveriniz vasitəsilə yönləndirilən sorğuya belə dəyişə bilərsiniz:

$.ajaxPrefilter (funksiya (seçimlər) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) );

Bundan əlavə, siz prefilterin işləyəcəyi dataType dəyərlərini təyin edə bilərsiniz. Beləliklə, məsələn, json və skript növlərini təyin edə bilərsiniz:

$.ajaxPrefilter ( "json script" , funksiya (seçimlər, originalOptions, jqXHR) ( // Seçimləri dəyişdirin, originalOptions və jqXHR obyektini yoxlayın) );

Nəhayət, istədiyiniz dəyəri qaytarmaq üçün dataType dəyərini dəyişə bilərsiniz:

$.ajaxPrefilter (funksiya (seçimlər) ( // əgər url müəyyən şərtlərə cavab verirsə, dataType-ı skriptə dəyişdirin, əgər (isActuallyScript(options.url) ) ) ( "skript" ; ) );

Bu yanaşma təkcə sorğunun öz növünü skriptə dəyişəcəyinə deyil, həm də birinci parametrdə bu növü təyin edən digər prefilter işləyicilərinin də yerinə yetirilməsinə zəmanət verir.

Konvertorlar

Bu prinsip parametrlərdə göstərilən dataType server tərəfindən göndərilən məlumat növünə uyğun gəlmədikdə işləyəcək işləyicinin quraşdırılmasından ibarətdir.

Dönüştürücülər bir ajax parametridir, buna görə də qlobal olaraq təyin edilə bilər:

// bu yolla siz dataType-də göstərdiyiniz mydatatype tipinin yerinə // mətn tipli verilənlər $.ajaxSetup (( converters: ( "text mydatatype" : function ( textValue )) qəbul edildikdə işləyəcək işləyici təyin edə bilərsiniz. if (valid( textValue ) ) ( // ötürülən mətni emal edir mydatatypeValue qaytarır; ) else ( // server tərəfindən göndərilən məlumat gözlənilənlərə uyğun gəlmirsə, // istisna ata bilərsiniz. exceptionObject atın; ) ) ) ;

Öz (xüsusi) məlumat Tipinizi təqdim edərkən çeviricilər sizə kömək edəcək. Qeyd etmək vacibdir ki, belə dataType adında yalnız kiçik hərflərdən istifadə edilməlidir! Yuxarıda göstərilən "mydatatype" məlumat növü üçün sorğu belə görünə bilər:

$.ajax (url, (dataType: "mydatatype" ) );

JQuery, məqsədi "az yazmaq, daha çox etmək" olan javascript kitabxanasıdır. jQuery saytınıza qoşulmaq və istifadə etməyə başlamaq asandır. jQuery saytınızda javascript-dən istifadə etməyi xeyli asanlaşdırır.

jQuery javascript kodunun bütün sətirlərini aradan qaldırır və yalnız bir üsulla bu bütöv sətirləri həyata keçirməyə imkan verir.

AJAX nədir?

AJAX asinxrondur (yəni, brauzer sorğu göndərdikdən sonra istədiyi hər şeyi edə bilər, məsələn, cavab gözləyən mesajı göstərmək, səhifəni sürüşdürmək və s.) JavaScript və XML. Dinamik və sürətli veb səhifələr yaratmaq üçün istifadə olunur. AJAX bizə bütün səhifəni yenidən yükləmədən veb səhifənin bir hissəsini yeniləməyə imkan verir.

Bəs jQuery və AJAX?

jQuery və AJAX-ın birləşməsi güclü funksionallıq təmin edir. JQuery və ajax ilə siz XML, HTML və hətta düz mətn daxil olmaqla müxtəlif formatlarda sorğu edə və məlumat ala bilərsiniz. Məlumat mübadiləsi üçün JSON formatından istifadə edə bilərsiniz. Ajax sorğusu vasitəsilə alınan məlumatları html səhifəmizdə istifadə edə bilərik.

jQuery mövcud brauzer Ajax API-ni daha güclü və istifadəsini asanlaşdırır. Javascript-dən istifadə edərək ajax zənglərini normal şəkildə etmək bir qədər çətindir: çünki fərqli brauzerlərin XMLHttpRequest obyektini yaratmaq üçün fərqli yanaşmalar tələb etdiyini nəzərə almalısınız. Bundan əlavə, ajax zəngi üçün adi javascript istifadə etsəniz, məsələn, formalardan məlumatların təqdim edilməsi çətinləşir.

jQuery, javascript-in AJAX metodlarını genişləndirən və daha çevik yanaşma təmin edən sadə və güclü funksionallıq təmin edir.

Bu qısa məqalədə sizə jQuery və AJAX-dan sadə php formasında necə istifadə edəcəyinizi göstərəcəyəm. Başlayaq... jQuery və AJAX-dan istifadə etmək üçün bizə iki fayl lazım olacaq, birinci faylda ajax sorğusunun ediləcəyi html/php kodu olacaq. İkinci faylda biz ajax sorğusunu emal edəcəyik və nəticəni birinci səhifəyə qaytaracağıq.

Addım 1: school.php faylı yaradın və ona aşağıdakı kodu yapışdırın:

Yuxarıdakı kodda biz tələbə adını və nömrəsini alırıq və jquery və ajax istifadə edərək ətraflı.php-ə göndəririk.

funksiya getdetails())( var adı = $("#name").val(); var rno = $("#rno").val(); $.ajax((növ: "POST", url: " təfərrüatlar .php", data: (fname:name, id:rno) )).done(funksiya(nəticə) ( $("#msg").html(" Roll no " +rno +" ünvanı "+nəticədir" ;))))

Adınız:
Roll nömrəsi:

Addım 2: details.php yaradın və ora aşağıdakı kodu yerləşdirin:

Yuxarıdakı kodda ardıcıl nömrəsi və adından istifadə edərək tələbənin ünvanını alırıq.

Bu nümunə üçün siz məktəb məlumat bazası və tələbələr cədvəli yaratmalısınız. Tələbə cədvəlində adlar, ardıcıllıq nömrələri və ünvanlar olan sahələr var.

Ümid edirəm ki, bu məqalə sizə faydalı oldu.

Təsvir: Asinxron HTTP (Ajax) sorğusunu yerinə yetirir.

Versiyada əlavə edilib: 1.5
Versiyada əlavə edilib: 1.0

$.ajax() funksiyası jQuery vasitəsilə göndərilən bütün Ajax sorğularının əsasını təşkil edir. Çox vaxt bu funksiyanı çağırmağa ehtiyac yoxdur, çünki istifadə etmək daha asan olan $.get() və .load() kimi bir neçə yüksək səviyyəli alternativ var. Daha az yayılmış seçimlər tələb olunarsa, siz $.ajax() vasitəsilə sorğunu daha çevik şəkildə konfiqurasiya edə bilərsiniz.

Ən sadə formada $.ajax() funksiyası heç bir arqument olmadan çağırıla bilər:

Vacib: Defolt parametrlər $.ajaxSetup() funksiyasından istifadə etməklə təyin edilə bilər.

Bu misal, heç bir parametrdən istifadə edərək, cari səhifənin məzmununu yükləyir, lakin nəticə ilə heç nə etmir. Nəticəni istifadə etmək üçün geri çağırış funksiyalarından birini həyata keçirə bilərsiniz.

jqXHR obyekti

$.ajax() tərəfindən qaytarılan jQuery XMLHttpRequest (jqXHR) obyekti jQuery 1.5-dən bəri yerli XMLHttpRequest obyektinin super çoxluğu olmuşdur. Məsələn, o, respondText və respondXML xassələrini, həmçinin getResponseHeader() metodunu ehtiva edir. Sorğu üçün istifadə edilən nəqliyyat XMLHttpRequest-dən başqa bir şey olduqda (məsələn, JSONP sorğusu üçün skript teqi), jqXHR obyekti mümkün olduqda yerli XHR funksionallığını təqlid edir.

jQuery 1.5.1-dən etibarən jqXHR obyekti həmçinin overrideMimeType() metodunu ehtiva edir (bu, jQuery 1.4.x-də mövcud idi, lakin müvəqqəti olaraq jQuery 1.5-də silinib). .overrideMimeType() metodu beforeSend() işləyicisində istifadə edilə bilər, məsələn, məzmun tipli başlıq sahəsini dəyişmək üçün:

url: "http://fiddle.jshell.net/favicon.png",

beforeSend: funksiya (xhr) (

xhr.overrideMimeType("text/plain; charset=x-user-defined" );

Tamamlandı (funksiya (məlumat) (

əgər (console && console.log) (

console.log("Məlumat nümunəsi:" , data.slice(0 , 100 ));

jQuery 1.5-də $.ajax() metodu ilə qaytarılan jqXHR obyekti Promise interfeysini həyata keçirir və ona bütün Promise xassələrini, metodlarını və davranışını verir. Bu üsullar $.ajax() ilə başlayan sorğu tamamlandıqda çağırılan bir və ya bir neçə arqumenti götürür. Bu, bir sorğuya birdən çox işləyici təyin etməyə və hətta sorğu tamamlandıqdan sonra işləyiciləri təyin etməyə imkan verir. (Əgər sorğu artıq tamamlanıbsa, işləyicilər dərhal çağırılacaq). jqXHR obyektində mövcud Promise metodları:

jqXHR.done(funksiya (məlumat, mətnStatus, jqXHR) ());
jqXHR.fail(funksiya(jqXHR, textStatus, errorThrown) ());
jqXHR.always(funksiya(data|jqXHR, textStatus, jqXHR|errorThrown) ( )); (jQuery 1.6-da əlavə edilmişdir)
Tam işləyici yaratmağa alternativ olan .always() metodu köhnəlmiş .complete() metodunu əvəz edir.
jqXHR.then(funksiya(data, textStatus, jqXHR) (), function(jqXHR, textStatus, errorThrown) ());

Nəzərə alın: jqXHR.success() , jqXHR.error() və jqXHR.complete() işləyiciləri jQuery 3.0-da silinəcək. Siz müvafiq olaraq jqXHR.done() , jqXHR.fail() və jqXHR.always() funksiyalarından istifadə edə bilərsiniz.

XMLHttpRequest kodu ilə geriyə uyğunluğu təmin etmək üçün jqXHR obyekti aşağıdakı xassələri və metodları təmin edir:

hazır vəziyyət
status
statusMətn
sorğu müvafiq olaraq xml və/və ya mətni qaytardıqda cavabXML və/və ya cavab mətni
setRequestHeader(ad, dəyər) standartdan kənara çıxan başlıqlar köhnə və yeni dəyərləri birləşdirmək əvəzinə köhnə dəyəri yenisi ilə əvəz edəcək.
getAllResponseHeaders()
getResponseHeader()
statusCode()
abort()

Onreadstatechange mexanizmi yoxdur, çünki bitdi, uğursuz, həmişə və statusCode bütün mümkün tələbləri əhatə edir.

Geri çağırış funksiyası sırası

BeforeSend , error , dataFilter , müvəffəqiyyət və tam parametrlərin hamısı uyğun vaxtlarda çağırılan geri çağırış funksiyası dəyərlərini alır.

jQuery 1.5-dən etibarən uğursuz və yerinə yetirilən funksiyalar və jQuery 1.6-dan etibarən həmişə idarə olunan növbədən ilk olaraq çağırılacaq və hər növbə elementi üçün birdən çox işləyiciyə icazə veriləcəkdir. $.ajax() metodu işləyicilərinin daxili hissələrini həyata keçirən təxirə salınmış metodlara baxın.

$.ajax() metodu ilə təmin edilən geri çağırış funksiyaları aşağıdakılardır:

beforeSend həmişə çağırılır; parametr kimi jqXHR obyektini və parametrlər obyektini qəbul edir.

sorğu uğursuz olarsa, xəta çağırılır. jqXHR obyektini, xəta statusu sətirini və əgər varsa, istisna obyektini qəbul edir. Bəzi daxili xətalar istisna obyekti kimi sətir təqdim edir: "abort", "taymout", "Nəqliyyat yoxdur".

Cavab məlumatları uğurla qəbul edildikdə dataFilter dərhal çağırılır. Qaytarılan məlumatları və dataType parametrinin dəyərini parametrlər kimi qəbul edir və uğur işləyicisinə ötürmək üçün qaytarılmalıdır (ehtimal ki, dəyişdirilmiş məlumat).

sorğu uğurlu olarsa müvəffəqiyyət deyilir. Cavab məlumatlarını, uğur kodunu ehtiva edən sətri və jqXHR obyektini qəbul edir.

Promise işləyiciləri - .done() , .fail() , .always() və .then() - qeydiyyatdan keçdikləri ardıcıllıqla yerinə yetirilir.

sorğunun müvəffəqiyyətli və ya uğursuz olmasından asılı olmayaraq, sorğu tamamlandıqda tamamlandı. JqXHR obyektini, müvəffəqiyyət və ya səhv statusu olan formatlanmış sətri qəbul edir.

Məlumat növləri

$.ajax() çağırışına cavabın müxtəlif növləri müvəffəqiyyətli işləyicidən keçməzdən əvvəl müxtəlif növ əvvəlcədən emaldan keçir. Əvvəlcədən hazırlıq növü cavabda göstərilən Məzmun Növü başlıq sahəsindən asılıdır, lakin dataType seçimindən istifadə etməklə açıq şəkildə göstərilə bilər. Əgər dataType göstərilibsə, Məzmun Tipi başlıq sahəsi nəzərə alınmayacaq.

Mümkün məlumat növləri mətn, html, xml, json, jsonp və skriptdir.

Mətn və ya html göstərilibsə, heç bir ön emal baş vermir. Məlumat sadəcə olaraq uğur idarəçisinə ötürülür və jqXHR obyektinin respondText xassəsi vasitəsilə əldə edilə bilər.

Əgər xml göstərilibsə, cavab XMLDocument uğur idarəçisinə ötürülməzdən əvvəl jQuery.parseXML istifadə edərək təhlil edilir. XML sənədinə jqXHR obyektinin respondXML xassəsi vasitəsilə daxil olmaq mümkündür.

Əgər json göstərilibsə, cavab uğur işləyicisi üçün obyektə ötürülməzdən əvvəl jQuery.parseJSON istifadə edərək təhlil edilir. Yaranan JSON obyekti jqXHR obyektinin respondJSON xassəsi vasitəsilə əldə edilə bilər.

Əgər skript göstərilibsə, o zaman $.ajax() bu kodu sətir kimi müvəffəqiyyət idarəçisinə ötürməzdən əvvəl serverdən alınan JavaScript kodunu icra edəcək.

jsonp göstərilibsə, $.ajax() avtomatik olaraq sorğunun URL sətrinə (defolt) geri çağırış=? parametrini əlavə edəcək. . $.ajax() metoduna ötürülən parametrlər obyektindən jsonp və jsonpCallback parametrləri müvafiq olaraq URL parametrinin adını və geri çağırış funksiyasının JSONP adını təyin etmək üçün istifadə edilə bilər. Server JSONP işləyicisinə ötürüləcək düzgün Javascript-i qaytarmalıdır. $.ajax() JSON obyektini uğur idarəçisinə ötürməzdən əvvəl JSONP funksiyasını öz adı ilə çağıraraq qaytarılmış JavaScript kodunu icra edəcək.

Məlumatların serverə göndərilməsi

Varsayılan olaraq, Ajax sorğuları GET HTTP metodundan istifadə etməklə göndərilir. Əgər POST metodu tələb olunursa, o zaman tip parametrindən istifadə etməklə üsul parametrlərdə göstərilməlidir. Bu parametr data parametrindən verilənlərin serverə necə göndəriləcəyinə təsir edir. POST sorğusu məlumatları həmişə W3C XMLHTTPRequest standartına uyğun olaraq UTF-8 kodlaşdırmasında serverə ötürüləcək.

Məlumat parametri seriallaşdırılmış forma açar1=dəyər1&açar2=dəyər2 və ya Javascript obyekti (açar1: "dəyər1", açar2: "dəyər2") kimi istənilən formanın sətrini ehtiva edə bilər. Sonuncu seçim istifadə edilərsə, məlumat göndərilməzdən əvvəl jQuery.param() metodundan istifadə edərək sətirə çevriləcək. Bu emal prosesData parametrini false olaraq təyin etməklə deaktiv edilə bilər. XML sənədini serverə göndərmək istəyirsinizsə, emal arzuolunmaz ola bilər, bu halda contentType parametrini application/x-www-form-urlencoded-dən daha uyğun MIME növünə dəyişdirin.

Qabaqcıl parametrlər

Qlobal parametr .ajaxSend() , .ajaxError() və oxşar üsullarla qeydiyyatdan keçmiş işləyicilərin icrasına mane olur. Bu, məsələn, sorğular tez-tez və tez yerinə yetirilirsə, .ajaxSend() istifadə edərək həyata keçirilən yükləmə göstəricisini gizlətmək üçün faydalı ola bilər. Domenlərarası və JSONP sorğuları ilə qlobal parametr avtomatik olaraq false olaraq təyin olunur.

Əgər server cavab verməzdən əvvəl HTTP autentifikasiyasını həyata keçirirsə, istifadəçi adı və parol istifadəçi adı və parol seçimlərindən istifadə etməklə göndərilməlidir.

Ajax sorğuları vaxtla məhduddur, belə ki, ən yaxşı istifadəçi təcrübəsini təmin etmək üçün səhvlər tutula və idarə oluna bilər. Sorğunun fasilələri adətən ya defolt olaraq təyin edilir, ya da hər sorğu əsasında fasilə parametrini təyin etmək əvəzinə $.ajaxSetup() istifadə edərək qlobal olaraq təyin edilir.

Varsayılan olaraq, sorğular həmişə edilir, lakin brauzer öz keşindən cavab verə bilər. Keşlənmiş nəticələrin istifadəsini söndürmək üçün keş parametrini false olaraq təyin edin. Son sorğudan sonra resursun necə dəyişdiyini bildirən sorğunu işə salmaq üçün ifModified parametrini doğru olaraq təyin edin.

ScriptCharset parametri kodlaşdırmanın teqdən (yəni, skript və ya jsonp məlumat növü) istifadə edilən sorğularda açıq şəkildə istifadə edilməsinə imkan verir. Bu, uzaq skript və cari səhifəniz fərqli kodlaşdırmalardan istifadə etdikdə tətbiq edilir.

Ajax sözünün ilk hərfi "asynchronous" mənasını verir, yəni əməliyyat paralel olaraq baş verir və onun icrası qaydasına zəmanət verilmir. $.ajax() metodunun asinxron parametri defolt olaraq true olaraq təyin edilir və bu, kodun icrasının sorğu edildikdən sonra davam edə biləcəyini göstərir. Bu seçimi yanlış olaraq təyin etmək (və buna görə də çıxışınızı daha asinxron etməmək) qəti şəkildə tövsiyə edilmir, çünki bu, brauzerin cavab verməməsinə səbəb ola bilər.

$.ajax() metodu yaratdığı XMLHttpRequest obyektini qaytaracaq. Tipik olaraq jQuery bu obyektin yaradılmasını daxili idarə edir, lakin siz xhr parametrindən istifadə edərək defolt davranışı ləğv edəcək funksiya təyin edə bilərsiniz. Qaytarılan obyekt adətən ləğv edilə bilər, lakin sorğunun manipulyasiyası və idarə edilməsi üçün aşağı səviyyəli interfeys təmin etməlidir. Xüsusilə, bu obyektdə .abort() çağırılması sorğu tamamlanmazdan əvvəl onu dayandırmalı olacaq.

Ajax uzadılması

jQuery 1.5-dən başlayaraq, jQuery-nin Ajax tətbiqinə Ajax sorğularını istənilən ehtiyaclara uyğun olaraq çox çevik şəkildə fərdiləşdirməyə imkan verən əvvəlcədən filtrlər, nəqliyyatlar və transformatorlar daxildir.

Transformasiyalardan istifadə

$.ajax() çeviriciləri bir məlumat növündən digərinə transformasiyanı dəstəkləyir. Bununla belə, əgər siz fərdi məlumat növünü məlum məlumat növünə (json kimi) çevirmək istəyirsinizsə, məzmun parametrindən istifadə edərək cavabın Məzmun Növü ilə faktiki məlumat növü arasında xəritə əlavə etməlisiniz:

Hansı digər domenlərə, subdomenlərə, portlara və ya protokollara sorğulara icazə vermir.

Skript və JSONP sorğuları bu siyasətin məhdudiyyətlərinə tabe deyil.

Düşünürəm ki, AJAX-ın nə olduğunu söyləməyə dəyməz, çünki veb iki-sıfırın meydana çıxması ilə əksər istifadəçilər artıq bütün səhifələri yenidən yükləmək üçün burnunu qaldırırlar və jQuery-nin gəlişi ilə tətbiq daha sadələşdi. .

Qeyd: Bütün nümunələr $(dollar işarəsi) funksiyasından istifadə edərək jQuery metodlarına zəng etmək üçün stenoqramdan istifadə edir

Ən sadə şeydən başlayaq - HTML kodunu səhifədə bizə lazım olan DOM elementinə yükləmək. Bu məqsədlə biz yükləmə metodundan istifadə edəcəyik. Bu üsul aşağıdakı parametrləri qəbul edə bilər:

tələb olunan səhifənin url

nəticənin veriləcəyi funksiya (isteğe bağlı parametr)

JavaScript koduna bir nümunə:
// səhifə yükləndikdən sonra
$(sənəd). hazır (funksiya () (
// id = misal-1 olan elementə klikləyin
$("#misal-1" ) . klik (funksiya () (
// example.html faylından HTML kodu yüklənir
$(bu) . yüklə("ajax/example.html" );
} )
} ) ;
Yüklənmiş məlumat nümunəsi (fayl məzmunu misal.html):
jQuery.ajax Bu ən əsas üsuldur və bütün sonrakı üsullar jQuery.ajax metodu üçün sadəcə sarğılardır. Bu metodun yalnız bir giriş parametri var - bütün parametrləri ehtiva edən bir obyekt (xatırlamağa dəyər parametrlər vurğulanır):

async - tələb asinxroniya, default olaraq doğrudur
cache - brauzer məlumatlarının keşləşdirilməsini aktivləşdirin/deaktiv edin, standart doğrudur
contentType - default "application/x-www-form-urlencoded"
data - ötürülən verilənlər - sətir və ya obyekt
dataFilter - daxil edilən məlumatlar üçün filtr
dataType - geri çağırış funksiyasına qaytarılan məlumat növü (xml, html, skript, json, mətn, _default)
qlobal - tetikleyici - qlobal AJAX Hadisələrindən istifadə üçün cavabdehdir, standart olaraq doğrudur
ifModified - tetikleyici - başqa sorğu göndərməmək üçün server cavabında dəyişikliklər olub-olmadığını yoxlayır, default olaraq false
jsonp - JSONP ilə işləmək üçün geri çağırış funksiyasının adını sıfırlayın (standart olaraq tez yaradılır)
processData - defolt olaraq, göndərilən məlumatlar obyektə bükülür və “application/x-www-form-urlencoded” kimi göndərilir, əks halda lazım gələrsə, onu söndürün.
scriptCharset - kodlaşdırma - JSONP və JavaScript yüklənməsi üçün uyğundur
timeout - millisaniyələrdə fasilə müddəti
növü - GET və ya POST
url - tələb olunan səhifənin url-i

Yerli:

beforeSend - sorğu göndərilməmişdən əvvəl işə düşür
səhv - səhv baş verərsə
müvəffəqiyyət - heç bir səhv olmadıqda
tam - sorğunun sonunda yanğınlar

HTTP avtorizasiyasını təşkil etmək üçün (О_о):

istifadəçi adı - daxil olun
parol - parol

JavaScript nümunəsi:
$.ajax((
url: "/ajax/example.html" , // URL-i göstərin və
dataType : "json" , // yüklənmiş məlumatın növü
uğur: funksiya (data, textStatus) ( // işləyicimizi müvəffəqiyyət funksiyasına əlavə edin
$.hər biri (məlumatlar, funksiya (i, val) ( // alınan məlumatları emal edin
/* ... */
} ) ;
}
) ; jQuery.get Məlumat ötürmək üçün GET sorğusundan istifadə edərək səhifə yükləyir. Aşağıdakı parametrləri qəbul edə bilər:

tələb olunan səhifənin url

ötürülən məlumatlar (isteğe bağlı parametr)

Nəticənin veriləcəyi geri çağırış funksiyası (isteğe bağlı parametr)

geri çağırış funksiyasına qaytarılan məlumat növü (xml, html, skript, json, mətn, _default)

Formanın Göndərilməsi jQuery-dən istifadə edərək formanı təqdim etmək üçün sadalanan üsullardan hər hansı birini istifadə edə bilərsiniz, lakin formadan məlumatların “toplanmasının” rahatlığı üçün jQuery Form plaginindən istifadə etmək daha yaxşıdır.Faylların göndərilməsi jQuery-dən istifadə edərək faylları təqdim etmək siz Ajax Fayl Yükləmə və ya Tək Kliklə Yükləmə plaginindən istifadə edə bilərsiniz. JSONP-dən ayrıca istifadə nümunələri JSONP-dən istifadəni qeyd etmək lazımdır - çünki bu, domenlər arası məlumat yükləməsini həyata keçirməyin yollarından biridir. Bir az şişirtmək üçün, bu, JSON formatında bizə lazım olan məlumatları özündə cəmləşdirən uzaq JavaScript-i birləşdirmək, eləcə də uzaq serverə daxil olarkən adını müəyyən etdiyimiz yerli funksiyamızı çağırmaqdır (adətən geri çağırış parametri).Bunu nümayiş etdirmək olar. bir az daha aydın şəkildə aşağıdakı diaqram (tıklana bilər):

jQuery ilə işləyərkən uzaq serverə hər zəng üçün geri çağırış funksiyasının adı avtomatik olaraq yaradılır; bunun üçün sadəcə olaraq GET sorğusundan istifadə edin:
http://api.domain.com/?type=jsonp&query=test&callback=?
Son sual işarəsi (?) geri çağırış funksiyasının adı ilə əvəz olunacaq. Bu metoddan istifadə etmək istəmirsinizsə, jQuery.ajax() metodunu çağırarkən jsonp variantından istifadə edərək geri çağırış funksiyasının adını açıq şəkildə göstərməlisiniz.

Kateqoriyalar

Redaktor seçimi

Ajax-a giriş. JQuery-ni asinxron Ajax sorğusunu yerinə yetirmək üçün necə əldə edə bilərəm? Jquery sinxron ajax

Axtar

Abunəlik

Populyar yazılar

Son qeydlər