Kişiler

Ajax işlevleri Selamlar sevgili arkadaşım! "Sizin için hayatta başarı nedir ???"

  • 20.06.2020

Modern web çağında, çoğu site daha etkileşimli hale geliyor. Daha önce, güncellenmiş verileri almak için sayfayı tamamen güncellememiz gerekiyordu, şimdi sayfanın tamamının değil, yalnızca ayrı bir bölümünün yüklenmesine izin veren teknolojiler var. Buna karşılık, bu hem kullanıcılara hem de sunucu sahiplerine kolaylık sağlar, çünkü kullanıcı için sayfa yüklemesi daha hızlı olacaktır, çünkü sayfanın yalnızca ayrı bir kısmı yüklenir ve sunucunun her seferinde sayfayı oluşturması ve vermesi gerekmez. kullanıcıya. Bu özelliklerin php ve ajax kullanılarak uygulanması kolaydır.

Bugün konseptin nasıl çalıştığını daha iyi anlamak için küçük bir örneği analiz edeceğiz. AJAX... Bazen yeni başlayanlar için php ve ajax'ın birbirleriyle nasıl etkileşime girdiğini anlamak zordur, birçok kişi tüm sayfayı yeniden yüklemeden formları anında nasıl doğrulayacaklarına dair örnekler arıyor. Bunu nasıl yapacağınızı kısaca göstereceğim, böylece diğer araçları hızlı bir şekilde öğrenmenize ve gelecekte kendi scriptlerinizi yazmanıza olanak sağlayacak temelleri ve ilkeleri anlayabilirsiniz.

Kendimize küçük bir görev bulalım, php ve ajax kullanarak sayfayı yeniden yüklemeden veritabanında bir e-posta adresinin olup olmadığını kontrol edeceğiz. Böyle bir örnek, sayfayı tarayıcıya yeniden yüklemeden sunucuyla nasıl etkileşime geçebileceğimizi iyi bir şekilde gösterecektir ve ayrıca, genellikle çeşitli kullanıcı formu doğrulamalarında kullanılır. Kök dizinde index.php, email.php, validate.js adında 3 dosya oluşturun.

Bir sayfa yarat

Yalnızca bir e-posta alanı içeren basit bir tek form sayfası oluşturalım.
Index.php dosya sözdizimi

AJAX Eğitimi



ile çalışmanın en kolay yolu AJAXçerçeveyi bağlamaktır jQuery, ki aslında yaptım. jQuery göndermek için bize anlaşılması kolay ve kullanımı kolay bir sözdizimi sağlar AJAX istekler, neden bundan faydalanmıyorsunuz?

Js komut dosyası oluşturma

validate.js dosyasının sözdizimi şöyledir:

$ (belge) .ready (işlev () (var email = ""; $ ("# email").keyup (işlev () (var değeri = $ (bu) .val (); $ .ajax ((tür: "POST", url: "email.php", veri: "email =" + değer, başarı: işlev (msg) (if (msg == "geçerli") ($ ("# mesaj"). Html (" Bu E-posta kullanılabilir.Bu e-posta zaten alınmış.");))));)); $ (" # gönder "). (işlev ()'e tıklayın (if (email ==" ") (uyarı ("Lütfen, tüm e-postalara veri koyun ");) başka ( $ .ajax ((tür: "POST", url: "email.php", veri: "add_email =" + e-posta, başarı: işlev (msg) ($ ("# mesaj"). html (msg);)) );)));));

PHP işleyicisi

Bu komut dosyası alacak İLETİİstemciden istekte bulunun, işleyin ve sonucu döndürün. AJAX sonucu okur ve ona göre karar verir.
email.php dosyasının sözdizimi şöyledir:

$ bağlantı = mysqli_connect ("localhost", "e-posta", "e-posta", "e-posta"); if (isset ($ _ POST ["email"]) && $ _POST ["email"]! = "") ($ email = $ _POST ["email"]; $ email = mysqli_real_escape_string ($ bağlantı, $ email); if (! filter_var ($ email, FILTER_VALIDATE_EMAIL)) (echo "geçersiz";) else ($ sql = "SELECT id FROM email WHERE email =" $ email ""; $ sonuç = mysqli_query ($ bağlantı, $ sql); if ( mysqli_num_rows ($ sonuç) == 1) (echo "geçersiz";) else (echo "geçerli";))) if (isset ($ _ POST ["add_email"]) && $ _POST ["add_email"]! = "" ) ($ email = mysqli_real_escape_string ($ bağlantı, $ _ POST ["add_email"]); $ sql = "E-posta (e-posta) DEĞERLERİNE GİRİN (" $ email ")"; if (mysqli_query ($bağlantı, $sql) )) ( yankı Başarı";) başka (yankı" Hata"; } }

PHP betiğimizde, bir gönderi isteğini işleyen ve sayfadaki belirli metni yazdıran en yaygın kod. Sonuç olarak AJAX php betiğine bir istek gönderir, betik onu işler ve sonucu döndürür, AJAX sonucu okur ve sayfayı gerçek zamanlı olarak değiştirir.

AJAX, POST isteğini bu kod parçası aracılığıyla komut dosyasına iletir:

$ .ajax ((tür: "POST", url: "email.php", veri: "email =" + değer, başarı: işlev (msg) (if (msg == "geçerli") ($ ("# mesaj") ") .html (" Bu E-posta kullanılabilir."); email = değer;) else ($ (" # mesaj "). html (" Bu e-posta zaten alınmış."); } } });

type - İstek türü, POST veya GET. Bizim durumumuzda, POST;
url - isteğin gönderildiği komut dosyasının adresi;
veri - istekte iletilen veriler;
başarı - isteğin başarılı bir şekilde yürütülmesinin bir sonucu olarak ne yapılması gerektiği. Bizim durumumuzda fonksiyon çağrılır;

Komut dosyasının kendisinde, e-posta alanına her karakter girildiğinde, veritabanında e-posta olup olmadığı kontrolü gerçekleştirilir. Komut dosyasında $ ("# email").Keyup (function () ()); bu, id = "email" olan alanda bir tuşa basıp basmadığını kontrol eder.
Gördüğünüz gibi, kod oldukça basittir ve anlamak için özellikle büyük beceriler gerektirmez, her şey keyup () olaylarını işlemeye bağlıdır - bir tuşa basmak, () - bir öğeye tıklamak. Bunu takiben AJAX komut dosyasından istek ve yanıt. Böylece, php ve ajax kullanarak etkileşimli sayfalar oluşturmak için neredeyse sonsuz olanaklar elde edebilirsiniz.
Bu kodun yüksek kalitede olduğunu iddia etmiyor, ancak geliştirirseniz, istemci ve sunucu düzeyinde doğru doğrulamaları ekleyin, css girin, projelerinizde oldukça kullanabilirsiniz.
Herhangi bir sorunuz varsa, yorum yazmaktan çekinmeyin.
İyi günler ve yakında görüşürüz 🙂

AJAX, etkileşimli uygulamalar oluşturmak için web geliştirmede kullanılan bir grup teknolojidir. AJAX, sayfayı yeniden yüklemeden sunucudan veri aktarmanıza olanak tanır. Bu şekilde çok etkileyici sonuçlar elde edilebilir. Ve jQuery kitaplığı, yerleşik yöntemlerle AJAX uygulamasını çok daha kolay hale getirir.

Teknolojiyi uygulamak için yöntem kullanılır $ .ajax veya jQuery.ajax:

$ .ajax (özellikler) veya $ .ajax (url [, özellikler])

İkinci parametre, jQuery'nin 1.5 sürümüne eklendi.

url- istenen sayfanın adresi;

özellikler- istek özellikleri.

Parametrelerin tam listesi için jQuery belgelerine bakın.

Bu eğitimde, en sık kullanılan parametrelerden birkaçını kullanacağız.

başarı (işlev)- bu işlev, isteğin başarıyla tamamlanmasından sonra çağrılır. İşlev, 1 ila 3 parametre alır (kullanılan kitaplığın sürümüne bağlı olarak). Ancak ilk parametre her zaman sunucudan döndürülen verileri içerir.

veri (nesne / dize)- istenen sayfaya iletilen kullanıcı verileri.

dataType (dize)- olası değerler: xml, json, script veya html. Sunucu yanıtında beklenen veri türünün açıklaması.

tür (dize)- istek türü. Olası değerler: GET veya POST. Varsayılan: GET.

url (dize) isteğin URL'sidir.

örnek 1

Basit metin iletimi.

$ .ajax ((url: "response.php? eylem = örnek1", başarı: işlev (veri) ($ (". sonuçlar"). html (veri);)));

Yanıt için bir .result div öğesi vardır.

Bir cevap beklemek

Sunucu yalnızca bir dize döndürür:

Echo "Örnek 1 - aktarım başarıyla tamamlandı";

Örnek 2

Özel verileri PHP betiğine iletiyoruz.

$ .ajax ((tür: "POST", url: "response.php? eylem = örnek2", veri: "ad = Andrew & takma ad = Aramis", başarı: işlev (veri) ($ (". sonuçlar"). html (veri);)));

Sunucu, iletilen verilerin içine eklendiği bir dize döndürür:

Echo "Örnek 2 - aktarım başarıyla tamamlandı. Parametreler: isim =". $ _POST ["ad"]. ", takma ad =". $ _POST ["takma ad"];

Örnek 3

JavaScript kodunu geçirme ve yürütme

$ .ajax ((dataType: "script", url: "response.php? action = sample3",))

Sunucu kodu yürütür:

Echo "$ (". Sonuçlar "). Html (" Örnek 3 - JavaScript Çalıştırılıyor ");";

Örnek 4

XML kullanıyoruz. Örnek, RSS beslemesi gibi harici XML ile çalışmak için kullanılabilir.

$ .ajax ((veriTürü: "xml", url: "response.php? eylem = örnek4", başarı: işlev (xmldata) ($ (". sonuçlar"). html (""); $ (xmldata) .find ("öğe").her (işlev () ($ ("") .html ($ (bu) .metin ()). appendTo (". sonuçlar");));)));

Sunucu, XML kodunu döndürmelidir:

Başlık ("İçerik Türü: uygulama / xml; karakter kümesi = UTF-8"); Eko<< Paragraf 1 2. nokta 3. nokta 4. nokta madde 5 XML;

Örnek 5

JSON verilerini kullanıyoruz. Girdi parametreleri, elde edilen nesnenin öznitelikleri olarak kullanılabilir.

$ .ajax ((veriTürü: "json", url: "response.php? eylem = örnek5", başarı: işlev (jsondata) ($ (". sonuçlar"). html ("Ad =" + jsondata.name + " , Takma ad = "+ jsondata.takma ad);)));

Sunucu, verileri JSON biçiminde döndürmelidir:

$ aRes = dizi ("isim" => "Andrew", "rumuz" => "Aramis"); require_once ("Services_JSON.php"); $ oJson = new Services_JSON(); echo $ oJson-> kodlama ($ aRes);

Ajax ile çalışmak için doğrudan jQuery yöntemlerini gördük (örneğin, get (), post () ve load ()). Bu makale, düşük seviyeli programlama arabirimini açıklar jQuery Ajax API'si .

Düşük seviye terimi, sorgu mekanizmasının gizli yeteneklerine erişim kazandığınızı gösteriyor gibi görünüyor, ancak bu tamamen doğru değil. Burada açıklanan yöntemler, daha önce tartışılan yöntemlerden daha az uygundur, ancak biraz ekstra çaba pahasına, sorgu, doğrudan veya yardımcı yöntemlerle her zaman mümkün olmayan, ihtiyaçlarınıza tam olarak uyacak şekilde yapılandırılabilir.

Basit Ajax istekleri

Düşük seviyeli bir API kullanarak istekte bulunmak, doğrudan veya yardımcı yöntemler kullanmaktan çok daha zor değildir. Aradaki fark, bu yaklaşımın, isteğin diğer birçok yönünü kontrol etmenize ve çalışan istek hakkında çok daha fazla bilgi almanıza izin vermesidir. Düşük seviyeli API'nin merkezinde ajax() yöntemiİşte nasıl kullanılacağına dair basit bir örnek (önceki makalede açıklanan kaynak dosya ve mydata.json dosyasının kullanıldığı yer burasıdır):

$ (işlev () ($ .ajax ("verilerim.json", (başarı: işlev (veri)) (var şablonu = $ ("# çiçekTmpl"); şablon.tmpl (veri.slice (0, 3)). ("# satır1"); template.tmpl (veri.slice (3)). appendTo ("# satır2");)));));

ajax() yönteminin argümanları, istenen URL ve özellikleri, her biri belirli bir istek parametresini tanımlayan bir dizi anahtar/değer çiftini tanımlayan bir veri görüntüleme nesnesidir. Burada, ajax() yöntemine iletilen nesne, yalnızca bir parametre içerir, bu parametre, istek başarılı olursa çağrılacak bir işlevi belirtir.

Bu örnekte, sunucudan mydata.json dosyasını talep ediyoruz ve onu veri şablonuyla birlikte kullanarak öğeler oluşturmak ve bunları belgeye eklemek için, bir önceki makalede doğrudan yöntemler kullanarak yaptığımız gibi. Varsayılan olarak, ajax () yöntemi bir HTTP GET isteği oluşturur, yani. bu örnek, get() ve getJSON() yöntemlerini kullanmaya eşdeğerdir.

JqXHR nesnesi

ajax() yöntemi, istek hakkında ayrıntılı bilgi almak ve etkileşim kurmak için kullanabileceğiniz bir jqXHR nesnesi döndürür. jqXHR nesnesi, nesnenin etrafındaki bir sarıcıdır. XMLHttpRequest tarayıcı tabanlı Ajax desteğinin temelini oluşturan.

Çoğu Ajax işlemi için jqXHR nesnesi basitçe yoksayılabilir, bu benim tavsiyemdir. Bu nesne, sunucu yanıtı hakkında başka yollarla elde edilebilecek olandan daha eksiksiz bilgi elde etmek gerektiğinde kullanılır. Ajax istek parametrelerini özelleştirmek için de kullanılabilir, ancak bu, ajax () yöntemi için mevcut ayarları kullanarak yapmak daha kolaydır. jqXHR nesnesinin özellikleri ve yöntemleri aşağıdaki tabloda açıklanmıştır:

JqXHR Nesne Özellikleri ve Yöntemleri
Özellik / Yöntem Açıklama
hazırDurum 0 (istek gönderilmedi) ile 4 (istek tamamlandı) arasında değişen, yaşam döngüsü boyunca bir istek için bir ilerleme göstergesi döndürür
durum Sunucu tarafından gönderilen HTTP durum kodunu döndürür
durumMetin Durum kodunun metinsel bir açıklamasını döndürür
yanıtXML Yanıtı XML olarak döndürür (eğer bir XML belgesiyse)
tepkiMetin Yanıtı bir dize olarak döndürür
setRequest (isim, değer) İstek başlığını döndürür (bu, başlıklar parametresiyle daha kolay yapılabilir)
getAllResponseHeaders () Yanıtta yer alan tüm başlıkları bir dize olarak döndürür
getResponseHeaders (isim) Belirtilen yanıt başlığının değerini döndürür
iptal () isteği iptal eder

jqXHR nesnesi, kodun çeşitli yerlerinde görünür. İlk olarak, aşağıdaki örnekte gösterildiği gibi, ajax() yöntemi tarafından döndürülen sonucu depolamak için kullanılır:

$ (işlev () (var jqxhr = $ .ajax ("mydata.json", (başarı: işlev (veri)) (var şablonu = $ ("# çiçekTmpl"); şablon.tmpl (veri.slice (0, 3)) ) .appendTo ("# satır1"); template.tmpl (veri.slice (3)). appendTo ("# satır2");))); var timerID = setInterval (işlev () (console.log ("Durum: "+ jqxhr.status +" "+ jqxhr.statusText); if (jqxhr.readyState == 4) (console.log ("Talep tamamlandı: "+ jqxhr.responseText); clearInterval (timerID);)), 100); ));

Bu örnekte, ajax() yöntemi tarafından döndürülen sonucu kaydediyoruz ve ardından her 100ms'de bir istek bilgilerini görüntülemek için setInterval() yöntemini kullanıyoruz. ajax() yönteminin döndürdüğü sonucun kullanılması, isteğin asenkron olarak yapıldığı gerçeğini değiştirmez, bu nedenle jqXHR nesnesi ile çalışırken önlem almanız gerekir. İsteğin durumunu kontrol etmek için readyState özelliğini kullanırız (isteğin tamamlanması 4 değerine karşılık gelir) ve sunucu yanıtını konsola yazdırırız.

Bu senaryo için konsol çıktısı şöyle görünür (tarayıcınızda biraz farklı görünebilir):

jqXHR nesnesini yalnızca nadir durumlarda kullanırım ve ajax() yönteminin döndürdüğü sonuç buysa onu hiç kullanmam. jQuery kitaplığı, ajax() yöntemi çağrıldığında otomatik olarak bir Ajax isteğini tetikler ve bu nedenle, istek parametrelerini herhangi bir şekilde yararlı olacak şekilde özelleştirme yeteneğini bulamıyorum. jqXHR nesnesi ile çalışmak istersem (kural olarak, sunucu yanıtı hakkında daha fazla bilgi almak için), o zaman bunu genellikle daha sonra bahsedeceğimiz olay işleyicisinin parametreleri aracılığıyla yaparım. Bana talebin durumu hakkında bilgi veriyorlar, bu da onu çözme ihtiyacını ortadan kaldırıyor.

İstek URL'sini ayarlama

Mevcut en önemli seçeneklerden biri url parametresi istek için URL'yi belirtmenize izin verir. Bu parametreyi, aşağıdaki örnekte gösterildiği gibi, ajax () yöntemine argüman olarak bir URL iletmeye alternatif olarak kullanabilirsiniz:

$ (işlev () ($ .ajax ((url: "verilerim.json", başarı: işlev (veri)) (var şablonu = $ ("# çiçekTmpl"); şablon.tmpl (veri.slice (0, 3)) .appendTo ("# satır1"); template.tmpl (veri.slice (3)). appendTo ("# satır2");)));));

POST isteğinde bulunma

Yürütülecek gerekli istek türünü ayarlamak için şunu kullanın: tür parametresi... Varsayılan olarak, önceki örnekte olduğu gibi GET istekleri yapılır. Bir POST isteği oluşturmak ve form verilerini sunucuya göndermek için ajax () yöntemini kullanma örneği aşağıda gösterilmiştir:

Bu örneği burada ayrıntılı olarak anlatmayacağım, çünkü önceki makalede ayrıntılı olarak ele aldık (yalnızca post() yöntemini kullanarak). Burada sadece, tipe ek olarak birkaç parametre daha kullandığımızı belirteceğim. Daha önce açıklanan url parametresi, POST isteğinin amacını belirtmek için kullanılır. Gönderilecek veriler, bir önceki makalede anlatılan serialize() yöntemi kullanılarak ayarlanan data parametresi kullanılarak belirtilir. Sunucudan alınan verilerin türü dataType parametresinde belirtilir.

Ajax Events ile Çalışmak

Birkaç parametre, bir Ajax isteğinin yaşam döngüsü boyunca tetiklenebilecek olayları işlemek için işlevleri belirlemenize olanak tanır. Ajax isteklerinde bu kadar önemli bir rol oynayan geri arama işlevlerini bu şekilde belirlersiniz. Bir önceki örnekte başarı parametresine baktığınızda bunlardan birini zaten gördünüz. Olaylarla ilgili parametrelerin listesi, kısa açıklamalarıyla birlikte aşağıdaki tabloda gösterilmektedir:

Başarılı istekleri işleme

Yukarıdaki örneklerde, Success parametresini kullanırken, işlev çağrısında iki bağımsız değişken atlandı - istek sonucunu açıklayan mesaj ve jqXHR nesnesi. Bu bağımsız değişkenleri alan bir işlevin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

$ (işlev () ($ .ajax ((url: "verilerim.json", başarı: işlev (veri, durum, jqxhr) (console.log ("Durum:" + durum); console.log ("jqXHR durumu:" + jqxhr.status + "" + jqxhr.statusText); console.log (jqxhr.getAllResponseHeaders ()); var şablon = $ ("# çiçekTmpl"); template.tmpl (veri.slice (0, 3)).pendTo ("# satır1"); template.tmpl (veri.slice (3)).pendTo ("# satır2"); ))); ));

Durum bağımsız değişkeni, isteğin sonucunu açıklayan bir dizedir. Success parametresini kullanarak belirttiğimiz callback işlevi yalnızca başarılı istekler için yürütülür ve bu nedenle bu argümanın değeri genellikle başarıdır. Bir istisna, aşağıda açıklanan ifModified parametresini kullanmanızdır.

Tüm Ajax olayları için geri arama işlevleri aynı kalıbı takip eder, ancak bu argüman en çok bir dizi başka olay için kullanışlıdır.

Son argüman jqXHR nesnesidir. Bu nesneyle çalışmaya başlamadan önce isteğin durumunu anlamanız gerekmez, çünkü işlevin yalnızca istek başarılı olduğunda yürütüleceğini bilirsiniz. Bu örnekte, jqXHR nesnesi, isteğin durumu ve sunucunun yanıta dahil ettiği başlıklar hakkında bilgi almak ve bu bilgileri konsola görüntülemek için kullanılır.

Bu durumda, sonuç şöyle görünür (hangi sunucuyu kullandığınıza bağlı olarak, farklı bir başlık grubunuz olabilir):

Hata işleme

error parametresi, bir istek başarısız olduğunda çağrılacak bir işlevi belirtmek için kullanılır. Aşağıda ilgili bir örnek verilmiştir:

Hata (renk: kırmızı; kenarlık: orta düz kırmızı; dolgu: 4 piksel; kenar boşluğu: otomatik; genişlik: 200 piksel; metin hizalama: orta)

$ (işlev () ($ .ajax ((url: "NoSuchFile.json", başarı: işlev (veri)) (var şablonu = $ ("# çiçekTmpl"); şablon.tmpl (veri.slice (0, 3)) .appendTo ("# satır1"); template.tmpl (data.slice (3)). appendTo ("# satır2");), hata: işlev (jqxhr, durum, errorMsg) ($ ("

") .text ("Durum: "+ durum +" Hata: "+ errorMsg) .insertAfter (" h1 ");)));));

Sunucuda bulunmayan Json dosyası burada istenir ve bu nedenle istek kesinlikle yerine getirilemez ve bunun sonucunda error parametresi kullanılarak belirtilen fonksiyon çağrılır. Bu işlevin argümanları, jqXHR nesnesi ve sunucu yanıtında alınan hata durum mesajı ve hata mesajıdır. Bu işlevin içinde, şekilde gösterildiği gibi durum ve errorMsg argümanlarının değerlerini görüntülemek için belgeye bir div öğesi eklenir:

Göndermeden önce istek parametrelerini yapılandırma

BeforeSend parametresi, istekleri göndermeden önce çağrılacak bir işlev belirlemenize olanak tanır. Bu, ajax () yöntemine iletilen parametreleri ekleyerek veya değiştirerek isteği son dakikada yapılandırmanıza olanak tanır (bu, özellikle gerekli parametre değerlerini içeren aynı nesneyi birden çok istek kullanıyorsa yararlı olabilir). Bu yaklaşımı kullanmanın bir örneği aşağıda sunulmuştur:

$ (işlev () ($ .ajax ((başarı: işlev (veri) (var şablonu = $ ("# çiçekTmpl")); şablon.tmpl (veri.slice (0, 3)). appendTo ("# satır1") ; template.tmpl (data.slice (3)). appendTo ("# satır2");), hata: işlev (jqxhr, durum, errorMsg) ($ ("

") .text (" Durum: "+ durum +" Hata: "+ errorMsg) .insertAfter (" h1 ");), BeforeSend: işlev (jqxhr, ayarlar) (settings.url =" mydata.json ";)) );));

Yukarıdaki işlevin argümanları bir jqXHR nesnesi (istek başlıklarını ayarlamak veya bir isteği gönderilmeden önce iptal etmek için yararlı olabilir) ve ajax() yöntemine iletilen parametreleri içeren bir nesnedir. Bu örnekte, Ajax isteğinin URL'si, BeforeSend parametresi kullanılarak ayarlanır.

Birden Çok Olay İşleyici Belirtme

Önceki örneklerde, Ajax istekleriyle ilgili olayların meydana gelmesine bir işlevi çağırarak tepki vermiştik, ancak başarı, hata, tamamlandı ve önceGönder parametrelerinde, her biri ilgili olduğunda yürütülecek bir işlev dizisi ayarlayabilirsiniz. olay tetiklenir. Bunun basit bir örneği aşağıda verilmiştir:

$ (function () ($ .ajax ((başarılı:, BeforeSend: function (jqxhr, ayarlar) (settings.url = "mydata.json";))); function processData (veri, durum, jqxhr) (var şablon = $ ("# çiçekTmpl"); template.tmpl (veri.slice (0, 3)).pendTo ("# satır1"); template.tmpl (veri.slice (3)).pendTo ("# satır2"); ) function reportStatus (veri, durum, jqxhr) (console.log ("Durum:" + durum + "Sonuç kodu:" + jqxhr.status);)));

Bu örnekte, başarı parametresi, biri belgeye öğe eklemek için verileri kullanan ve diğeri konsola bilgi yazdıran iki işlevden oluşan bir dizidir.

Olaylar için bağlamı ayarlama

Bağlam parametresi, olay işleyici çağrıldığında bu değişkene atanacak öğeyi belirtmenize olanak tanır. Bu, bir işleyici işlevinde onları seçmek zorunda kalmadan bir belgedeki hedef öğelere atıfta bulunmak için kullanılabilir. Aşağıda ilgili bir örnek verilmiştir:

$ (işlev () ($ .ajax ((başarı: işlev (veri) (var şablonu = $ ("# çiçekTmpl")); şablon.tmpl (veri.slice (0, 3)). appendTo ("# satır1") ; template.tmpl (data.slice (3)). appendTo ("# row2");), BeforeSend: function (jqxhr, ayarlar) (settings.url = "mydata.json";), bağlam: $ ("h1" "), tamamlandı: işlev (jqxhr, durum) (var color = status ==" başarı "?" yeşil ":" kırmızı "; this.css (" kenarlık "," kalın düz "+ renk);))); ));

Burada bağlam parametresi, belgenin h1 öğelerini içeren jQuery nesnesine ayarlanır. Complete parametresi tarafından belirtilen fonksiyonda, jQuery nesnesi üzerinde css() yöntemini çağırarak seçilen öğeleri (bu durumda öğe, çünkü belgede yalnızca bir h1 öğesi vardır) çerçeveleriz (bunun aracılığıyla başvurulur). Bordür rengi, talebin durumuna göre belirlenir.

Bağlam parametresini kullanarak herhangi bir nesneyi bağlam olarak ayarlayabilirsiniz ve yalnızca o nesne için izin verilen işlemleri gerçekleştirmekten siz sorumlusunuz. Örneğin, bağlam olarak bir HTMLElement öğesi belirtiyorsanız, üzerinde herhangi bir jQuery yöntemini çağırmadan önce o nesneyi $ () işlevine iletmelisiniz.

Ajax istekleri için temel parametreleri ayarlama

Bir Ajax isteğinin temel kurulumunu gerçekleştirmek için kullanabileceğiniz bir grup parametre vardır (bunlardan bazıları, url ve tür, yukarıda ele aldık). Mevcut tüm seçenekler arasında en az ilgi çekenler bunlardır ve isimleri çoğunlukla açıklayıcıdır. Söz konusu parametreler aşağıdaki tabloda gösterilmiştir:

Bir Ajax isteği için temel yapılandırma parametreleri
Parametre Açıklama
kabul eder İsteği, tarayıcı tarafından desteklenen MIME türlerini belirten bir Kabul Et üstbilgi değerine ayarlar. Varsayılan olarak, bu değer dataType parametresi tarafından belirlenir.
önbellek False, istek içeriğinin sunucu tarafından önbelleğe alınmaması gerektiğini belirtir. Varsayılan olarak, komut dosyası ve jsonp dışındaki tüm veri türleri önbelleğe alınır.
içerik türü İstek için içerik turu başlık değerini ayarlar
veri tipi Sunucudan ne tür verilerin beklendiğini gösterir. Bu parametre kullanılırsa, jQuery, sunucu tarafından isteğin türü hakkında sağlanan bilgileri yok sayar.
başlıklar İsteğe eklenecek ek başlıkları ve değerleri belirtir
jsonp JSONP istekleri (etki alanları arası istekler) yapılırken geri arama işlevi yerine kullanılacak bir dize belirtir. Bu parametre, sunucuyla anlaşma gerektirir
jsonpGeri arama Varsayılan olarak jQuery tarafından kullanılan otomatik oluşturulan rastgele ad yerine kullanılacak geri arama işlevinin adını belirtir
parola Kimlik doğrulama prosedürünü geçerken istekte kullanılacak parolayı belirtir
komut dosyası İstenen JavaScript içeriğini kodlarken jQuery'ye hangi karakter setinin kullanıldığını söyler
zaman aşımı İstek için zaman aşımı süresini (milisaniye olarak) ayarlar
Kullanıcı adı Kimlik doğrulama prosedürünü geçerken istekte kullanılması gereken kullanıcı adını belirtir

Zaman aşımlarını ve başlıkları ayarlama

Kullanıcılar genellikle Ajax isteklerinin yürütüldüğünü bile bilmezler ve bu nedenle izin verilen zaman aşımı süresini belirtmek iyi bir fikirdir, çünkü kullanıcıları bilinmeyen bir işlemin tamamlanmasını beklemekten kurtaracaktır. Bir istek için bir zaman aşımı ayarlama örneği aşağıda verilmiştir:

$ (function () ($ .ajax ((zaman aşımı: 5000, başlıklar: ("X-HTTP-Method-Override": "PUT")), başarı: function (veri) (var şablonu = $ ("# flowerTmpl") ; şablon.tmpl (veri.slice (0, 3)). appendTo ("# satır1"); şablon.tmpl (veri.slice (3)). appendTo ("# satır2");), hata: işlev (jqxhr , durum, errorMsg) (console.log ("Hata:" + durum);)));));

Bu örnekte, zaman aşımı parametresi maksimum zaman aşımı süresini 5 saniyeye ayarlar. Bu süre içerisinde istek tamamlanmazsa error parametresi kullanılarak belirtilen fonksiyon çağrılır ve durum parametresi ile belirtilen hata kodu görüntülenecektir.

Zamanlayıcı, istek tarayıcıya iletildiği anda başlar ve çoğu tarayıcı, yürütülebilecek eşzamanlı isteklerin sayısına sınırlamalar getirir. Bu, zaman aşımı sona erdiğinde isteğin başlatılmaması riskinin olduğu anlamına gelir. Bunu önlemek için, devam eden diğer Ajax isteklerinin tarayıcı sınırlarını ve boyutunu ve beklenen süresini bilmeniz gerekir.

Ek olarak, aşağıdaki örnek, isteğe bir başlık eklemek için başlıklar parametresini kullanır. Veri görüntüleme nesnesi, başlıkları belirtmek için kullanılır. Burada kullanılan başlık, sunucu onu doğru olarak tanıdığı sürece, REST mimari stilini destekleyen web uygulamaları oluşturmak için faydalı olabilir.

Ek yapılandırma parametrelerinin kullanılması

Aşağıdaki bölümlerde, Ajax isteklerine uygulanan en yararlı ve dikkate değer ek parametreler açıklanmaktadır. Genellikle nadiren kullanılırlar, ancak ihtiyaç duyulduğu durumlarda vazgeçilmezdirler. Bu seçenekler, jQuery'nin Ajax ile nasıl etkileşimde bulunacağına ince ayar yapmanızı sağlar.

Senkron isteklerde bulunmak

İsteklerin yürütme modu kullanılarak kontrol edilir. zaman uyumsuz parametre... Bu parametre için varsayılan değer true'dur; bu, isteğin asenkron modda çalışacağı anlamına gelirken false, senkronize mod anlamına gelir.

Bir isteği eşzamanlı olarak yürütürken, ajax() yöntemi normal bir işlev gibi davranır ve tarayıcı yalnızca istek tamamlandıktan sonra diğer komut dosyası yönergelerini yürütmeye devam eder.

Değiştirilmeden bırakılan veriler yoksayılıyor

Kullanarak ifModified parametresi Yalnızca son istekten bu yana değiştiyse verilerin alınmasını sağlayabilirsiniz. Bu davranış, Last-Modified başlığı tarafından tanımlanır. Bu sayede, kullanıcıya zaten sahip olduğu bilgilerle karşılaştırıldığında yeni bir bilgi vermeyecek olan gereksiz veri aktarımının önüne geçilebilmektedir. Varsayılan olarak, ifModified false şeklindedir; bu, jQuery'ye Last-Modified başlığını yok saymasını ve yine de veri sağlamasını söyler.

Bu parametrenin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

$ (işlev () ($ ("düğme"). (işlev (e)) ($ .ajax ("verilerim.json"), (ifModified: true, başarı: işlev (veri, durum)) (if (durum == ") tıklayın başarı ") ($ (" # satır1, # satır2 "). çocuklar (). kaldır (); var şablon = $ (" # çiçekTmpl "); şablon.tmpl (veri.slice (0, 3)). "# satır1"); template.tmpl (data.slice (3)). appendTo ("# satır2");) else if (status == "değiştirilmemiş") ($ ("img"). css ("sınır" , "kalın düz yeşil");))))); e.preventDefault ();))));

Bu örnek, ifModified parametresini true olarak ayarlar. Başarı işlevi her zaman çağrılır, ancak içeriğin son talep edilmesinden bu yana değişmediyse, veri argümanı tanımsız olacak ve durum argümanı olacaktır. değiştirilmemiş değer.

Bu durumda, gerçekleştirilen eylemler durum bağımsız değişkeninin değerine göre belirlenir. Bu bağımsız değişkenin değeri başarılıysa, belgeye öğeler eklemek için veri bağımsız değişkeni kullanılır. Durum bağımsız değişkeni değiştirilmezse, belgede zaten bulunan öğeleri çerçevelemek için css() yöntemini kullanırız.

Düğmeyle ilişkilendirilen click olayına yanıt olarak ajax() yöntemi çağrılır. Bu, şekilde gösterildiği gibi ifModified parametresinin etkisini göstermek için aynı sorguyu tekrar tekrar tekrarlamayı mümkün kılar:

Bu seçenek ne kadar faydalı olursa olsun, dikkatli kullanmanızı tavsiye ederim. İstek, kullanıcı eyleminin (bir düğmenin tıklanması gibi) bir sonucu olarak gönderilirse, önceki istek beklendiği gibi tamamlanmadığı için kullanıcının düğmeyi tıklamış olma olasılığı vardır.

Veri talep ettiğinizi düşünün, ancak başarı parametresinde belirtilen yöntem, belge içeriğinin doğru şekilde güncellenmesini engelleyen bir hata içeriyor. Ardından bir sonraki eyleminiz, beklenen sonucu elde etmek için düğmeye tekrar tıklamayı denemektir. ifModified parametresini yanlışlıkla kullanarak, kullanıcının eylemlerini yok sayabilir ve onları sorunu çözmek için daha ciddi adımlar atmaya zorlayabilirsiniz.

Yanıt kodu işleniyor

DurumKodu parametresi HTTP istekleri için yanıt koduna bağlı olarak diğer eylemler için seçenekler belirlemenize olanak tanır. Başarı ve hata parametrelerinin yerine veya bunlara ek olarak kullanılabilir. StatusCode parametresinin kendi kendine kullanımına bir örnek aşağıda gösterilmiştir:

$ (function () ($ .ajax ((url: "mydata.json", statusCode: (200: function (veri)) (var template = $ ("# flowerTmpl"); template.tmpl (data.slice (0, 3)). AppendTo ("# row1"); template.tmpl (data.slice (3)). AppendTo ("# row2");), 404: function (jqxhr, durum, errorMsg) ($ ("

") .text ("Durum: "+ durum +" Hata: "+ errorMsg) .insertAfter (" h1 ");))));));

Burada statusCode parametresi, HTTP istekleri için yanıt kodları ile sunucuda yürütülmesi gereken karşılık gelen işlevler arasında bir ilişki kuran bir nesne olarak belirtilir. İşlevlere hangi argümanların iletileceği, yanıt kodunun başarılı bir isteği mi yoksa bir hatayı mı yansıttığına bağlıdır.

Kod (örneğin, 200) başarılı bir istekle eşleşirse, argümanlar başarı parametresi tarafından belirtilen işleve iletilecek olanlarla aynıdır. Aksi takdirde (örneğin, istenen dosyanın bulunmadığı anlamına gelen bir 404 yanıt koduyla), argümanlar error parametresi tarafından belirtilen işleve geçirilecek olanlarla aynıdır.

Gördüğünüz gibi, bu araç yanıt kodları hakkında doğrudan bilgi sağlamaz. Tarayıcı-sunucu etkileşimlerinde hata ayıklarken, genellikle jQuery'nin neden istediğim gibi davranmadığını anlamak için çok kullanırım. Bunu yaparken başarı ve hata parametrelerine ek olarak statusCode parametresini kullanıyorum ve bilgileri konsola çıkarıyorum. Bu parametreler birlikte kullanılırsa, önce başarı ve hata işlevleri, ardından statusCode parametresi tarafından tanımlanan işlevler yürütülür.

Ön temizleme yanıt verileri

Kullanarak dataFilter parametresi sunucu tarafından döndürülen verileri önceden temizlemek için çağrılacak bir işlev tanımlayabilirsiniz. Bu araç, sunucu tarafından gönderilen verilerin uygunsuz biçimlendirilmiş olması veya aralarında işlemek istemediğiniz veriler olması nedeniyle size pek uymadığı durumlarda vazgeçilmezdir.

Bu araç, JSON verilerine fazladan veri ekleyen Microsoft ASP.NET sunucularıyla çalışırken bana çok yardımcı oluyor. dataFilter parametresini kullanarak bu tür verileri kaldırmak yalnızca minimum çaba gerektirir. dataFilter parametresinin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

$ (işlev () ($ .ajax ((url: "verilerim.json", başarı: işlev (veri)) (var şablonu = $ ("# çiçekTmpl"); şablon.tmpl (veri.slice (0, 3)) .appendTo ("# satır1"); template.tmpl (data.slice (3)). appendTo ("# satır2");), dataType: "json", dataFilter: function (data, dataType) (if (dataType = = "json") (var filteredData = $ .parseJSON (data); filteredData.shift (); dönüş JSON.stringify (filteredData.reverse ());) başka (veri döndür;))));));

İşlev, sunucudan alınan verileri ve dataType parametresinin değerini iletir. dataType parametresi kullanılmazsa, ikinci bağımsız değişken tanımsız olarak ayarlanır. İşiniz filtrelenmiş verileri döndürmek. Bu örnekte odak noktamız JSON verileridir:

Var filteredData = $ .parseJSON (veri); filtrelenmişData.shift(); dönüş JSON.stringify (filteredData.reverse()); ...

Örneği daha açıklayıcı hale getirmek için bazı ek işlemler gerçekleştirilir. İlk olarak, JSON verileri, jQuery parseJSON yöntemi kullanılarak bir JavaScript dizisine dönüştürülür. Daha sonra birinci eleman shift() metodu kullanılarak diziden çıkarılır ve geri kalan elemanlarının sırası reverse() metodu kullanılarak tersine çevrilir.

Tüm işlevin yapması gereken bir dize döndürmek ve bu nedenle, başarı işlevini çağırmadan önce jQuery'nin verileri bir JavaScript nesnesine dönüştürdüğünü bilerek JSON.stringify () yöntemini çağırıyoruz. Bu örnekte, bir diziden bir öğeyi çıkarma olasılığı gösterildi, ancak duruma bağlı olarak başka herhangi bir işlem gerçekleştirebiliriz.

Nihai sonuç şekilde gösterilmiştir:

Veri dönüştürme yönetimi

En sevdiğim ayarlardan birinin incelemesini sona sakladım. Belirli veri türlerini aldığında jQuery'nin bazı kullanışlı dönüşümleri otomatik olarak gerçekleştirdiğini fark etmiş olabilirsiniz. Örneğin, JSON verilerini alırken jQuery, orijinal ham JSON dizesi yerine bir JavaScript nesnesi kullanan bir başarı işlevi sağlar.

Bu tür dönüşümleri yönetmek için şunu kullanın: dönüştürücü parametresi... Bu parametrenin değeri, veri türleri ile bunları işlemek için kullanılan işlevler arasında bir yazışma oluşturan bir nesnedir. Aşağıdaki örnek, HTML verilerini otomatik olarak bir jQuery nesnesine dönüştürmek için bu parametrenin nasıl kullanılacağını gösterir:

$ (function () ($ .ajax ((url: "flowers.html", // Bu örnekte, JSON verisi değil, HTML işaretlemesi yüklüyoruz): function (data, status, jqxhr) (var elems = data.filter ("div"). addClass ("dcell"); elems.slice (0, 3) .appendTo ("# satır1"); elems.slice (3) .appendTo ("# satır2");), dönüştürücüler: ( "metin html": işlev (veri) (dönüş $ (veri);))));));

Bu örnek, metin html veri türü için bir işlevi kaydeder. Belirtilen MIME türünün bileşenleri arasındaki boşluklara dikkat edin (metin / html formunun aksine). İşlev, sunucudan alınan verileri alır ve dönüştürülmüş verileri döndürür. Bu durumda, veri dönüşümü, çiçekler.html dosyasında bulunan HTML parçasını $ () işlevine geçirmek ve sonucu döndürmekten oluşur. Bu, normal jQuery yöntemlerinin, başarı işlevine veri bağımsız değişkeni olarak iletilen nesneye uygulandığı anlamına gelir.

Veri dönüştürücülerle çalışmak kendinizi fazla kaptırabilir. Bu işlevlerle yapmam gerekenden daha fazlasını yapma eğiliminden her zaman kaçınmaya çalışırım. Örneğin, bazen JSON verilerine bir şablon uygulamak ve ortaya çıkan HTML öğelerini geri göndermek için cazip geliyorum. Bu numara çok kullanışlı olsa da, başka biri kodunuzu genişletmeye çalışırsa veya örneğin, daha sonra orijinal biçimine almak için yoğun veri işlemeyi kendiniz organize etmeniz gerekiyorsa, bu bir zarar verir.

Ajax isteklerini ayarlama ve filtreleme

Artık ajax() yöntemine ve onunla çalışmak için mevcut parametrelere aşina olduğunuza göre, sorgularınızı özelleştirmeyi kolaylaştırmak için jQuery tarafından sağlanan birkaç ek yönteme bakabiliriz.

Varsayılan seçenekleri tanımlama

AjaxSetup() yöntemi tüm Ajax isteklerinde varsayılan olarak kullanılacak parametre değerlerini ayarlamanıza olanak tanır, böylece sizi her istekte parametre yapılandırma ihtiyacından kurtarır. Bu yöntemin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

") .text (" Durum: "+ durum +" Hata: "+ errorMsg) .insertAfter (" h1 ");), dönüştürücüler: (" metin html ": işlev (veri) (dönüş $ (veri);)) )); $ .ajax ((url: "flowers.html", başarı: fonksiyon (veri, durum, jqxhr) (var elems = data.filter ("div")). addClass ("dcell"); elems.slice ( 0, 3) .appendTo ("# satır1"); elems.slice (3) .appendTo ("# satır2");)));));

ajaxSetup() yöntemi, jQuery $ işlevi kullanılarak, ajax() yöntemi çağrıldığında olduğu gibi çağrılır. ajaxSetup() yönteminin argümanı, tüm Ajax istekleri için varsayılan olarak kullanmak istediğiniz parametre değerlerini içeren bir nesnedir. Bu örnekte timeout, global, error ve converter parametreleri için varsayılan değerler ayarlıyoruz.

ajaxSetup() metodu çağrıldıktan sonra sadece değiştirmek istediğimiz veya default olarak verilmeyen parametrelerin değerlerini tanımlamamız yeterlidir. Bu, aynı parametre değerleriyle çok sayıda sorgulama yapmanız gerektiğinde önemli ölçüde zaman tasarrufu sağlar.

Filtreleme istekleri

ajaxSetup() yöntemi, tüm Ajax istekleri için geçerli olan temel yapılandırma parametresi değerlerini tanımlar. Bireysel Ajax istekleri için parametreleri dinamik olarak yapılandırma yeteneği, yöntem tarafından sağlanır. ajaxÖn filtre ()... Bu yöntemin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

$ (function () ($ .ajaxSetup ((zaman aşımı: 15000, global: false, error: function (jqxhr, durum, errorMsg)) ($ ("

") .text (" Durum: "+ durum +" Hata: "+ errorMsg) .insertAfter (" h1 ");), dönüştürücüler: (" metin html ": işlev (veri) (dönüş $ (veri);)) )); $ .ajaxPrefilter ("json html", işlev (ayarlar, orijinal Ayarlar, jqxhr) (if (orijinalSettings.dataType == "html") (settings.timeout = 2000;) başka (jqxhr.abort ();)) ) $ .ajax ((url: "flowers.html", dataType: "html", başarı: fonksiyon (veri, durum, jqxhr) (var elems = data.filter ("div")). addClass ("dcell"); elems.slice (0, 3) .appendTo ("# satır1"); elems.slice (3) .appendTo ("# satır2");)));));

Belirttiğiniz işlev, her yeni Ajax isteği için yürütülecektir. İşleve iletilen bağımsız değişkenler, istek parametreleridir (ajaxSetup() yöntemini kullanarak ayarladığınız varsayılanlar dahil), ayrıca ajax() yöntemine iletilen orijinal parametreler (varsayılanlar hariç) ve isteğin jqXHR nesnesidir.

Örnekte gösterildiği gibi, ilk argüman olarak iletilen nesnede değişiklikler yapıyoruz. Bu senaryoda, ajax() yöntemine iletilen parametreler arasında dataType parametresi varsa, zaman aşımı süresi iki saniyeye ayarlanır. Diğer tüm isteklerin gönderilmesini önlemek için jqXHR nesnesinde abort() yöntemi çağrılır.

İsteği özelleştiren anahtar/değer çiftleri kümesi AJAX. Tüm parametreler isteğe bağlıdır... $ .ajaxSetup () yöntemini kullanarak herhangi bir parametre için varsayılan bir değer ayarlanmasına izin verilir ancak önerilmez.
Yöntem $ .ajax () aşağıdaki seçenekleri destekler:

    kabul eder(varsayılan: bağlıdır veri tipi).

    Tür: PlainObject.
    Gönderilen anahtar/değer çiftleri kümesi Kabul etmek istek başlığı Bu başlık sunucuya, isteğin yanıt olarak ne tür bir yanıtı kabul edeceğini söyler. Belirtilen parametrenin değerinin veri tipi(sunucudan beklediğimiz veri türü) parametrede belirtilenle eşleştirilir. Ek olarak, sunucudan gelen yanıtın doğru işlenmesi için parametrede gereklidir. dönüştürücüler dönüştürülen yanıt değerini döndüren bir işlev belirtin. Örneğin: $ .ajax (( kabul eder: (özel tipim: " uygulama / x-some-özel tip" } , // yanıtın nasıl işleneceğini belirtin dönüştürücüler: ("özel türüm metni": işlev ( sonuç) { // dönüştürülmüş yanıt değerini döndür yeni sonuç döndür; )), // Beklenen veri türü ("mycustomtype") veri tipi: "özel tipim"));

    zaman uyumsuz(varsayılan: doğru).

    Tür: Boole.
    Varsayılan olarak, tüm istekler eşzamansız olarak gönderilir, eşzamanlı istekleri düzenlemeniz gerekiyorsa bu parametreyi yanlış olarak ayarlayın. Lütfen etki alanları arası isteklerin ve öğenin, parametrenin veri tipi hangisi önemli "jsonp" eşzamanlı istekleri desteklemeyin. Lütfen eşzamanlı istekleri kullanarak, istek etkinken herhangi bir eylemi devre dışı bırakarak tarayıcıyı geçici olarak engelleyebileceğinizi unutmayın.

    önceGönder... Tür: İşlev (jqXHR jqXHR, DüzNesne ayarlar).
    AJAX isteği yapılmadan önce çağrılacak olan geri arama işlevi. Bu işlev, gönderilmeden önce jqXHR nesnesini (jQuery 1.4.x'te XMLHTTPRequest nesnesini) değiştirmenize olanak tanır. jqXHR nesnesi, XMLHttpRequest nesnesini genişleten bir eklentidir, nesne, sunucu yanıtı hakkında daha eksiksiz bilgi almanızı sağlayan birçok özellik ve yöntem içerir ve nesne ayrıca Promise yöntemlerini içerir. eğer fonksiyon önceGönder false döndürür, ardından AJAX isteği iptal edilir. sürümden jQuery 1.5 işlev önceGönder istek türünden bağımsız olarak çağrılır.

    önbellek(varsayılan: true, için veri tipi "senaryo" ve "jsonp" YANLIŞ).

    Tür: Boole.
    Yanlış olarak ayarlanırsa, bu istenen sayfaların tarayıcı tarafından önbelleğe alınmamasına neden olur. false öğesinin yalnızca doğru şekilde çalışacağını unutmayın. KAFA ve ELDE ETMEK istekler.

    tamamlayınız.

    Tür: İşlev (jqXHR jqXHR, Sicim metinDurumu).
    İstek sona erdiğinde çağrılan bir işlev (işlev AJAX olaylarından sonra yürütülür) "başarı" veya "hata"). İşleve iki parametre iletilir: jqXHR(jQuery 1.4.x nesnesinde XMLHTTPTalebi) ve istek durumuna karşılık gelen bir satır ( "başarı", "modifiye edilmemiş", "içerik yok", "hata", "zaman aşımı", "iptal", veya "ayrıştırıcı hata"). jQuery 1.5'ten beri, parametre tamamlayınız sırayla çağrılacak bir dizi işlevi alabilir.

    içindekiler.

    Tür: PlainObject.
    İçerik türüne bağlı olarak jQuery'nin yanıtı nasıl ayrıştıracağını (çözümleyeceğini) tanımlayan dize / normal ifade çiftlerinden oluşan bir nesne. jQuery 1.5'e eklendi.

    içerik türü(varsayılan: "application / x-www-form-urlencoded; karakter kümesi = UTF-8").

    Tür: Boole veya Dize.
    Sunucuya veri gönderirken istekte belirtilen içerik türünü belirler. jQuery 1.6'dan beri false değerini belirtmeye izin verilir, bu durumda jQuery başlıktaki alanı geçmez İçerik türü hiç.

    bağlam.

    Tür: PlainObject.
    AJAX geri aramaları yürütüldüğünde, yürütme bağlamları pencere nesnesidir. Parametre bağlam$ (this) belirli bir DOM öğesine veya nesneye başvuracak şekilde bir işlevin yürütme bağlamını ayarlamanıza olanak tanır. Örneğin: $ .ajax (( url: "test.html", bağlam: $ (". benimSınıfım"), // fonksiyon yürütmenin yeni bağlamı başarı: işlev () ( // istek başarılı olursa işlevi çağırın$ (bu) .html ("Her şey yolunda"); // class.myClass ile öğeye metin içeriği ekleyin } } );

    dönüştürücüler

    Varsayılan değerler:
    ("* metin": pencere.Dize, // metne herhangi bir tür"text html": true, // html'de metin "text json": jQuery.parseJSON, // JSON'da metin "text xml": jQuery.parseXML // XML'de metin) Tip: PlainObject.
    Dönüştürülecek veri türünü ve nasıl dönüştürüleceğini içeren bir nesne. Her transformatörün değeri, dönüştürülmüş yanıt değerini döndüren bir fonksiyondur. jQuery 1.5'e eklendi.

    etki alanları arası(varsayılan: aynı etki alanındaki istekler için yanlış, etki alanları arası istekler için doğru).

    Tür: Boole.
    Aynı etki alanından etki alanları arası bir istek (örneğin, bir jsonp isteği) yapmak istiyorsanız, bu parametreyi true olarak ayarlayın. Bu, örneğin, isteği sunucunuzdan başka bir etki alanına yönlendirmenize olanak tanır. jQuery 1.5'e eklendi.

    Tür: PlainObject veya String veya Array.
    Sunucuya gönderilecek veriler. Bir dize değilse, bir sorgu dizesine dönüştürülürler. İçin ELDE ETMEK sorgu dizesi URL'ye eklenecektir. Otomatik işlemeyi önlemek için parametreyi kullanabilirsiniz. Veri işleme false değeri ile. Veri bir nesnenin parçası olarak aktarılıyorsa, anahtar/değer çiftlerinden oluşmalıdır. Değer bir dizi ise, jQuery aynı anahtarla (parametrenin değerine bağlı olarak) birden çok değeri seri hale getirir. geleneksel bu, $ .param yöntemine dayalı geleneksel serileştirme türünü kullanmamıza izin verir).

    veri filtresi.

    Tür: İşlev (Dize veri, Sicim tip) => Herhangi bir şey.
    İşlev, AJAX isteğinin başarılı bir şekilde yürütülmesinden sonra çağrılır ve sunucu yanıtından alınan "ham" verileri işlemenize olanak tanır. Veriler işlendikten hemen sonra iade edilmelidir. İşlev iki argüman alır: veri- sunucudan bir dizi olarak alınan veriler ve tip- bu verinin türü (parametre değeri veri tipi).

    veri tipi(varsayılan: xml, json, senaryo, veya html).

    Tür: Dize.
    Sunucudan almayı beklediğiniz veri türünü tanımlar. Herhangi bir veri türü belirtilmemişse, jQuery bunu yanıttaki MIME türüne göre belirlemeye çalışacaktır ( XML bir çeşit MIME jQuery 1.4'ten itibaren XML ile sonuçlanacak json bir nesne verecek JavaScript, senaryo betiği yürütecek ve diğer her şey bir dize olarak döndürülecek).

    Temel türler (sonuç, geri arama işlevine ilk argüman olarak iletilir başarı):

    • "xml"- İadeler XML jQuery ile oluşturulabilen bir belge.
    • "html"- İadeler HTML düz metin olarak, etiketler


İlgili Makaleler

En son makaleler
Popüler Makaleler
Editörün Seçimi

Bilgisayar yardım sitesi

© Telif hakkı 2021,
rzdoro.ru - Bilgisayar yardım sitesi

  • Kategoriler
  • Demir
  • Windows 10
  • Tarama
  • Windows 7
  • Demir
  • Windows 10
  • Tarama
  • Windows 7
rzdoro.ru