[Bermain muzik] DOUG LLOYD: Jadi satu lagi semacam tanggapan bahawa semacam berada di bawah naungan JavaScript adalah sesuatu yang dinamakan AJAX. Sehingga ketika ini, kami interaksi dengan JavaScript telah dihadkan untuk menolak butang dan sesuatu berlaku. Dan secara khusus, sesuatu yang berlaku adalah laman web kami melihat dan merasa perubahan. Betul? Seperti khususnya, dalam Document Object Model video, Saya menukar warna latar belakang. Tetapi apabila saya berbuat demikian, saya tidak mempunyai melakukan apa-apa permintaan yang lebih istimewa. Saya tidak perlu meminta pelayan menghantar saya surat yang baru. Saya hanya berubah apa yang saya telah ada. Saya tidak perlu memuat semula halaman saya, dan perkara-perkara pasti berubah, jadi yang hebat. Tetapi ada pasti beberapa interaksi pengguna manual terlibat. AJAX adalah teknik sejuk yang membolehkan kami untuk mengemaskini kandungan halaman, dan bukan hanya rupa dan rasa, tanpa tambah nilai. 

Dan dengan secara khusus apabila saya mengatakan mengemaskini kandungan halaman, Saya tidak mengatakan kita menulis semula halaman menggunakan JavaScript. Saya katakan kita sebenarnya meminta maklumat lanjut dari pelayan tanpa halaman kami perlu memuat semula. 

Sekarang semacam sedikit teknik yang lebih maju yang kita akan bercakap kira-kira dalam video ini. Kita akan mempunyai beberapa interaksi. Tetapi apabila kita lakukan, saya akan menjadi membuat permintaan kepada pelayan web. Dalam kes ini, hanya apa yang menjalankan pelayan web Apache saya. Saya akan dapat membuat tambahan permintaan semasa saya melawat sebuah laman web, tetapi halaman saya tidak akan menyegarkan. 

Ia hanya akan asynchronously mengemas kini halaman saya. Dan itu, sebenarnya, AJAX yang bermaksud, adalah Asynchronous JavaScript dan XML. XML satu lagi jenis markup bahasa, dan anda boleh menyusun daripada memikirkan ia sama seperti HTML. Ia tidak cukup perkara yang sama, tetapi ia pada dasarnya hanya bahasa markup. Jadi ia tak segerak yang JavaScript dan bahasa markup. 

Jadi, untuk menggunakan ini AJAX technique-- AJAX bukan bahasa pengaturcaraan yang berasingan. Ia hanya semacam set kita techniques-- perlu membuat khas JavaScript objek, yang dipanggil XMLHttpRequest yang. Sekarang, ia sangat mudah untuk melakukan ini. Kami hanya mengatakan var, apa sahaja kita mahu untuk memanggil objek ini, sama XMLHttpRequest baru. Dan sekarang kita sekarang kalian menerima satu jenis AJAX objek, atau XMLHttpRequest yang objek, yang akan membolehkan kita asynchronously mengemas kini halaman kami. 

Selepas kita telah mendapat ini baru objek, XMLHttpRequest ini, kita perlu melakukan sesuatu untuk mereka tingkah laku onreadystatechange. Onreadystatechange tingkah laku adalah benar-benar hanya apabila anda membuat permintaan ke laman web, halaman akan melalui beberapa langkah. Pertama, permintaan yang belum dihantar. Kemudian, permintaan itu telah dihantar, tetapi tidak diambil tindakan. Maka permintaan itu telah diambil tindakan. Maka permintaan itu dihantar kembali kepada anda. 

Kemudian, permintaan itu dimuatkan sepenuhnya dalam halaman anda. Mereka adalah negeri-negeri yang berbeza. Dan dengan itu kita perlu menetapkan kami objek XMLHttpRequest baru berubah apabila perubahan keadaan bersedia. Dan biasanya, kita melakukan ini dengan mentakrifkan fungsi tanpa nama, yang kami biasa dengan dari JavaScript sekarang, yang dipanggil apabila perubahan keadaan bersedia. Ia benar-benar tidak lebih daripada itu. Kami hanya akan mentakrifkan fungsi tanpa nama, jenis suka apa yang kami lakukan dalam JavaScript, di mana kita akan mempunyai fungsi tanpa nama bertindak balas terhadap di klik, atau apabila kita telah melakukan Peta pelbagai objek dalam array. 

Sesuatu yang berlaku apabila sesuatu yang diklik. Dalam kes ini, ia hanya sesuatu yang berlaku apabila keadaan halaman kami perubahan. Terdapat dua ciri-ciri lain yang jenis daripada- mereka tidak satu-satunya harta yang wujud untuk XMLHttpRequest, tetapi mereka yang cukup penting. Ada sesuatu yang dinamakan readyState, yang seperti yang anda mungkin boleh meneka, adalah berkaitan dengan onreadystatechange. Ia sebenarnya memberitahu anda apa readyState itu. 0, 1, 2, 3, dan 4 adalah kemungkinan di sana, dan mereka bentuk secara kasar sesuai dengan apa yang Saya hanya bercakap mengenai kedua yang lalu. 

Dan kemudian status, yang mudah-mudahan jika semuanya berjalan OK, adalah 200, yang singkat untuk, sudah tentu, OK, yang kita sudah biasa dengan dari Http. Oleh itu, kita berharap bahawa kerajaan bersedia kami adalah empat, dan status kami adalah 200. Dan jika negeri bersedia kami adalah empat, dan tindak balas sedia untuk diletakkan di atas halaman, dan status adalah 200, kami dapat melakukan segala-galanya dengan jayanya, sekarang kita boleh asynchronously mengemas kini halaman kami tanpa perlu memuat semula kandungan keseluruhan daripadanya. 

Selepas kita telah jelas apa yang berlaku kepada tingkah laku onreadystatechange itu, dan kami telah diperiksa bahawa readyState adalah 4 dan status adalah 200, maka semua yang perlu kita lakukan ialah membuka tak segerak yang permintaan, yang hanya membuat yang Http umumnya DAPATKAN permintaan. Hanya melakukannya secara program, bukannya melalui pelayar web. Dan kemudian kita menghantar permintaan itu. Jadi apakah ini mungkin kelihatan seperti dalam konteks? Jadi di sini adalah fungsi yang memperkatakan permintaan AJAX. OKAY? Dan saya telah sewenang-wenangnya berkata ia menerima hujah. Dan ini satu bentuk yang rangka umum di sini. Pada awal-awal lagi, kita akan mendapat diri kita objek XMLHttpRequest baru. Kemudian, saya perlu menetapkan tingkah laku onreadystatechange. Dan jadi saya akan berkata apabila perubahan readyState, Saya mahu anda untuk memanggil fungsi ini. 

Yang akan meminta soalan, jika readyState ialah 4, jika readyState telah berubah menjadi 4, dan status adalah 200, jadi kami mempunyai permintaan yang berjaya, saya mahu melakukan sesuatu kepada halaman. Dan kita akan melihat dengan di satu contoh apa yang sesuatu yang mungkin dalam satu saat. Sebab itu, aku telah ditakrifkan fungsi tanpa nama saya, fungsi jawapan saya bila-bila masa perubahan readyState. 

Sebab itu saya hanya perlu membuka meminta, menggunakan kaedah Buka. Dan kemudian, saya menghantar permintaan itu. Dan mari kita lihat pada contoh yang lebih konkrit apa AJAX boleh lakukan pada laman web kami. Oleh itu, saya ada di sini yang sangat mudah Laman dipanggil home.html. Dan saya telah mendapat maklumat yang pergi di sini dan beberapa jenis menu drop-down. 

Dan kita akan melihat semula ini dalam satu saat. Tetapi saya fikir kita seharusnya mengambil melihat kod sumber yang sebenar. Dan sebagainya, saya akan membuka home.html. Dan kita akan melihat apa yang sedang berlaku. Jadi sehingga di bahagian paling atas di sini, saya mempunyai beberapa JavaScript barangan itu yang sedang berlaku. 

Dan di sini, saya nampaknya mempunyai div yang ID adalah infodiv, dan beberapa maklumat akan pergi ke sana. Dan kemudian saya mempunyai borang ini. Dan di dalam ini bentuk, ada yang dipanggil Pilih, yang hanya menu drop-down dengan sekumpulan pilihan yang berbeza. Dan nampaknya apabila yang berubah, apabila pilihan yang telah dipilih mempunyai berubah, saya akan memanggil fungsi beberapa cs50Info, dan kemudian saya akan lulus dalam this.value, di mana ini merujuk kepada opsyen telah dipilih, dan nilai adalah salah satu ini di sini, pilihan value = sama dengan kosong, "Blumberg," "bowden," "chan," dan "Malan." 

Jadi apa yang mungkin sebenarnya berlaku di sini apabila saya melakukan ini? Nah, mari kita melihat blumberg.html. Nampaknya ia hanya coretan beberapa Html. Dan sebenarnya, apa yang saya berharap yang akan berlaku di sini yang saya akan dapat plug Html ini terus ke dalam laman web saya tanpa perlu memuat semula halaman, bahawa apabila Saya memilih Hannah dari drop-down menu, maklumat tentang Hannah, khususnya, maklumat ini di sini di blumberg.html, adalah apa yang muncul pada halaman. Dan saya tidak perlu memuat semula. Dan jika saya memilih orang lain, maklumat mereka akan muncul. Bagaimana saya boleh melakukan ini? Sekali lagi, ini memerlukan kami menggunakan beberapa AJAX. Dan sebagainya, kami akan membuka ajax.js. Dan di sini adalah fungsi itu, cs50Info. Jika nama apa-apa, saya kembali. Saya tidak akan berbuat apa-apa jika pilihan yang kosong telah dipilih. Jika tidak, saya akan membuat XMLHttpRequest baru. Dan kemudian saya akan berkata, apabila perubahan readyState, panggilan fungsi ini. 

Dan jika readyState adalah 4 dan status adalah 200, di sini adalah sedikit jQuery pada baris 13. Tetapi semua yang saya lakukan mengatakan, menukar kandungan infodiv untuk menjadi apa sahaja saya kembali sebagai jawapan dari HttpRequest saya. 

Apakah HttpRequest saya? Well, betul di sini pada baris 18 dan 19. Line 18, saya pada dasarnya menyediakan GET permintaan untuk nama + .html. Dan sekali lagi, nama di sini adalah hujah bahawa adalah diluluskan pada sebagai parameter kepada cs50Info. 

Jadi, pada asasnya, saya lulus dalam seseorang itu nama, dengan menyatakan bahawa set pilihan yang kita lihat dalam menu juntai bawah dalam bentuk. Saya mendapat nama itu. Dan saya berkata saya mahu anda untuk sila dapatkan untuk saya file.html itu, dan kemudian menghantar permintaan itu. 

Dan sebagainya onreadystatechange yang akan menjadi mendengar dan menunggu dan menunggu dan menunggu, sehingga readyState adalah 4, dan status adalah 200. Jadi ia sedia untuk dihidangkan, dan permintaan itu telah berjaya. Dan kemudian jika ia adalah, ia akan menukar kandungan infodiv sebagai teks jawapan yang saya pulang. 

Jadi mari kita lihat bagaimana ini sebenarnya mungkin bekerja. Oleh itu, kita akan menuju ke pelayar saya tingkap, dan kita akan melihat di sini. Oleh itu, mari kita lihat pada apa yang sedang berlaku di sini di AJAX. Oleh itu, kita akan memilih seseorang dari menu drop-down. Jadi dalam kes ini, mari kita hanya memilih Hannah. Dan notis itu Hannah maklumat telah berubah, tetapi saya tidak mempunyai any-- saya halaman tidak sepenuhnya menambah nilai. Bahan yang tinggal. Kebanyakan barangan yang tinggal. AJAX Ujian tidak berubah. Butang itu sendiri, ini drop-down menu tidak berubah. Tetapi ada melakukan perubahan. Dan bergantung kepada bagaimana cepat bergerak komputer saya, anda sebenarnya mungkin melihat bahawa kandungan hilang dan kemudian muncul semula benar-benar dengan cepat. Itulah kandungan yang sedang dipadamkan daripada infodiv, dan kemudian digantikan dengan permintaan tak segerak baru. 

Jadi, jika saya hidupkan ia akan berkata, Rob-- dan sekali lagi, kita lihat, dan mungkin kita akan melihat ia sebenarnya hilang dan muncul semula dengan cepat. Anda melihat bahawa? Bagaimana ia hanya muncul dari sini, dan kemudian ia diisi semula? Itulah permintaan AJAX semacam berlaku. Dan sebagainya bergantung kepada orang yang saya pilih, saya membuat tak segerak yang berbeza permintaan untuk fail yang berbeza yang saya ada pada pelayan saya. Dan kandungan saya infodiv sedang mengemas kini, berdasarkan yang ini saya telah memilih. Jadi, itu benar-benar semua ada untuk AJAX. Ia membolehkan kita untuk membuat tak segerak ini pertanyaan, kemaskini kepada halaman. Tanpa perlu menyegarkan seluruh halaman, kita akan mendapatkan yang baru kandungan daripadanya dengan membuat permintaan yang baru kepada pelayan. Dan sebagainya, halaman kami boleh menjadi agak sedikit lebih dinamik. 

Dan seperti yang kita mendapatkan lebih banyak dan lebih maju, anda mungkin akan mendapat perkara-perkara seperti katakan, peti masuk e-mel, di mana anda tidak perlu melakukan apa-apa. Anda tidak perlu klik menu juntai bawah atau klik apa-apa, dan tiba-tiba, terbaru anda e-mel muncul di bahagian atas. Itu juga hanya satu permintaan Ajax. Ajax meminta anda pelayan, pelayan e-mel, menghantar ke atas semua maklumat yang mengenai e-mel terbaru anda, dan mengubah apa yang anda lihat di skrin untuk menjadi set terbaru anda e-mel. Dan jika anda mempunyai yang baru dalam di sana, maka kandungan div yang akan berubah sesuai kandungan dikemaskini. Saya Doug Lloyd. Ini adalah CS50.