AJAX nasıl çalışır?


87

AJAX'ın özü nedir? Örneğin, sayfamda bir bağlantı olmasını istiyorum, öyle ki bir kullanıcı bu bağlantıyı tıkladığında, mevcut sayfanın yeniden yüklenmesine gerek kalmadan sunucuma bazı bilgiler gönderilsin. Bu AJAX mı?

Bu davranışı isoframe kullanarak elde edebildim. Daha ayrıntılı olarak, küçük bir eş çerçeveye bir bağlantı (küçük bir resim diyelim) koyuyorum. Kullanıcı bu bağlantıyı tıkladığında, tarayıcı yalnızca isoframe'deki sayfayı yeniden yükler.

Ancak, hedefe ulaşmanın şık bir yolu olmadığını düşünüyorum. AJAX kullanmam gerektiğini düşünüyorum. O nasıl çalışır? Bir XHTML kullanımı, söz konusu sorunu zarif bir şekilde çözebilir mi? Veya JavaScripts kullanmam gerekiyor mu?

Fazla ihtiyacım yok. Sadece (tıkladıktan sonra) sunucuya bazı bilgiler gönderen küçük bir bağlantı istiyorum. İletinin yanında bir "yıldız resmim" olduğunu varsayalım. Bir kullanıcı yıldızı tıklarsa (mesajı beğenir) yıldız rengi değiştirir ve sunucu güncelleme veritabanım (kullanıcının mesajı beğendiğini hatırlamak için).


8
Wikipedia'ya zorunlu bağlantı: en.wikipedia.org/wiki/Ajax_(programming)
Jon B

: Yanıt için bağlantıyı ziyaret edebilirsiniz w3schools.com/php/php_ajax_intro.asp

Yanıtlar:


121

AJAX'ta (Eşzamansız Javascript ve XML anlamına gelen) tamamen yeniyseniz, wikipedia'daki AJAX girişi iyi bir başlangıç ​​noktasıdır:

DHTML ve LAMP gibi, AJAX da kendi başına bir teknoloji değil, bir grup teknolojidir. AJAX şunların bir kombinasyonunu kullanır:

  • Bilgileri biçimlendirmek ve biçimlendirmek için HTML ve CSS.
  • DOM, sunulan bilgileri dinamik olarak görüntülemek ve bunlarla etkileşim kurmak için JavaScript ile erişti.
  • Tarayıcı ve sunucu arasında eşzamansız veri alışverişi için bir yöntem, böylece sayfanın yeniden yüklenmesini önler. XMLHttpRequest (XHR) nesnesi genellikle kullanılır, ancak bazen bunun yerine bir IFrame nesnesi veya dinamik olarak eklenen bir etiket kullanılır.
  • Tarayıcıya gönderilen veriler için bir format. Yaygın biçimler arasında XML, önceden biçimlendirilmiş HTML, düz metin ve JavaScript Nesne Gösterimi (JSON) bulunur. Bu veriler, bir tür sunucu tarafı komut dosyasıyla dinamik olarak oluşturulabilir.

Gördüğünüz gibi, saf teknolojik bir bakış açısından, burada gerçekten yeni bir şey yok. AJAX parçalarının çoğu 1994'te zaten oradaydı ( XMLHttpRequestnesne için 1999 ). Gerçek yenilik, Google'ın GMail (2004) ve Google Maps (2005) ile yaptığı gibi bu parçaları birlikte kullanmaktı . Aslında, her iki site de AJAX'ın tanıtımına büyük katkıda bulundu.

İstemci ile uzak sunucu arasındaki iletişimi ve klasik ve AJAX destekli uygulamalar arasındaki farkları gösteren bir şemanın altında bin kelimeye bedel bir resim:

alternatif metin

Turuncu kısım için, her şeyi elle ( XMLHttpRequestnesne ile) yapabilirsiniz veya jQuery , Prototype , YUI , vb. Gibi ünlü JavaScript kitaplıklarını uygulamanızın istemci tarafında "AJAXify" için kullanabilirsiniz. Bu tür kitaplıklar, JavaScript geliştirmenin karmaşıklığını (örneğin, tarayıcılar arası uyumluluk) gizlemeyi amaçlamaktadır, ancak basit bir özellik için gereğinden fazla olabilir.

Sunucu tarafında, bazı çerçeveler de yardımcı olabilir (örneğin , Java kullanıyorsanız DWR veya RAJAX ), ancak yapmanız gereken tek şey temelde sayfayı kısmen güncellemek için yalnızca gerekli bilgileri döndüren bir hizmeti ortaya çıkarmaktır (başlangıçta XML olarak / XHTML - AJAX'taki X - ancak günümüzde JSON sıklıkla tercih edilmektedir).


17

AJAX'ın özü şudur:

Kullanıcı başka şeyler yaparken sayfalarınız web'e göz atabilir ve kendi içeriğini güncelleyebilir .

Yani, javascript'iniz eşzamansız GET ve POST istekleri (genellikle bir XMLHttpRequestnesne aracılığıyla ) gönderebilir, ardından bu isteklerin sonuçlarını sayfasını değiştirmek için kullanabilir ( Belge Nesne Modeli manipülasyonu yoluyla ).


Bu "kendi başlarına güncelleme" yi çalışırken görebileceğim, elden olmayan herhangi bir örnek var mı?
Daniel Springer

17

AJAX tipik olarak istemciden sunucuya HTTP istekleri göndermeyi ve tüm sayfayı yeniden yüklemeden sunucunun yanıtını işlemeyi içerir. (Eşzamansız olarak).

Javascript genellikle gönderimi yapar ve sunucudan veri yanıtını alır (geleneksel olarak XML, genellikle JSON gibi diğer daha az ayrıntılı biçimler)

Ardından Javascript, kullanıcının görünümünü güncellemek için DOM sayfasını dinamik olarak güncelleyebilir.

Böylece 'Eşzamansız Javascript ve XML'.

Sayfayı yeniden yüklemeden kullanıcının görünümünü güncellemek için başka seçenekler de vardır, Flash ve Applet gibi şeyler, ancak bunlar sizin durumunuz için iyi çözümler gibi görünmüyor. Javascript, gitmenin yolu gibi görünüyor. Bu sitede kullanılan jQuery gibi pek çok iyi kütüphane desteği var, bu yüzden aslında çok fazla Javascript yazmanıza gerek yok.


Bu cevabı beğendim. @Verrtex bilmeniz gereken tek şey XMLHttpRequest hakkındadır.
enguerran

13

Ajax, sayfanın yalnızca bir bölümünü yeniden yüklemekten daha fazlasıdır. Ajax, Asenkron Javascript ve Xml anlamına gelir.

Ajax'ın ihtiyacınız olan tek parçası XMLHttpRequest javascript'ten nesnesidir. HTML'nizin küçük bir bölümünü bir div veya başka bir etiket olarak yüklemek ve yeniden yüklemek için kullanmanız gerekir.

Bu örneği okuyun ve düşündüğünüz anda profesyonel olacaksınız!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

1
AJAX ismine rağmen XML gerektirmez, ancak AJAX / kısaltmasındaki X, XML anlamına gelir, çünkü tarihsel olarak sunucu ve istemci arasında iletişim kurma yoludur.
enguerran

5

AJAX, Eşzamansız Javascript ve XML anlamına gelir. AJAX, sayfanın tamamını sunucuya geri göndermek zorunda kalmadan sayfalarda kısmi güncellemeleri destekler.

AJAX için birçok seçenek var. En dikkate değer iki tanesi (muhtemelen) Microsoft'un ASP.NET AJAX (eski adıyla Atlas) ve jQuery'dir.

ASP.NET AJAX’ın kurulumu, hâlihazırda ASP.NET’e aşinaysanız nispeten kolaydır. Javascript'i zaten biliyorsanız, jQuery iyidir ve sayfanızın sorgulanması ve güncellenmesi üzerinde çok ayrıntılı kontrol sağlar.

HTH


2

İlgileniyorsanız, IBM'in Ajax'ta 10 (muhtemelen daha fazla) parça serisi var: Ajax bölüm 1'de Mastering

Birkaç yaşında olmasına rağmen şimdi iyi bir giriş (ilk bölümü okusanız bile!)

Sanırım dizinin tamamı burada listelenmeli , site şu anda benim için biraz yavaş olsa da ...

Özet:

HTML, JavaScript ™ teknolojisi, DHTML ve DOM'dan oluşan Ajax, hantal Web arayüzlerini etkileşimli Ajax uygulamalarına dönüştürmenize yardımcı olan olağanüstü bir yaklaşımdır. Bir Ajax uzmanı olan yazar, son derece verimli Web geliştirmeyi kolay bir gerçeklik haline getirmek için bu teknolojilerin genel bir bakıştan ayrıntılı bir görünüme kadar birlikte nasıl çalıştığını gösteriyor. Ayrıca XMLHttpRequest nesnesi de dahil olmak üzere Ajax'ın temel kavramlarını açıkladı.


1

bu ajax. ajax'ı javascript olmadan kullanamazsınız. kullanım hakkında fikir edinmek için jquery ve prototip örneklerine bakmalısınız.


Bazı kaynaklara göre AJAX'ı VBScript ile yapabilirsiniz. Yine de yapmak için iyi bir neden yok. :-)
Nosredna

Hayır, yapamazsınız. AVAX'i VBScript ile yapabilirsiniz.
Stefan Kendall

6
Heh. AJAX'ın Eşzamansız JavaScript ve XML olduğunu duydum. Zaman uyumsuz olması gerekmemesi dışında JavaScript olması gerekmez ve XML olması gerekmez.
Nosredna

0

Yapmaya çalıştığınız şey teknik olarak ajax. Ajax, bir sayfanın bölümlerini güncellemek için xhtml parça işlemleri oluşturur. Javascript, bu isteklerin güzel ve düzenli olmasını sağlar.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.