[MÜZİK OYUN]
>> Doug LLOYD: Yani bir daha kavramının tür olduğunu
tür çatısı altında düşüyor JavaScript AJAX denilen şeydir.
Bu noktaya kadar, adresimizi JavaScript ile etkileşim
Bir itmek için sınırlı kalmıştır düğmesi ve bir şey olur.
Ve özel olarak ise, olur bir şey
Bizim web siteleri bakmak ve değişiklikleri hissediyorum.
Sağ?
Özellikle de olduğu gibi, in belge nesne modeli, video,
Ben arka plan rengi değişti.
Ben yaptım ama ne zaman, ben yoktu herhangi bir özel ekstra istekleri yapmak.
Bunu istemek yoktu Sunucu bana yeni bir sayfa göndermek.
Ben sadece zaten ne vardı değişti.
Ben, benim sayfayı yeniden yoktu ve işler kesinlikle değişti
böylece bu harika.
Ama kesinlikle orada bazı manuel kullanıcı etkileşimi çıkıyor.
AJAX sağlayan serin bir tekniktir bize sayfanın içeriğini güncellemek için,
ve sadece görünüm ve yüklemeden, hissediyorum.
>> Ve ne zaman, özellikle I Bir sayfanın içeriğini güncelleyerek demek,
Sanırım yeniden demiyorum JavaScript kullanarak sayfa.
Ben aslında talep söylüyorum Sunucudan fazla bilgi
sayfamızı yeniden yüklemek zorunda kalmadan.
>> Bir bit Şimdi bu tür daha gelişmiş bir tekniktir
Konuşmamız gidiyoruz Bu video hakkında.
Biz bazı etkileşim zorunda gidiyoruz.
Biz ne zaman Ama olacağım web sunucusuna isteklerini yapma.
Bu durumda, sadece ne Benim Apache web sunucusu çalıştıran.
Ben ek yapma gibi gidiyorum istekler Ben, bir web sayfasını ziyaret ediyorum ederken
ama benim sayfa yenilenmez.
>> Sadece gidiyor zaman uyumsuz benim sayfayı güncellemek.
Ve bu, aslında, bu AJAX açılımı, hangi
Asynchronous JavaScript ve XML olduğunu.
XML biçimlendirmesi bir başka türüdür dil, ve size sıralayabilirsiniz
Sadece HTML gibi düşün.
Bu, tamamen aynı şey değil ama bu temelde sadece bir biçimlendirme dili var.
Yani bir asenkron var JavaScript ve bir biçimlendirme dili.
>> Yani bu kullanmak için AJAX technique-- AJAX
Ayrı bir programlama dili değildir.
Bu sadece bir tür var techniques-- biz seti
Özel oluşturmanız gerekir JavaScript nesne, hangi
XMLHttpRequest olarak adlandırılır.
Şimdi, bunu yapmak çok kolay.
Biz sadece söylemek var, ne olursa olsun Bu nesneyi aramak istiyorum,
Yeni XMLHttpRequest eşittir.
Ve şimdi biz şimdi almış nesnenin bir AJAX tür
veya XMLHttpRequest sağlayacak nesne
Bize zaman uyumsuz sayfamızı güncellemek için.
>> Bu yeni kazanılmış sonra Nesne, bu XMLHttpRequest,
biz bir şeyler yapmak zorundayız onun onreadystatechange davranış.
Onreadystatechange davranış gerçekten sadece bir
Eğer bir istek yaptığınızda Bir web sayfasına, sayfa
bir dizi adım bu geçer.
İlk olarak, bir istek gönderildi edilmemiştir.
Ardından, istek olmuştur gönderdi, ama üzerine harekete geçti değil.
Sonra istek üzerine hareket edilmiştir.
Sonra istek size geri gönderiliyor.
>> Ardından, istek tam sayfanıza yüklendi.
Bunlar farklı durumlardır.
Ve böylece bizim ayarlamanız gerekir Yeni XMLHttpRequest nesnesi
Hazır olduğunda durum değişiklikleri değiştirmek için.
Ve tipik, biz bunu Bir anonim işlev tanımlamak hangi
biz kimden aşina Şimdi JavaScript, o
Hazır olduğunda durum değişiklikleri denir.
Bundan daha gerçekten çok fazla.
Biz sadece bir tanımlama için gidiyoruz anonim işlev, bir çeşit ne gibi
Biz yapıyorduk JavaScript, biz olur
bir anonim işlevi var tıklama bir cevap,
ya da biz bir harita yaptıklarını zaman Dizideki çeşitli nesneler.
>> Bir şey ne oldu bir şey tıklandığında edildi.
Bu durumda, sadece bir şey olduğunu oluyor bizim sayfanın durumu
değişir.
İki diğer özellikler vardır sıralama of-- değiller ki
sadece özellikler XMLHttpRequest doğasında,
ancak oldukça önemli olanları değil.
ReadyState denilen bir şey var, hangi muhtemelen tahmin edebileceğiniz gibi,
onreadystatechange ilgili olduğunu.
Aslında size söyler readyState nedir.
0, 1, 2, 3 ve 4 olan Orada olanakları,
ve onlar tür kabaca karşılık Ne
Ben sadece bir saniye önce bahsediyordu.
>> Ve sonra durumu, hangi Umarım herşey yolunda giderse,
kısa olduğu, 200 için, tabii ki, tamam
Biz Http dan aşina olan.
Yani biz umuyoruz bizim hazır devlet Dört ve bizim durumu 200.
Ve hazır durumda eğer Dört ve tepki
koymak için hazır sayfa ve durum 200,
Biz bunu başardık Her şey başarıyla
şimdi biz zaman uyumsuz olabilir sayfamızı güncelleme
yeniden yüklemek zorunda kalmadan Bunun tüm içeriği.
>> Biz ne tanımladıktan sonra onreadystatechange davranışı,
ve bunu kontrol ettik readyState , 4 ve durum 200
Daha sonra yapmamız gereken tek şey Bir uyumsuz açmak
istek, sadece yapıyor Bir Http genellikle isteği GET.
Sadece programlı yapıyor, Bunun yerine web tarayıcısı üzerinden evi.
Ve sonra biz bu isteği gönderin.
Peki belki bu yapar bağlamda benziyor?
Yani burada bir fonksiyon olduğunu AJAX istekleri ile ilgilenir.
Tamam mı?
Ve ben keyfi söyledim bir argüman kabul eder.
Ve bu bir tür Burada genel iskelet.
Başından, biz olsun Kendimizi yeni bir XMLHttpRequest nesnesi.
Sonra, ben ayarlamanız gerekir onreadystatechange davranış.
Ve bu yüzden söylemek için gidiyorum zaman readyState değişikliği,
Ben bu işlevi çağırmak istiyorum.
>> Soracağım Hangi soru readyState eğer
readyState değişmişse, 4'ü 4 olacak ve durum 200 oldu,
bu yüzden ben, başarılı bir isteği vardı sayfaya bir şeyler yapmak istiyorum.
Ve biz göz atacağız bir örnekle neyi
O şey bir saniyede olabilir.
Öyleyse, şimdi ben tanımladığınız Benim anonim işlev,
Benim tepki işlevi her readyState değişir.
>> Yani o zaman sadece bir açmanız gerekiyor Açık yöntemini kullanarak, rica ederim.
Ve sonra, ben bu isteği gönderin.
Ve en az bir göz atalım daha somut bir örnek
Neyin AJAX web sayfalarında yapabilirsiniz.
Yani burada çok basit var sayfa home.html denir.
Ve ben bir bilgi gider var Burada ve açılır menüden bir çeşit.
>> Ve biz bir saniye içinde bu tekrar edeceğiz.
Ama biz şimdi almak gerektiğini düşünüyorum Gerçek kaynak kodu bakmak.
Ve bu yüzden, ben home.html açmak için gidiyorum.
Ve biz neler göreceğiz.
Burada çok üstünde yukarı Yani, var oluyor bazı JavaScript şeyler.
>> Ve burada, görünüşte var kimin kimliği infodiv bir div,
ve bazı bilgiler oraya gidecek.
Ve sonra bu form var.
Bu iç Form, ben bir şey var
Select adı verilen bu Sadece bir açılır menü
farklı seçenekler bir demet.
Ve bu, ne zaman değişir görünüşe zaman seçildikten seçeneği vardır
değişti, ben diyeceğim Bazı işlev cs50Info,
ve sonra ben gidiyorum this.value geçmek,
burada, bu değinmektedir Hangi seçeneği seçildi,
ve değer, burada seçeneği bunlardan biridir value = eşittir boş, "Blumberg,"
"bowden", "chan" ve "malan."
>> Peki aslında ne olabilir Bunu yaparken burada ne?
Peki, bir alalım blumberg.html bak.
Bu sadece bir var gibi görünüyor Bazı Html pasajı.
Ve aslında, ne umuyorum Burada ne olacak
Ben fiş edebilmek için gidiyorum olduğunu Benim web sayfasına doğrudan bu Html
yeniden yüklemek zorunda kalmadan sayfa, örneğin o zaman
Ben Açılır menüden Hannah seçim Menü, Hannah hakkında bilgiler,
Özellikle, bu bilgi Burada blumberg.html olarak,
sayfadaki gösterir budur.
Ve ben yenilemek zorunda değilsiniz.
Ve ben, başkası seçerseniz onların bilgi sırıtmak olur.
Bunu nasıl yaparsın?
Yine, bunu gerektirir Bize biraz AJAX kullanmak için.
Ve böylece, biz ajax.js. açacaksın
Ve burada, cs50Info o fonksiyondur.
Adı başka bir şey ise, ben dönmek.
Ben eğer bir şey yapmak için gitmiyorum Boş bir seçenek seçilmiştir.
Aksi takdirde, ben gidiyorum Yeni XMLHttpRequest oluşturun.
Ve sonra, ne zaman söylemek için gidiyorum readyState değişiklikler, bu işlevini çağırın.
>> Ve readyState ise 4 ve durum 200,
Burada biraz var hat 13 jQuery.
Ama söylediğini yapıyorum, tüm infodiv içeriğini değiştirmek
Ben geri aldım ne olmak Benim HttpRequest yanıtı.
>> Benim HttpRequest nedir?
Peki, bu doğru Burada hat 18 ve 19.
Satır 18, ben temelde hazırlıyorum Bir isim + .html talebini GET.
Ve yine, adı burada oldu argüman
cs50Info bir parametre olarak geçirilen.
>> Yani temelde, ben birilerinin geçen am seçenekler bu dizi, hangi isim
Biz gördüm açılır menüsünü şeklinde.
Ben bu ismi alıyorum.
Ve ben seni istiyorum diyorum benim için file.html alınız,
ve o istek gönderebilirsiniz.
>> Ve böylece onreadystatechange gidiyor dinleme ve bekleme ve bekleme olmak
ve readyState kadar bekleme 4 ve durumu 200'dür.
Bu yüzden, hizmet için hazır ve istek başarılı oldu.
Ve eğer o zaman, gidiyor infodiv içeriğini değiştirmek
Ben döndüm tepki metin olmak.
>> Yani bu nasıl görelim Aslında işe yarayabilir.
Bu yüzden benim tarayıcı üzerinde kafa edeceğiz Pencere ve biz burada bakacağız.
Yani bir göz atalım Ne AJAX burada oluyor.
Bu yüzden birilerini seçeceğim Açılan menüden.
Bu durumda Yani, haydi Sadece Hannah seçin.
Ve haber o Hannah bilgi değişti,
ama any-- yoktu benim sayfası tamamen yeniden vermedi.
Şeyler kaldı.
Şeyler çoğu kaldı.
AJAX Testi değişmedi.
Düğmesine kendisi bu açılan menü değişmedi.
Ama bilgiler var değişikliği yaptı.
Ve nasıl bağlı hızla benim bilgisayar hamle,
aslında içerik olduğunu görebilirsiniz kaybolur ve daha sonra gerçekten yeniden görünür
çabuk.
Bu varlık içerik var infodiv silinir
ve daha sonra yerine Yeni uyumsuz bir istek.
>> Söylemek için bunu geçerseniz Yani, Rob-- ve yine bir göz atın,
ve belki de aslında görürsünüz kaybolur ve hızlı bir şekilde yeniden.
Gördün mü?
Nasıl sadece uzakta attı ve sonra doldurulmuş?
Bu AJAX isteği var meydana tür.
Ve böylece bağlı kişi ben değilim, seçim
Farklı uyumsuz hale Farklı bir dosyaya istek
Benim sunucu üzerinde olması.
Ve içeriği benim infodiv güncelliyoruz,
Ben seçtiğim bu hangi dayalı.
Yani gerçekten tüm AJAX orada var.
Bizi bu asenkron yapmanızı sağlar istekleri, bir sayfaya güncellemeleri.
Gerek kalmadan tüm sayfayı yenilemek,
yeni almak için gidiyoruz yaparak ondan içeriği
sunucuya yeni taze bir istek.
Ve böylece, bizim sayfalar olabilir biraz daha dinamik.
>> Ve biz daha fazla olsun ve daha gelişmiş, seni
gibi şeyler alabilirsiniz diyelim ki, e-posta gelen kutusu,
nerede bir şey yapmanız gerekmez.
Bir tıklamak zorunda değilsiniz açılır menüsünde ya da bir şey tıklatın
ve aniden, en yeni E-posta üstündeki gösterir.
Bu da sadece bir Ajax isteği var.
Ajax istiyor senin Sunucu, e-posta sunucusu,
Tüm bilgiler üzerinde göndermek için En son e-postalar hakkında,
ve gördüklerinizi değişen Ekran e-postalar için yeni set olmak.
Ve yeni bir tane var ise Bu div var, o içerik
yansıtacak şekilde değişecektir güncellenmiş içeriği.
Ben Doug Lloyd değilim.
Bu CS50 olduğunu.