İçindekiler
AJAX Müşterinin web'de gördükleri ile bir web sayfasının sunucu tarafında bulunan bilgiler arasında asenkron iletişim kurmamıza izin veren bir dizi teknik ve teknolojiyi içerir.Vurgulayabileceğimiz ana özelliklerden biri, farklı yöntemlere dayanmasıdır. HTTP Ne YAYINLA, AL, KOY veya SİL gerekli verileri sunucudaki uygulamalara gönderebilmek.
ile gelişimin erken aşamasında AJAX aramalar kullanılarak inşa edilmesi gerekiyordu Javascript bizim için çok fazla kod oluşturan düz, ancak jQuery hem geliştiricinin hem de kullanıcının yararına olmak üzere, bu tekniğin ve teknolojilerin benimsenmesini kitlelere sunarak işleri basitleştirmemize yardımcı olur.
AJAX nedir?AJAX karşılık gelir Asenkron Javascript ve XML yani Javascript Y XML asenkron, bu aynı zamanda bir komut dosyası gibi sabit bir yapıya bağlı olmayan bir şey olduğu anlamına gelir. PHP komutların sıralı olarak yürütüldüğü yerlerde, elbette çağrıları sınıfların ve nesnelerin yöntem ve işlevlerine kaydederek.
Yukarıda açıklananlar bize, yeniden yüklemeye veya sunucuya "tamamla" bir istekte bulunmadan bilgi yükleme veya gönderme imkanı verir, aramalar nedeniyle tırnak içine alırız. AJAX Bunlar normal isteklerdir, istenen davranış değilse sayfayı tamamen yenilemek gerekli değildir.
Bu teknikleri ve teknolojileri kullanmak, pek çoğunun varlığından haberdar olmadığı bazı avantajları temsil eder, çoğu zaman sadece bir trend meselesi için kullanırız, ancak faydalarını anlarsak, hangi projelere uygulayabileceğimizi bilebiliriz. en çok ondan. Aşağıda kullanmanın en önemli avantajlarından bazılarını görelim AJAX:
Bant genişliği kullanımında azalmaBunu özellikle bölümlerin talepleri sayesinde başarıyoruz, bununla örneğin, istediğimiz metni yenilemekse genel stilleri veya resimleri yeniden yüklemek zorunda kalmamayı başarabiliyoruz.
Daha iyi kullanıcı deneyimiWeb uygulamasının hızını artırarak, kullanıcı, geliştiriciler olarak bize düzenlediğimiz öğelerle etkileşim derecesini artırma fırsatı vermenin yanı sıra, kullanımda kayda değer bir gelişmeye sahiptir.
Tarayıcı bağımlılığını kaldırınKullanırken jQuery tarayıcıya bağlı kod yazma ihtiyacı ortadan kalkıyor, bu da zamanımızın geliştirme hızını ve üretkenliğini artırmamıza yardımcı oluyor.
Hiçbir şey mükemmel olmadığından, kullanırken AJAX Ayrıca, projemiz için en iyi seçenek olup olmadığını düşünmemize ve düşünmemize neden olabilecek bazı dezavantajların olduğunu da anlamalıyız. Daha sonra, öğreticinin teknik kısmına başlamadan önce daha eksiksiz bir resme sahip olmak için bu noktalardan bazılarını göreceğiz.
BağımlılıkBir istemci veya kullanıcı çok eski bir tarayıcı kullanıyorsa veya Javascript devre dışı bırakılır, uygulamamız zarar görebilir veya çalışmayabilir, bu da bize kullanamadığımız durumlarda özel durumlar yapma zorunluluğu verir. AJAX.
Ek kod yazUygulamamıza göre isteklerden aldığımız cevapları entegre edebilmek için ek kod yazmamız gerekiyor. AJAX, gelen cevaplar gibi HTML Y CSS.
Elbette şu anda uyumlu olmayan bir tarayıcı bulmak çok zor. Javascript Y jQueryAncak bölgemize bağlı olarak hayatı çok zorlaştırabilecek bazı durumlarla karşılaşabiliyoruz.
Bir istek AJAX itibaren jQuery çerçeve için gerekli bazı parametreleri oluşturmamız gereken temel bir yapıya sahip olmalı, yöntemi oluşturmalıyız HTTP isteğin hangi rotaya yapılacağı, yanıt biçimi ve son olarak isteğin başarılı olması veya bir hata oluşması durumunda yapılması gerekenler. Bunu nasıl görebileceğimizi aşağıdaki işlevsel olmayan kodda görelim:
$ .ajax ({type: "HTTP yöntemi", // POST, GET, PUT, DELETE url: "İstek yolu", // http: / / www.example.com/request dataType: "Veri türü", / / html, xml, json başarısı: başarı durumunda işlev, hata: hata durumunda işlev}); Anlattığımız bölümlerin her birinin isteğimizin aldığı parametreler olduğunu ve metot üzerinden yapıldığını görüyoruz. $ .ajax () hangi tarafından sağlanır jQuery doğrudan ve kod için bir maskedir Javascript Desteklenen her tarayıcının her motoruna karşılık gelen uçak, şu anda neredeyse tüm en yeni reklamlar. Chrome, Firefox, Opera, Safari Internet Explorer, ve bunların motorlarından türetilenler, bahsettiğimiz.
Şimdi bir önceki bölümde gördüklerimizi talepte bulunurken uygulayacağız. AJAX bir sayfadan HTML aşağıdaki örnekte oluşturacağımız En güncel sürüme ihtiyaç duyacağımızı bilmeliyiz. jQuery alabiliriz, ancak onların içinde sakladıklarını kullanabiliriz. CDN, elde edeceğimiz dosyaları asenkron olarak yönlendirebilmek için küçük bir web sunucusuna da ihtiyacımız olacak, bunun için kullanabiliriz WAMP içinde pencerelerveya bir kurulum LAMBA sistemlerde Linux, kullanabileceğimiz MAC platformları ile ilgili XAMP veya benzeri.
Aşağıdaki koda ilk olarak ekleyeceğiz jQuery, sonra gövdede benzersiz bir kimliğe sahip bir etiket oluşturacağız ve burada isteğimizin yanıtının içeriğini yerleştireceğiz ve belgenin sonuna yakın bir etiket yapacağız senaryo özniteliğinde, isteği yapmak için kodu oluşturacağımız yer url dosyalarımızın bulunduğu klasörün dizinine istek yapacağız, bunu kodumuzun çalışmasını göstermek için yapıyoruz, ancak bunu yapmanın yolu, ihtiyacımız olan yanıtı sunacak başka bir dosya istemek, hadi koda bakın:
AJAX İstek ÖrneğiAJAX işlemi
Aşağıdaki resimde, kodumuzdan başarılı bir yanıt görebildiğimiz her şeyin nasıl çalıştığını görüyoruz.
O şeylerden biri jQuery istediği, zaman kaybetmememiz ve işleri uzun yoldan yaparak kod yazmamamızdır, bu yüzden bize aramalar için kısayollar sunar. AJAX gibi en yaygın yöntemler ELDE ETMEK Y İLETİ, bu yüzden kısayolu kullanarak birkaç satır kod kaydediyoruz ve böylece uygulamamızın ağırlığını azaltabiliyoruz.
Bunun için resmi belgelerde jQuery Mevcut tüm durumlara sahibiz, ancak bu durumda kısayolu kullanarak önceki örneği yeniden yapacağız, ancak işlevsel kodu görmeden önce işlevsel olmayan örneği görelim:
$ .get (yol, veri, SuccessFunction, ResponseType);
Bu çağrının çok daha küçük olduğunu fark ettiğimiz için daha temiz ve daha hafif bir koda sahip olmamıza yardımcı oluyor, şimdi bunu önceki örneğimize uygularsak aşağıdaki gibi olur:
AJAX İstek ÖrneğiAJAX işlemi
Satır ve karakter sayısının önemli ölçüde azaldığını görüyoruz, bu da daha düşük bir bant genişliği kullanarak veri iletimimizi iyileştirecek. Her şeyi tarayıcıda çalıştırırsak bize şu cevabı verir:
