[MUSIC PLAYING] Doug LLOYD: Jadi satu lagi semacam anggapan bahwa semacam jatuh di bawah payung JavaScript adalah sesuatu yang disebut AJAX. Sampai titik ini, kami interaksi dengan JavaScript telah terbatas untuk mendorong tombol dan sesuatu terjadi. Dan secara khusus, sesuatu yang terjadi adalah website kami melihat dan merasa perubahan. Kanan? Seperti khususnya, di Document Object Model video, Saya mengubah warna latar belakang. Tapi ketika saya melakukan itu, saya tidak memiliki untuk melakukan permintaan istimewa. Saya tidak perlu meminta server mengirimkan saya sebuah halaman baru. Aku hanya mengubah apa yang saya sudah punya. Saya tidak perlu memuat ulang halaman saya, dan hal-hal pasti berubah, jadi itu bagus. Tapi ada pasti beberapa interaksi user manual yang terlibat. AJAX adalah teknik keren yang memungkinkan kita untuk memperbarui konten halaman, dan bukan hanya tampilan dan merasa, tanpa reload. 

Dan dengan secara khusus ketika saya mengatakan memperbarui konten halaman, Saya tidak mengatakan kami menulis ulang halaman menggunakan JavaScript. Saya mengatakan kita benar-benar meminta informasi lebih lanjut dari server tanpa halaman kami harus reload. 

Sekarang semacam sedikit teknik yang lebih maju bahwa kita akan berbicara tentang dalam video ini. Kami akan memiliki beberapa interaksi. Tetapi ketika kita melakukannya, aku akan menjadi membuat permintaan ke server web. Dalam hal ini, hanya apa menjalankan web server Apache saya. Aku akan membuat tambahan permintaan sementara aku mengunjungi sebuah halaman web, tapi halaman saya tidak akan menyegarkan. 

Ini hanya akan asynchronous memperbarui halaman saya. Dan itu, pada kenyataannya, yang AJAX singkatan, adalah Asynchronous JavaScript dan XML. XML adalah jenis lain dari markup bahasa, dan Anda dapat mengurutkan dari dipikir-pikir seperti HTML. Ini tidak cukup hal yang sama, tetapi itu pada dasarnya hanya bahasa markup. Jadi itu adalah asynchronous JavaScript dan bahasa markup. 

Jadi untuk menggunakan ini AJAX AJAX technique-- bukan bahasa pemrograman yang terpisah. Ini hanya semacam set kami techniques-- perlu membuat khusus Objek JavaScript, yang disebut XMLHttpRequest. Sekarang, itu sangat mudah untuk melakukan hal ini. Kami hanya mengatakan var, apa pun kami ingin memanggil objek ini, sama dengan XMLHttpRequest baru. Dan sekarang kami telah diperoleh sekarang sebuah semacam AJAX objek, atau XMLHttpRequest objek, yang akan memungkinkan kita untuk asynchronous memperbarui halaman kami. 

Setelah kita mendapatkan ini baru objek, XMLHttpRequest ini, kita harus melakukan sesuatu untuk nya perilaku onreadystatechange. Onreadystatechange perilaku benar-benar hanya ketika Anda membuat permintaan ke halaman web, halaman berjalan melalui sejumlah langkah. Pertama, permintaan belum terkirim. Kemudian, permintaan telah mengirim, tapi tidak ditindaklanjuti. Maka permintaan telah ditindaklanjuti. Maka permintaan tersebut dikirim kembali kepada Anda. 

Kemudian, permintaan tersebut terisi penuh di halaman Anda. Mereka adalah negara yang berbeda. Dan jadi kita perlu mengatur kami objek XMLHttpRequest baru untuk mengubah ketika perubahan status siap. Dan biasanya, kami melakukan ini dengan mendefinisikan fungsi anonim, yang kita akrab dengan dari JavaScript sekarang, yang disebut ketika perubahan status siap. Ini benar-benar tidak lebih dari itu. Kami hanya akan mendefinisikan fungsi anonim, semacam seperti apa kami lakukan di JavaScript, di mana kita akan memiliki fungsi anonim menanggapi on klik, atau ketika kami melakukan peta berbagai objek dalam sebuah array. 

Sesuatu terjadi ketika sesuatu diklik. Dalam hal ini, itu hanya sesuatu yang terjadi ketika keadaan halaman kami perubahan. Ada dua sifat lainnya yang semacam of-- mereka tidak satu-satunya properti yang melekat pada XMLHttpRequest, tapi mereka yang cukup penting. Ada sesuatu yang disebut readyState, yang seperti yang Anda mungkin bisa menebak, adalah terkait dengan onreadystatechange. Ini benar-benar memberitahu Anda apa readyState adalah. 0, 1, 2, 3, dan 4 kemungkinan ada, dan mereka semacam sekitar sesuai dengan apa yang Saya hanya berbicara tentang satu detik lalu. 

Dan kemudian status, yang semoga jika semuanya berjalan OK, adalah 200, yang merupakan kependekan untuk, tentu saja, OK, yang kita kenal dari Http. Jadi kami berharap bahwa negara siap kami adalah empat, dan status kita adalah 200. Dan jika negara siap kami adalah empat, dan respon siap untuk diletakkan pada Halaman, dan status adalah 200, kami mampu melakukan semuanya berhasil, sekarang kita bisa asynchronous memperbarui halaman kami tanpa harus reload seluruh isi itu. 

Setelah kita mendefinisikan apa yang terjadi dengan perilaku onreadystatechange, dan kami sudah memeriksa bahwa readyState adalah 4 dan status adalah 200, maka semua yang perlu kita lakukan adalah membuka sebuah asynchronous permintaan, yang hanya membuat sebuah Http umumnya GET permintaan. Hanya melakukannya pemrograman, bukannya melalui browser web kami. Dan kemudian kami kirim permintaan itu. Jadi, apa ini mungkin terlihat seperti dalam konteks? Jadi, inilah fungsi yang penawaran dengan permintaan AJAX. OKE? Dan aku sudah sewenang-wenang mengatakan ia menerima argumen. Dan ini semacam kerangka umum di sini. Pada awal, kita mendapatkan diri kita sendiri objek XMLHttpRequest baru. Lalu, saya harus mengatur perilaku onreadystatechange. Dan jadi saya akan mengatakan ketika perubahan readyState, Aku ingin kau memanggil fungsi ini. 

Yang akan meminta pertanyaan, jika readyState adalah 4, jika readyState telah berubah menjadi 4, dan status itu 200, jadi kami punya permintaan sukses, saya ingin melakukan sesuatu untuk halaman. Dan kita akan melihat-lihat sebuah contoh dari apa yang sesuatu yang mungkin dalam hitungan detik. Jadi, sekarang saya telah didefinisikan fungsi anonim saya, fungsi respon saya setiap kali perubahan readyState. 

Jadi saya hanya perlu untuk membuka meminta, menggunakan metode Terbuka. Dan kemudian, saya mengirim permintaan itu. Dan mari kita lihat contoh yang lebih konkret apa AJAX dapat Anda lakukan di halaman web kami. Jadi saya miliki di sini sangat sederhana Halaman disebut home.html. Dan aku punya informasi berjalan di sini dan semacam menu drop-down. 

Dan kami akan kembali ini dalam satu detik. Tapi saya pikir kita sekarang harus mengambil melihat kode sumber yang sebenarnya. Dan, aku akan membuka home.html. Dan kami akan melihat apa yang terjadi. Jadi di bagian paling atas di sini, saya memiliki beberapa hal JavaScript yang terjadi. 

Dan di sini, saya tampaknya memiliki div yang ID adalah infodiv, dan beberapa informasi akan pergi ke sana. Dan kemudian saya harus formulir ini. Dan dalam hal ini bentuk, saya memiliki sesuatu disebut Pilih, yang hanya menu drop-down dengan banyak pilihan yang berbeda. Dan ternyata saat yang berubah, ketika opsi yang telah dipilih memiliki berubah, aku akan memanggil beberapa fungsi cs50Info, dan kemudian aku akan lulus dalam this.value, mana ini mengacu pilihan yang dipilih, dan nilai adalah salah satu dari ini di sini, pilihan value = sama kosong, "Blumberg," "bowden," "chan," dan "malan." 

Jadi apa yang mungkin benar-benar terjadi di sini ketika saya melakukan ini? Nah, mari kita melihat blumberg.html. Sepertinya itu hanya potongan beberapa Html. Dan pada kenyataannya, apa yang saya berharap yang akan terjadi di sini adalah aku akan dapat steker Html ini langsung ke halaman web saya tanpa harus reload halaman, sehingga ketika Saya memilih Hannah dari drop-down menu, informasi tentang Hannah, khususnya, informasi ini di sini di blumberg.html, adalah apa yang muncul pada halaman. Dan aku tidak harus me-refresh. Dan jika saya memilih orang lain, informasi mereka akan muncul. Bagaimana saya melakukan ini? Sekali lagi, ini membutuhkan kita untuk menggunakan beberapa AJAX. Dan, kami akan membuka ajax.js. Dan di sini adalah fungsi yang, cs50Info. Jika nama apa-apa, aku kembali. Aku tidak akan melakukan apa-apa jika opsi kosong telah dipilih. Jika tidak, aku akan membuat XMLHttpRequest baru. Dan kemudian aku akan mengatakan, ketika perubahan readyState, memanggil fungsi ini. 

Dan jika readyState adalah 4 dan status adalah 200, inilah sedikit jQuery on line 13. Tapi semua saya lakukan adalah mengatakan, mengubah isi infodiv menjadi apa pun yang aku kembali sebagai respon dari HttpRequest saya. 

Apa HttpRequest saya? Nah, itu benar di sini on line 18 dan 19. Baris 18, saya pada dasarnya mempersiapkan GET permintaan nama + html. Dan lagi, nama di sini adalah argumen yang berlalu dalam sebagai parameter untuk cs50Info. 

Jadi pada dasarnya, saya lewat di seseorang nama, yang adalah bahwa set pilihan yang kita lihat di menu drop-down dalam bentuk. Saya mendapatkan nama itu. Dan saya katakan saya ingin Anda untuk silakan mendapatkan bagi saya file.html itu, dan kemudian mengirim permintaan itu. 

Dan onreadystatechange yang akan menjadi mendengarkan dan menunggu dan menunggu dan menunggu, sampai readyState adalah 4, dan status adalah 200. Sehingga siap untuk dilayani, dan permintaan berhasil. Dan kemudian jika itu adalah, itu akan mengubah isi infodiv menjadi teks respon yang saya dapatkan kembali. 

Jadi mari kita lihat bagaimana ini mungkin benar-benar bekerja. Jadi kita akan kepala ke browser saya jendela, dan kami akan lihat di sini. Jadi mari kita lihat apa yang terjadi di sini di AJAX. Jadi kita akan memilih seseorang dari menu drop-down. Jadi dalam hal ini, mari kita hanya memilih Hannah. Dan pemberitahuan bahwa Hannah informasi telah berubah, tapi saya tidak punya any-- saya Halaman tidak sepenuhnya ulang. Hal-hal yang tinggal. Sebagian besar barang tinggal. AJAX Uji tidak berubah. Tombol itu sendiri, ini menu drop-down tidak berubah. Tetapi informasi ada melakukan perubahan. Dan tergantung pada bagaimana cepat komputer bergerak saya, Anda benar-benar mungkin melihat bahwa konten menghilang dan kemudian muncul kembali benar segera. Itulah isi yang dihapus dari infodiv, dan kemudian diganti dengan permintaan asynchronous baru. 

Jadi jika saya beralih untuk mengatakan, Rob-- dan lagi, kita lihat, dan mungkin kita akan melihat itu benar-benar hilang dan muncul kembali dengan cepat. Kamu melihatnya? Bagaimana itu hanya muncul jauh, dan kemudian diisi ulang? Itu permintaan AJAX semacam mengambil tempat. Dan sebagainya tergantung pada orang yang saya pilih, saya membuat asynchronous yang berbeda permintaan ke file yang berbeda yang saya miliki di server saya. Dan isi saya infodiv memperbarui, berdasarkan mana yang saya telah memilih. Jadi itu benar-benar semua yang ada untuk AJAX. Hal ini memungkinkan kita untuk membuat asynchronous ini permintaan, update ke halaman. Tanpa harus refresh seluruh halaman, kita akan mendapatkan baru konten dari itu dengan membuat permintaan segar baru ke server. Dan, halaman kita bisa menjadi cukup sedikit lebih dinamis. 

Dan seperti yang kita mendapatkan lebih banyak dan lebih maju, Anda mungkin mendapatkan hal-hal seperti katakanlah, inbox email Anda, di mana Anda tidak perlu melakukan apa-apa. Anda tidak perlu klik menu drop-down atau klik apapun, dan tiba-tiba, Anda terbaru email muncul di bagian atas. Itu juga hanya permintaan Ajax. Ajax meminta Anda server, server email, untuk mengirim lebih dari semua informasi tentang email Anda terbaru, dan mengubah apa yang Anda lihat pada Layar menjadi set terbaru Anda email. Dan jika Anda memiliki yang baru di ada, maka isi dari div yang akan berubah untuk mencerminkan konten diperbarui. Aku Doug Lloyd. Ini adalah CS50.