JQuery Ajax başka bir etki alanından veri alır. JQuery ile arası etki alanı Ajax

2 Aralık. , 2016

Native Javascript ve PHP'de yerleşik widget'lar nasıl oluşturulacağını bir makale yazdığımda. Ve her şey yolunda olurdu, ama bir an onu etkilemedi. Bu tür widget'lar kendi sitemizde kullanılabilir, ancak üçüncü taraf kaynakları için bunları oluşturmak için daha ilginç. Ancak bu durumda, istenen veri tarayıcısı başka bir alandan yüklemelidir - bu çapraz etki alanı AJAX istekleridir.

Önlenti programcıları açısından, etki alanı arası talepler sıradanlardan farklı değildir. Ama başında bir fark var. Neden onlarla her şey bu kadar basit değil ve bunları nasıl uygulamak için - makalede okuyun.

Başka bir alandan veri almaya çalışıyoruz

Sadelik için istek alın. Sunucunun belirli bir HTML dosyasını yattığını varsayalım, hangi Ajax-Ohm'u başka bir Etki Alanından nasıl indireceğiz ... HTML. Açın ve gerçekten mevcut olduğundan emin olun - (yeni bir sekmede açılır). Bu, "Şablon.html'dan gelen içerik" ile normal bir div.

Ve şimdi bu HTML-KU Ajax-Ohm'u doğrudan tarayıcı konsolundan alalım.

Yerli JavaScript ile yapıştırılmayacağız ve JQuery.get () kullanarak bir istek kullanmayacağız ve sunucudan cevap verdiklerini konsola getirmeyeceğiz.

$ .. HTML ", işlevi (Responce) (Responce)));

Şimdi aç Geliştirici araçları Tarayıcıdaki ve konsol sekmesinde, bu talebi yapın.

Aşağıdakileri göreceksiniz

Her şey harika, bir istek gönderdi, bir cevap aldı. Daha kolay olabileceği gibi görünüyor? Ve şimdi jQuery'nin bağlandığı ve aynı şeyi yapmaya çalıştığı başka bir siteye gidin. Sadece HTTPS sitesinde değil, neden - makalenin sonunda öğrenin.

Örneğin, Bombardir.ru futbol sahasındaki istekleri kontrol ettim. Aynı zamanda, bu kadar iyi bilinen bölgelerde bile çöpün konsola girmediği serbest bırakıldı. Ancak, konuşma bu konuda değil.

Başka bir alandan bir istek gerçekleştirin ve konsolu artık bu kadar açık bir resim görmezsiniz. Diyor ki, indirmek, veri yok ve genel üzüntü.

Ağ sekmesini açarsanız ve orada karşılık gelen bir sorgu bulursanız, sunucunun ABD 200'e geri döndüğünü göreceksiniz.
Ve içerik dosyası yok. Amaç ne?

Neyin yanlış gittiği ve karar ne olacak

Yakalama, internet politikalarının tarayıcıların herhangi bir kaynaktan veri çıkarmasına izin vermemesidir. Bu kaynakların kendilerinin belirli verileri dağıtmakla ilgilendiği durumlara ek olarak.
Bizim davamız böyle. HTML dosyasını istediğiniz yerden kullanmak için izin vermek için, dosyayı talep ederken bir erişim kontrolüne izin veren-menşe HTTP başlığı göndermek istiyorsunuz.

Şimdi soru nasıl yapılır. Siz (veya yöneticilerin) NGINX'e erişinse, bu başlığın kirlenmesini web sunucusunun araçlarına yapılandırmanın bir şekilde bir şekilde. Web sunucunuz için uygun talebi veya Google'a uygun talebi veya Google'a gidiyorsunuz.

Örneğin, ucuz bir tarifedeki herhangi bir barındırma sağlayıcısında, örneğin, bu erişim yoksa, kendinizi çıkarmanız gerekir. Ve burada PHP kurtarmaya geliyor. Fikir, HTML-KU'mızı başlık tarafından karşılanan bir PHP dosyasına atmak ve istenen içeriği verecektir.

Dosya şablonunu oluşturduğunuzu ve ilk dizeyi PHP komutunu yazdığınızı ortaya çıkarır.

Başlık ("erişim kontrolüne izin veren-menşei: *");

Şablondan gelen içerik.php.

Yani, şablonun içeriği. PHP-kollu ve parantezleri unutmayın

WebDevkin'deki dosya oluşturulur ve yalanlar (Yeni sekmesinde açılır). Şimdi bunu başka bir alandan talep etmeye çalışalım ve ne olacağını görelim.

$ .. php ", işlevi (responce));

Gördüğünüz gibi, her şey iyi çalışıyor - dosya yüklendi!

Ağ sekmesine bakın.
Lütfen erişim kontrolüne izin veren kökenli başlığının yanıt başlıkları bloğuna ilgi duyduğunu lütfen unutmayın.

Genel olarak, makale tamamlanır. Bir demette düşünceleri toplamak ve daha fazla bilgi eklemek için kalır.

Özetlemek ve özetlemek

  • 1. Ajax'ı başka bir alandan gelen herhangi bir kaynağın kolayca istemek imkansızdır.
  • 2. Erişimin gerekli olabileceği tüm kaynaklar için Erişim-Control-Inn-Origin Header gönderin.
  • 3. Bir Web Sunucusu veya PHP ile yapın
  • 4. PHP'de, bu başlık başlık komutu tarafından gönderilir ("erişim kontrolü-izin kaynağı: *")
  • 5. Erişim-kontrol-izinsiz-menşei: * - Tüm Etki Alanlarına erişime izin ver, Erişim-Control-Consum-menşeli: Site.ru - Yalnızca Etki Alanı Sitesi.ru
  • 6. Erişim kontrolü-izinsiz kökenli, diğer verilerin çıktısından önce bile, PHP dosyasının başında (diğer HTTP başlıklarının yanı sıra) gönderilir.
  • 7. "Kaynak" yalnızca HTML işaretli bir dosya değil, aynı zamanda AJAX isteğinin geldiği herhangi bir URL, örneğin, bir JSON verisi veya bir yazı veritabanı tablosuna bir dize eklemek için bir yazı isteği alıyor.

Ve son, ayrı olarak gerçekleştirildi. HTTP sitesinden gelen istekleri yerine getirmeye çalışmadım. HTTPS ile HTTP'den başka bir nedenden dolayı veri yüklemek mümkün olmayacak - karışık içerik. Ve site hala http sitesidir ( güncellenmiş: Artık HTTPS'de site ertelenmemiş)

Konsolda göreceğiniz şey bu, herhangi bir HTTPS sitesinden aynı isteği yerine getirmeye çalışıyor. Bu nedenle, gömülü widget'lara ya da böyle bir şeye girecekseniz, kesinlikle sitenize bir SSL sertifikası koymanız gerekir.

jquery.ajax () - sayfayı yeniden başlatmadan sunucuya bir istek gerçekleştirir. Bu düşük seviyeli bir yöntemdir. büyük miktar Ayarlar. Anlaşılması ve kullanımı, ancak bu yönteme göre hala sınırlı işlevsellik sağlayan tüm Ajax'in çalışmalarına dayanır.

$ .AJAX (), XMLHTTPRequest nesnesini döndürür. Çoğu durumda, doğrudan bu nesneyle çalışmanız gerekmez, ancak isteği manuel olarak kesmeniz gerekirse, hala mevcuttur.

Bir argüman olarak, $ .ajax () işlevi, talebi başlatmak ve yönetmek için kullanılan bir çift anahtar / değerden oluşan bir nesneyi iletir.

AJAX isteği iki kullanım seçeneğine sahiptir:

jquery.ajax (URL [, Ayarlar])

Yöntemin önceki sürümünden fark, yalnızca URL özelliğinin burada ayarların bir parçası olduğunu ve ayrı bir parametre değil.

Ayarlar Listesi (Ayarlar)

  1. kabul eder.(Varsayılan: DataType'a Bağlıdır)
    Tür: Nesne.
    Bir sorgu yürütürken, başlıklar (başlık), sunucudan beklenen izin verilen içerik türlerini gösterir. Bu türlerin değerleri Kabuller parametresinden alınacaktır. Örneğin, aşağıdaki örnek, izin verilen özel tip türlerini gösterir:

    $ .AJAX ((kabul eder: (MyCustomType: "Application / X-Somec-Özel Tür"), Dönüştürücüler: ("Metin MyCustomType": İşlev (Sonuç) (Return NewResult;)), DataType: "MyCustomType"));

    $. Ajax (((((

    kabul eder: (

    myCustomType: "Uygulama / x-bazı özel tip"

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

    "Metin MyCustomType": İşlev (sonuç) (

    newResult dönüş;

    dataType: "MyCustomType"

    } ) ;

  2. asenkron. (Varsayılan: Doğru)
    Tip: Mantıksal Değer.
    Varsayılan olarak, tüm talepler eşzamansız olarak gönderilir (yani sunucuya bir istek gönderdikten sonra, sayfa bir yanıt beklerken işini durdurmaz). Sorguları eşzamanlı olarak göndermeniz gerekirse, bu seçeneği yanlış olarak ayarlayın. CrossDomain istekleri ve "JSONP" tipi talepleri senkronize modda yapılamaz. Lütfen senkronizasyon taleplerinin, yürütme süresi boyunca tarayıcıyı engelleyebileceğini unutmayın.
  3. beforesert (JQXHR, Ayarlar)
    Tür: İşlev.
    AJAX isteğini sunucuya göndermeden hemen önce çağrılacak bir işlev içerir. Bu fonksiyon, JQXHR nesnesini değiştirmek için kullanışlı olabilir (içinde erken sürümleri Kütüphaneler (1.5'e kadar), JQXHR yerine XMLHTTPREQUEST kullanır). Örneğin, gerekli başlıkları (başlıklar) i.d. olarak değiştirebilir / belirleyebilirsiniz. JQXHR nesnesi ilk argüman fonksiyonuna iletilecektir. İkinci argüman, sorgu ayarlarını geçer.
    Before Ajax olaylarını ifade eder. Bu nedenle, içinde belirtilen fonksiyon yanlış dönerse, AJAX sorgusu iptal edilir. Before, sorgu türünden bağımsız olarak adlandırılır.
  4. Önbellek. (Varsayılan: Doğru, Datatype için yanlış "Komut Dosyası" ve "JSONP")
    Tip: Mantıksal Değer.
    Tarayıcının isteği önbelleğe almamasını istiyorsanız, bu parametreyi false olarak ayarlayın. Lütfen parametrenin false olarak ayarlandığını unutmayın, "_ \u003d" dizesi URL'ye eklenecektir.
  5. komple (JQXHR, TextStatus)
    Tür: İşlev.
    AJAX sorgusunu tamamladıktan sonra her seferinde yürütülen bir fonksiyon (başarı ve hata tamamlandıktan sonra). İki parametre fonksiyona iletilir: JQXHR (Kütüphanenin erken sürümlerinde (1.5'e kadar), JQXHR yerine XMLHTTpRequest'i kullanır) ve sorgunun yürütülmesinin durumu (string değeri: "başarı", "NotModifiye", " Hata "," zaman aşımı "," iptal "veya" parsererror ").
    JQuery-1.5 ile başlayarak, tam parametre bir işlev değil, bir dizi işlev iletilebilir. Tüm fonksiyonlar dizinin belirtildiği sıraya neden olur.
  6. İçerikler.
    Tür: Nesne.
    JQuery-1.5'te ortaya çıkan parametre, Biçimlendirme Nesnesine (Dize: Düzenli İfade) ayarlanır ve jQuery'nin türüne bağlı olarak sunucudan yanıtı nasıl sökeceğini belirler.
  7. İçerik türü.
    Tür: mantıksal değer veya dize.
    Sunucuya bir istek gönderirken, veriler ContentType'da belirtilen formatta iletilir. Varsayılan olarak, 'Uygulama / X-www-form-urlencoded; Çoğu durumda uygun olan Charset \u003d UTF-8 '. Bu parametreyi belirlerseniz açıkça, sunucuya aktarılır (veri yoksa bile).
    JQuery-1.6 ile başlığı yüklememek için yanlış gönderebilirsiniz.
  8. bağlam.
    Tür: Nesne.
    Sorguyu çalıştırdıktan sonra bağlam olacak (bu değişkene iletilen değer). Örneğin, bir DOM elemanı bağlam olarak belirtirseniz, tüm Ajax istek işleyicileri de bu DOM öğesi bağlamında gerçekleştirilecektir. Bu örnekte anahtar kelime Bu belge içerecektir.

    $ .AJAX ((URL: "TEST.HTML", bağlam: belge.body). Bitti (işlev () ($ ($ (bu) .addclass ("Tamam");));

    $. Ajax (((((

    uRL: "TEST.HTML",

    bağlam: Belge. Vücut.

    )). Bitti (işlev () (

    $ (buna). AddClass ("Tamam");

    } ) ;

  9. dönüştürücüler.(Varsayılan: ("* Metin": Pencere.string, "Metin HTML": True, "Metin JSON": JQuery.Parsejson, "Metin XML": jquery.parsexml))
    Tür: Nesne.
    JQuery-1.5'te ortaya çıkan parametre, hangi fonksiyonların, aynı türdeki değerlere, diğerindeki değerlere dönüştürüleceğinin yardımı ile belirler.
  10. crossdomain.(Varsayılan: Aynı etki alanı için false, geçitler için doğru)
    Tip: Mantıksal Değer.
    Parametre JQuery-1.5'te ortaya çıktı. Bu, örneğin, sunucu yönlendirmesini başka bir etki alanına dönüştürmek için izin verir.
  11. veri.
    Tür: Nesne, Dize veya Diz.
    Sunucuya aktarılacak veriler. Veriler bir dize değilse, sorgu dizgisine dönüştürülürler. Talepler için, URL'ye veri eklenir. Nesne bir çift anahtar / değerden oluşmalıdır. Bir dizi değeri ise, ardından geleneksel ayara bağlı olarak jquery siparişleri sipariş eder. Varsayılan olarak, örneğin, (FOO: ["BAR1", "BAR2"]) içine döner ve Foo \u003d Bar1 & Foo \u003d Bar2.
  12. dataFilter (veri, tür)
    Tür: İşlev.
    Sunucu tarafından gönderilen verileri önceden işleyecek bir fonksiyon, yani Filtrenin rolünü oynamalı ve temizlenmiş dizgiyi döndürmelidir. İki parametre bu fonksiyona iletilir: belirtilen veriler ve parametre değeri veri tipi. DataFilter'da belirtilen işlev işlenmiş verileri iade etmelidir.
  13. veri tipi (Varsayılan: otomatik olarak belirlenir (XML, JSON, Script veya HTML))
    Tip: satır.
    İçindeki veri türü, sunucudan bir cevap alması bekleniyor. Belirtilmemişse, JQuery MIME sunucusunu kullanarak otomatik olarak belirlemeye çalışacaktır.
  14. hata
    Tip: İşlev
    Talebin sunucuya başarısız olması durumunda çağrılacak işlev. Üç parametre sağlar: JQXHR (1.5'e kadar XMLHTTpRequest kullanılmıştır), meydana gelen hatanın açıklaması olan bir dize ve bunun olmuşsa bir istisna nesnesi olan bir dize. İkinci argümanın olası değerleri: "Zaman aşımı", "Hata", "Notmodifiye" ve "Parserror" (ön plana çıkmayan durumlarda, boş değer iade edilebilir). JQuery-1.5 ile başlayarak, bu parametre hem bir işlevi hem de işlev dizisini alabilir.
    DataType, komut dosyasına veya JSONP'ye eşit olduğunda hata olayı oluşmaz.
  15. küresel (Varsayılan: Doğru)
    Tip: Mantıksal Değer.
    Küresel AJAX isteme olaylarının çalışmasından sorumludur (örneğin, AjaxStart veya AjaxStop). Bu parametreyi yanlış, küresel olaylara ayarlarsanız bu istek Aranacak.
  16. başlıklar.
    Tür: Nesne.
    Parametre JQuery-1.5'te göründü Burada ek sorgu başlıkları (başlık) belirleyebilirsiniz. Bu ayarın değerleri, Beforesender işlevi denemeden önce girilecektir, burada son değişikliklerin başlıklara yapılabilir.
  17. ifmodied.
    Tip: Mantıksal Değer.
    Bu ayarı True olarak aktardığınızda, sorgu "başarılı" durumuyla tamamlanacaktır, yalnızca sunucudan gelen yanıt önceki cevaba farklıysa. JQuery bu gerçeği son değiştirilmiş başlığa atıfta bulunur. JQuery-1.4 ile başlayarak, son modifiye edilmiş ve 'ETAG' ek olarak, ayrıca kontrol edilir (her ikisi de sunucu tarafından sağlanır ve sunucudan istenen verilerin önceki istekden değiştirilmediği tarayıcıyı bildirmek için gereklidir).
  18. islakal
    Tip: Mantıksal Değer.
    JQuery-1.5.1'de ortaya çıkan parametre, jQuery başka türlü tanımak olsa bile, sayfa kaynağının yerel durumunu (dosya protokolü aracılığıyla olduğu gibi) ayarlamanıza izin verir. Kütüphane, aşağıdaki protokoller durumunda sayfanın yerel olarak çalıştığına karar verir: Dosya, * -Extension ve widget. Global olarak ISLocal parametresinin değerini ayarlamak için önerilir - Bireysel AJAX sorgularının ayarları.
  19. jsonp
    Tip: satır veya mantıksal değer.
    JSONP İstek URL'sine eklenen parametrenin adını tanımlar (varsayılan, "geri arama" kullanılır). Örneğin, yapılandırma (JSONP: "onjsonpload"), "Onjsonpload \u003d?" Dizinin URL'sinin bir kısmına dönüştürülür. . 1.5 sürümünden başlayarak, bu yanlış parametredeki şartname URL'ye eklenmesini önler ek parametre. Bu durumda, JSONPCallback ayar değerini ayarlamanız gerekir. Örneğin, bu şunlardır: (JSONP: false, jsonpcallback: "CallBackName").
  20. jsonpcallback
    Tip: Dize veya işlev.
    Sunucuyu JSONP isteğinde cevaplandırırken çağrılacak olan fonksiyonun adını tanımlar. Varsayılan olarak, JQuery, kütüphanenin çalışmasını basitleştiren daha çok tercih edilen bir seçenek olan bu özelliğin keyfi bir adını oluşturur. Kendi JSONP sorgu işleme işlevinizi belirtmesinin nedenlerinden biri, GET isteklerinin önbelleğe alınmasını iyileştirmektir.
    JQuery-1.5 ile başlayarak, sunucu yanıtını kendiniz işlemek için bu parametrede bir işlev belirleyebilirsiniz. Bu durumda, belirtilen işlev sunucudan alınan verileri iade etmelidir (belirtilen işlevde, ilk parametrede bulunurlar).
  21. yöntem (varsayılan: "get")
    Tip: satır.
    JQuery-1.9.0'da ortaya çıkan parametre, sunucuya istek türünü belirlemenizi sağlar ("Post", "Get", "Put")
  22. mimetype.
    Tip: satır.
    Parametre JQuery-1.5.1'de ortaya çıktı. Bu alanda, XHR yerine sunucudan gelen cevabın beklendiği veri türünü belirleyebilirsiniz.
  23. parola.
    Tip: satır.
    Gerekirse, sunucudaki kimlik doğrulama şifresi.
  24. veri işleme. (varsayılan doğru)
    Tip: Mantıksal Değer.
    Varsayılan olarak, sunucuya iletilen veriler sorgu dizesindeki bir nesneye dönüştürülür (URL formatı: fname1 \u003d value1 & fname2 \u003d value12 & ...) ve "Uygulama / X-WWW-Form-UrLencoDed" olarak gönderilir. ProcessData seçeneğini yanlış olarak ayarlamak için bir DOM belgesi veya dönüştürülemeyen diğer verileri göndermeniz gerekirse.
  25. scriptcharset.
    Tip: satır.
    Yalnızca Ajax Al Queres için geçerlidir, DataType olabilir veya "JSONP" veya "Komut Dosyası" olabilir. Üçüncü taraf bir etki alanındaki sunucu sizinkinden başka bir kodlama kullanıyorsa, üçüncü taraf bir sunucunun kodlaması belirtmelisiniz.
  26. durum kodu.
    Tür: Nesne.
    Parametre, JQuery-1.5.0'da, sorgu kodlarının neden olacağı fonksiyonlarla karşılaştırıldığı bir dizide göründü. Örneğin, Kod 404 için (yok), ekrana bir mesaj çizebilirsiniz:

    $ .Ajax (statusCode: (404: Function () (Alert ("Sayfa bulunamadı");)));

    $. Ajax (((((

    durum kodu: (

    404: İşlev () () () ()

    uyarı ("Sayfa bulunamadı");

    } ) ;


    Talep başarıyla geçerse, sonra bir parametre olarak, anonim fonksiyon Sorgunun başarılı bir şekilde yürütülmesinin işlevlerini (başarı parametresinde belirtilen) ve hata durumunda hata durumunda aynı parametreleri alacaktır.
  27. başarı (Veri, TextStatus, JQXHR)
    Tür: İşlev, Diz.
    Sunucu isteğini başarılı bir şekilde tamamlanması durumunda çağrılacak olan işlev. 3 argüman alır:
    • sunucu ve ön işleme tarafından gönderilen veriler (veriler);
    • yürütme Durumu (TextStatus) ile Dize;
    • jQXHR'nin bir nesnesi (JQXHR yerine 1.5'e kadar sürümlerde XMLHTTpRequest'i kullanır). JQuery 1.5'ten tek bir fonksiyon yerine, bu parametre bir dizi işlev alabilir.
  28. zaman aşımı.
    Numara giriniz.
    Milisaniyede sunucudan bir cevap bekleyen zaman. Yeniden yazmak küresel ayar $ .Ajaxsetup () cinsinden aynı parametre. Bu süre aşılırsa, istek bir hata ile tamamlanacak ve hata olayı "zaman aşımı" durumuna sahip olacaktır.
    Zaman, $ .AJAX işlevini çağırma anından itibaren sayıyor. Bu şu anda diğer bazı talepler başlatılacak ve tarayıcı geçerli talebin yürütülmesini erteleyecek. Bu durumda, zaman aşımı tamamlanabilir, ancak aslında, istek bile piyasaya sürülmedi.
    JQuery-1.4 ve daha genç, bekleme süresinin sonunda, XMLHTTPRequest nesnesi hata durumuna geçecek ve kendi alanlarına erişim bir istisnaya neden olabilir. Firefox 3.0+'da, Bekleme süresi aşıldığında komut dosyası ve JSONP sorguları kesintiye uğramaz. Bu süre sona erdikten sonra bile tamamlanacaklar.
  29. geleneksel
    Tip: Mantıksal Değer.
    Geleneksel dönüşüm parametrelerini (seri hale getirme) kullanmak için bu parametrenin değerini true olarak ayarlayın.
  30. tip(Varsayılan: "GET")
    Tip: satır.
    Analog parametre yöntemi. Parametre, 1.9.0 altındaki jquery'de kullanılır.
  31. url (varsayılan: geçerli sayfanın adresi)
    Tip: satır.
    İsteğin gönderileceği adresi tanımlar.
  32. kullanıcı adı.
    Tip: satır.
    Gerekirse, sunucuda kimlik doğrulama için kullanıcı adı.
  33. xhr.(Varsayılan: IE'de ActiveXObject, diğer tarayıcılarda XMLHTTpRequest)
    Tür: İşlev.
    Bir XMLHTTPRequest nesnesi sağlayacak bir fonksiyon. Varsayılan olarak, IE tarayıcıları bu nesneyi ActiveXObject'tir ve diğer durumlarda XMLHTTPREQUEST'dir. Bu parametre ile, bu nesnenin kendi sürümünüzü uygulayabilirsiniz.
  34. xhrfields.
    Tür: Nesne.
    Parametre, JQuery-1.5.1'de ortaya çıktı. Örneğin, bir CrossDomain sorgusu gerçekleştirirken, WithCredentials özelliğini True olarak ayarlayabilirsiniz:

    $ .AJAX ((URL: A_Cross_Domain_URL, XHRFields: (withcredentials: true));

    $. Ajax (((((

    uRL: A_Cross_Domain_URL,

    xhrfields: (

    withcredentials: True.

    } ) ;

Yukarıda belirtildiği gibi, $ .ajax () en temel yöntemi ve sonraki tüm yöntemler sadece ambalajıdır. Çok kısmen bu işlevi aramanıza gerek yok, çünkü Ve gibi daha yüksek seviye alternatifler vardır. $ .AJAX () daha esnek bir çözüm olmasına rağmen, anlama ve kullanımda daha kolaydırlar.

Kullanmanın en kolay yolu, parametreleri belirtmeden $ .ajax () çağrısı olacaktır:

$. ajax ();

Etkinlik sahipleri

Before, hata, veri dosyası ayarları, başarı ve eksiksiz, her Ajax sorgusunun belirli zamanlarında meydana gelen olay işleyicilerini yüklemenizi sağlar.

  • beforesunucuya bir istek göndermeden hemen önce oluşur;
  • hata sorgunun başarısız bir şekilde yürütülmesi durumunda ortaya çıkar;
  • dataFilter. sunucudan veri gelmesi sırasında olur. Sunucu tarafından gönderilen "RAW" verilerini idare etmenizi sağlar;
  • başarı. Talebin başarılı bir şekilde tamamlanması durumunda ortaya çıkar;
  • tamamlayınız.İsteğin tamamlanmasının herhangi bir tamamlanması durumunda olur.
  • Başarı: İşlev () () () ()

    uyarmak ( "Veriler başarıyla gönderildi.") ;

    } ) ;

    Dikkat! Yukarıda tartışılan ayarlar.Success (), .error () ve-.pelate (), standart ertelenmiş nesne yöntemlerine ek olarak, jquery-1.5'e eklenmiştir. Ancak, işleyicileri kurabileceğiniz, ancak JQuery-1.8 ile başlayabilirsiniz, bu üç yöntem kullanımı istenmez.

    Veri tipi

    $ .AJAX () işlevi, sunucunun kendisinden (MIME Tools) gönderilen veri sunucusunun türünü öğrenecek. Ek olarak, bu verilerin nasıl yorumlanacağını kişisel olarak belirlemek mümkündür (netleştirmek). Bu parametre kullanılarak yapılır. veri tipi. Bu parametrenin olası değerleri:

    • "XML" - Elde edilen XML belgesi metin formunda mevcut olacaktır. Onunla birlikte çalışabilirsin standart demek jQuery (HTML belgesinde olduğu gibi).
    • "Html" - Alınan HTML, metin formunda mevcut olacaktır. Etiketlerdeki komut dosyalarını içeriyorsa
      Sunucu sitesinde bir şeyin sayısı2.ru -

      Php.

      Şimdi PHP'de verilerle bir JSON nesnesi oluşturmamız gerekiyor. Sitenin2.ru sunucusunda belirli bir metrenin depolandığını varsayalım, Site1.ru'dan talep edeceğiz ve sadece bir numara (bir şeyin sayısı) alacağız. Lütfen, her zamanki json nesnesi yerine bir JSONP nesnesi oluşturmamız gerektiğini unutmayın.

      // JSON göndermek istediğimiz verilerle bir dizi oluşturun. Cevap $ veri \u003d dizi ("sayaç" \u003d\u003e 5,); // JSON $ 'daki Mass Translate $ json_data \u003d json_encode ($ veri); // kodlama ve içerik türü başlığını ayarlayın ("İçerik tipi: Uygulama / JSON; Charset \u003d UTF-8"); // JSONP - JSONP ECHO $ \u200b\u200b_GET nesnesini ["geri arama"] yapın. "(" $ json_data. ");"; ";

      Dosyayı counter.php olarak kaydedin ve site2.ru sunucusuna doldurun.

      Javascript.

      Şimdi aşağıda açıklandığı gibi JQuery'de $ .Ajax'u aramanız gerekir:

      $ (Belge) .Ready (işlev () ($ .Ajax ((Tip: "get", URL: "http://site2.ru/counter.php?callback\u003d?", DataType: "JSONP", başarı: İşlevi (veri) ($ (". Metin .counter"). HTML (data.counter);)));));

      Geri arama işlevini belirtmezseniz ve sadece Callback yazın \u003d? - JQuery işlevinin adı otomatik olarak ikame edilir, ancak geri arama \u003d parsefonksiyon gibi işlevin adını açıkça belirtebilirsiniz.

      Şimdi Site1.ru'daki HTML dosyasını çalıştırın. Sunucudan JSON verileriyle bir cevap almanız gerekir. Bu çapraz tarayıcı Ajax'ı $ .getjson, $ .ajax, $ .post ve $ .get için kullanabilirsiniz.

      P.S. Site2.ru ile değiştirmeyi unutmayın - bir istek yaptığınız uzak sunucunuzun adına.

      Herhangi bir sorunuz veya eklemeniz varsa, aşağıdaki yorumları yazın.