Bina Aplikasi Web Ajax anda sendiri

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada pengelompokan teknologi longgar yang digunakan untuk menghasilkan kandungan web yang dinamik dan interaktif.

Istilah Ajax, yang pada asalnya dicipta oleh Jesse James Garrett dari Adaptive Path dalam eseinya Ajax: Pendekatan Baru untuk Aplikasi Web, adalah akronim untuk "Asynchronous JavaScript dan XML." Itulah sedikit, tetapi ia hanya menerangkan teknik yang menggunakan JavaScript untuk menyegarkan kandungan halaman dari pelayan web tanpa perlu memuatkan semula keseluruhan halaman. Ini berbeza dengan kaedah tradisional mengemas kini laman web, yang memerlukan penyemak imbas untuk menyegarkan seluruh halaman untuk memaparkan sebarang perubahan pada kandungan.

Teknik yang sama telah wujud dalam satu bentuk atau yang lain (sering dicapai dengan bantuan beberapa hacks pintar) untuk seketika. Tetapi peningkatan ketersediaan kelas XMLHTTPREQUEST dalam penyemak imbas, penggabungan Ajax yang menarik, dan kedatangan beberapa contoh berprofil tinggi seperti Peta Google, Gmail, ransel, dan Flickr, telah membenarkan aplikasi web yang sangat interaktif ini untuk mendapatkan daya tarikan dalam dunia pembangunan.

Oleh kerana istilah Ajax telah menjadi lebih meluas, takrifnya telah berkembang untuk merujuk lebih umum kepada aplikasi berasaskan pelayar yang berkelakuan lebih dinamik daripada aplikasi web sekolah lama. Tanaman baru aplikasi web Ajax ini menggunakan teknik interaksi yang lebih luas seperti teks edit-in-place, drag-and-drop, dan animasi CSS atau peralihan untuk mempengaruhi perubahan dalam antara muka pengguna. Tutorial ini akan menerangkan teknik -teknik tersebut, dan menunjukkan kepada anda bagaimana untuk membangunkan aplikasi web Ajax anda sendiri.

Tutorial ini adalah petikan dari buku baru saya,

Bina Aplikasi Web Ajax anda sendiri

. Dalam ketiga -tiga bab yang dibentangkan di sini, kami akan membincangkan asas -asas Ajax dan belajar bagaimana ia kutu, sebelum menyelidiki dunia yang indah XMLHTTPREQUEST. Selepas kami bermain -main dengannya, meneroka kerja dalamannya, membuat permintaan, dan mengemas kini halaman permohonan kami secara asynchronously, kami mula membangunkan aplikasi Ajax yang pertama kami. Ia akan menjadi perjalanan, jadi saya harap anda bersedia untuk beberapa pengembaraan! Jika anda lebih suka membaca bab -bab ini ke luar talian, muat turun versi .pdf dari mereka. Tetapi sekarang, mari kita dapatkan landasan yang kukuh di Ajax.

Bab 1. Ajax: Gambaran Keseluruhan

Dia melarikan diri, bodoh! Dispatch War Rocket Ajax! Untuk membawa kembali badannya!

- General Kala, Flash Gordon

Aplikasi Web AJAX Ajax boleh menjadi penyelesaian yang hebat untuk banyak projek pembangunan web - ia dapat memperkasakan aplikasi web untuk meningkatkan dan mengambil alih banyak tanah yang sebelum ini diduduki hampir secara eksklusif oleh aplikasi desktop.

Semua yang sama, penting untuk diingat bahawa Ajax bukan semacam debu dongeng sihir yang boleh anda taburkan pada aplikasi anda untuk menjadikannya keliut dan sejuk. Seperti mana-mana teknik pembangunan baru yang lain, Ajax tidak sukar untuk digunakan, dan satu-satunya perkara yang lebih buruk daripada aplikasi web sekolah lama yang dahsyat, stodgy, sekolah lama adalah aplikasi web Ajax yang mengerikan dan tidak baik.

Apabila anda memohon kepada bahagian yang betul dari aplikasi web anda, dengan cara yang betul, Ajax dapat meningkatkan pengalaman pengguna aplikasi anda dengan ketara. Ajax dapat meningkatkan interaktiviti dan kelajuan aplikasi anda, akhirnya menjadikan aplikasi itu lebih mudah, lebih menyeronokkan, dan lebih intuitif untuk digunakan.

Selalunya, aplikasi Ajax digambarkan sebagai "seperti aplikasi desktop dalam penyemak imbas." Ini adalah penerangan yang agak tepat-aplikasi web AJAX jauh lebih responsif daripada aplikasi web tradisional, lama, dan mereka dapat menyediakan tahap interaktiviti yang serupa dengan aplikasi desktop.

Tetapi aplikasi web AJAX masih merupakan aplikasi terpencil, dan berkelakuan berbeza dari aplikasi desktop yang mempunyai akses kepada storan tempatan. Sebahagian daripada tugas anda sebagai pemaju AJAX adalah untuk membuat aplikasi yang merasa responsif dan mudah digunakan walaupun komunikasi yang mesti berlaku di antara aplikasi dan pelayan yang jauh. Nasib baik, Ajax Toolbox memberi anda beberapa teknik yang sangat baik untuk mencapai persisnya.

hari -hari tua yang buruk

Salah satu tugas pembangunan web pertama yang bergerak melampaui melayani halaman HTML yang mudah dan statik adalah teknik membina halaman secara dinamik pada pelayan web menggunakan data dari kedai data back-end.

Kembali dalam "hari-hari lama yang buruk" pembangunan web, satu-satunya cara untuk membuat kandungan yang dinamik, yang didorong oleh pangkalan data ini adalah untuk membina seluruh halaman di sisi pelayan, menggunakan skrip CGI (kemungkinan ditulis dalam Perl), atau beberapa komponen pelayan yang dapat mentafsir bahasa skrip (seperti halaman pelayan aktif Microsoft). Malah satu perubahan ke halaman itu memerlukan perjalanan bulat dari penyemak imbas ke pelayan - hanya boleh kandungan baru dibentangkan kepada pengguna.

Pada masa itu, model biasa untuk antara muka pengguna aplikasi web adalah bentuk web yang pengguna akan mengisi dan mengemukakan kepada pelayan. Pelayan akan memproses borang yang dikemukakan, dan menghantar halaman yang baru kembali ke penyemak imbas untuk dipaparkan sebagai hasilnya. Jadi, sebagai contoh, penyempurnaan pelbagai "wizard" berasaskan web akan memerlukan pengguna untuk menghantar borang-dengan itu mendorong perjalanan bulat antara penyemak imbas dan pelayan-untuk setiap langkah.

Diberikan, ini adalah kemajuan besar di laman web statik, tetapi ia masih jauh dari menyampaikan pengalaman "aplikasi" yang benar kepada pengguna akhir.

prasejarah Ajax

pemaju web awal segera mula mencari helah untuk memperluaskan keupayaan model berasaskan bentuk mudah, ketika mereka berusaha untuk membuat aplikasi web yang lebih responsif dan interaktif. Hacks ini, sementara ad hoc dan mentah yang cukup, adalah langkah pertama pemaju web mengambil ke arah jenis interaktiviti yang kita lihat dalam aplikasi Ajax hari ini. Tetapi, sementara helah dan penyelesaian ini sering disediakan penyelesaian yang boleh digunakan, kerja, kod yang dihasilkan bukanlah penglihatan yang cantik.

Framesets bersarang

Satu cara untuk mendapatkan masalah untuk memuat semula keseluruhan halaman untuk memaparkan walaupun perubahan terkecil kepada kandungannya adalah hack yang mengerikan dari frameset bersarang dalam frameset lain, selalunya beberapa tahap mendalam. Teknik ini membolehkan pemaju untuk mengemas kini hanya kawasan terpilih skrin, dan juga meniru tingkah laku antara muka navigasi gaya tab di mana pengguna mengklik pada tab dalam satu bahagian skrin menukar kandungan di kawasan lain.

Teknik ini mengakibatkan kod yang mengerikan dan tidak dapat dipastikan dengan profusi halaman yang mempunyai nama -nama seperti PlorsionEditWizardMidDLElowerRight.asp.

iframe tersembunyi

Penambahan iframe dalam pelayar seperti Internet Explorer 4 membuat perkara kurang menyakitkan. Keupayaan untuk menyembunyikan iframe sepenuhnya membawa kepada perkembangan hack lain yang kemas: pemaju akan membuat permintaan HTTP ke pelayan menggunakan iframe tersembunyi, kemudian masukkan kandungan ke dalam halaman menggunakan JavaScript dan DHTML. Ini memberikan banyak fungsi yang sama yang tersedia melalui Ajax moden, termasuk keupayaan untuk menghantar data dari borang tanpa memuatkan semula halaman - satu prestasi yang dicapai dengan mempunyai borang yang diserahkan kepada iframe tersembunyi. Hasilnya dikembalikan oleh pelayan ke iframe, di mana javascript halaman dapat mengaksesnya.

Kelemahan besar pendekatan ini (di luar fakta bahawa ia adalah, selepas semua, hack) adalah beban yang menjengkelkan untuk lulus data bolak -balik antara dokumen utama dan dokumen dalam iframe.

skrip jauh

Satu lagi teknik seperti Ajax awal, biasanya disebut sebagai skrip jauh, melibatkan menetapkan atribut SRC dari tag untuk memuatkan halaman yang mengandungi JavaScript yang dihasilkan secara dinamik.

Ini mempunyai kelebihan menjadi lebih bersih daripada hack iframe yang tersembunyi, kerana JavaScript yang dihasilkan di pelayan akan dimuat ke dalam dokumen utama. Walau bagaimanapun, hanya permintaan GET mudah yang mungkin menggunakan teknik ini.

apa yang menjadikan Ajax sejuk

Inilah sebabnya pembangunan Ajax adalah satu lonjakan yang sangat besar untuk pembangunan web: bukannya perlu menghantar segala -galanya ke pelayan dalam satu jisim yang besar, kemudian tunggu pelayan untuk menghantar semula halaman baru untuk rendering, pemaju web boleh berkomunikasi dengan pelayan di bahagian -bahagian yang lebih kecil, dan secara selektif mengemas kini kawasan tertentu dari halaman berdasarkan respons pelayan kepada permintaan tersebut. Di sinilah perkataan tidak segerak dalam akronim Ajax berasal.

Mungkin paling mudah untuk memahami idea sistem asynchronous dengan mempertimbangkan sebaliknya - sistem segerak. Dalam sistem segerak, semuanya berlaku dengan teratur. Sekiranya perlumbaan kereta adalah sistem segerak, ia akan menjadi urusan yang sangat membosankan. Kereta yang bermula pertama di grid akan menjadi yang pertama di seluruh garisan penamat, diikuti oleh kereta yang bermula kedua, dan sebagainya. Tidak akan ada yang memotong, dan jika sebuah kereta rosak, lalu lintas di belakang akan dipaksa untuk berhenti dan menunggu sementara mekanik membuat pembaikan mereka.

Aplikasi web tradisional Gunakan sistem segerak: Anda mesti menunggu pelayan menghantar halaman pertama sistem sebelum anda boleh meminta halaman kedua, seperti yang ditunjukkan dalam Rajah 1.1.

Rajah 1.1. Aplikasi web tradisional adalah sistem segerak

Perlumbaan kereta tak segerak akan menjadi lebih menarik. Kereta di kedudukan tiang boleh dikalahkan di sudut pertama, dan kereta yang bermula dari belakang grid dapat menenun jalannya melalui lapangan dan menyeberangi garisan penamat di tempat ketiga. Permintaan HTTP dari penyemak imbas dalam aplikasi Ajax berfungsi dengan cara ini. Keupayaan ini untuk membuat banyak permintaan kecil ke pelayan pada basis keperluan yang menjadikan pembangunan Ajax begitu sejuk. Rajah 1.2 menunjukkan aplikasi AJAX membuat permintaan tak segerak ke pelayan web.

Rajah 1.2. Aplikasi web Ajax adalah sistem asynchronous
Hasil akhir adalah aplikasi yang terasa lebih responsif, kerana pengguna menghabiskan masa yang jauh lebih sedikit menunggu permintaan untuk diproses, dan tidak perlu menunggu seluruh laman web baru untuk mencari wayar, dan diberikan oleh penyemak imbas mereka, sebelum mereka dapat melihat hasilnya.

Ajax Technologies

Teknologi yang digunakan untuk membina aplikasi web AJAX merangkumi beberapa domain pengaturcaraan yang berbeza, jadi pembangunan Ajax tidak semudah pembangunan aplikasi biasa, atau semudah pembangunan web sekolah lama.

Sebaliknya, hakikat bahawa pembangunan Ajax merangkumi begitu banyak teknologi yang berbeza menjadikannya lebih menarik dan menyeronokkan. Berikut adalah penyenaraian ringkas teknologi yang bekerjasama untuk membuat aplikasi web Ajax:

xml

w3c dom

• CSS
• xmlhttprequest
• JavaScript
melalui seluruh bab ini, kami akan memenuhi setiap teknologi ini dan membincangkan peranan yang mereka mainkan dalam aplikasi web Ajax.

pertukaran data dan markup: xml

XML (XML bermaksud Bahasa Markup Extensible - bukan sesiapa yang menyebutnya bahawa di luar buku teks.) Adalah di mana Ajax mendapat suratnya "X." Ini bernasib baik, kerana akronim teknologi secara automatik dilihat sebagai lebih sejuk jika mereka mengandungi huruf "X." (Ya, saya bercanda!)

Exchange Data Lingua Franca

XML sering berfungsi sebagai format data utama yang digunakan dalam permintaan HTTP tak segerak yang berkomunikasi antara penyemak imbas dan pelayan dalam aplikasi AJAX. Peranan ini memainkan kekuatan XML sebagai format pertukaran data yang neutral dan agak mudah, dan juga bermakna ia agak mudah untuk digunakan semula atau memformat kandungan jika keperluan timbul.

Terdapat banyak cara lain untuk memformat data anda untuk pertukaran mudah antara penyemak imbas dan pelayan (seperti CSV (nilai dipisahkan koma), JSON (JavaScript Object Notation), atau hanya teks biasa), tetapi XML adalah salah satu yang paling biasa.

xml sebagai markup

Laman web dalam aplikasi Ajax terdiri daripada markup XHTML, yang sebenarnya hanya rasa XML. XHTML, sebagai pengganti kepada HTML, sangat serupa dengannya. Ia mudah dijemput oleh mana-mana pemaju yang biasa dengan HTML sekolah lama, namun ia mempunyai semua manfaat XML yang sah. Terdapat banyak kelebihan untuk menggunakan XHTML:

Ia menawarkan banyak alat standard dan perpustakaan skrip untuk melihat, mengedit, dan mengesahkan XML.

• Ia bersesuaian dengan penyemak imbas yang baru, XML yang serasi.
• Ia berfungsi dengan sama ada model objek dokumen HTML (DOM) atau XML DOM.
• Ia lebih mudah ditarik balik untuk dilihat dalam ejen bukan penyemak imbas.
Beberapa orang yang lebih pedantic dalam komuniti pembangunan menegaskan bahawa orang tidak boleh menggunakan XHTML. Mereka percaya dengan sangat kuat bahawa XHTML, kerana ia adalah XML yang sebenarnya, tidak boleh digunakan sama sekali kecuali ia dapat disampaikan dengan pengepala kandungan HTTP yang tepat pada masa ini. (Internet Explorer 6 dan 7 tidak menyokongnya sama sekali.)

Dalam praktiknya, anda boleh melayani XHTML kepada penyemak imbas dengan jenis kandungan teks/HTML, kerana semua pelayar arus perdana menjadikan semua dokumen XHTML berfungsi sebagai teks/HTML. Walaupun penyemak imbas akan merawat kod anda sebagai HTML lama biasa, program lain masih boleh menafsirkannya sebagai XML, jadi tidak ada alasan praktikal untuk tidak "membuktikan masa depan" markup anda dengan menggunakannya.

Jika anda tidak bersetuju dengan saya, anda boleh memilih untuk membangunkan menggunakan standard HTML 4.01 yang lebih tua. Ini masih merupakan standard web yang berdaya maju, dan merupakan pilihan yang sangat sah untuk membuat dalam membangunkan aplikasi web anda.

xhtml dan buku ini

Kebanyakan contoh kod dalam buku ini akan menggunakan XHTML 1.0 ketat. Unsur iframe tidak tersedia dengan ketat, jadi beberapa contoh kod yang kami tunjukkan menggunakan iframe akan menjadi xhtml 1.0 peralihan.

Konsortium Web Web Wide mengekalkan FAQ mengenai perbezaan antara HTML dan XHTML.

model objek dokumen W3C

Model Objek Dokumen (DOM) adalah perwakilan berorientasikan objek dokumen XML dan HTML, dan menyediakan API untuk mengubah kandungan, struktur, dan gaya dokumen tersebut.

Pada mulanya, pelayar khusus seperti Netscape Navigator dan Internet Explorer menyediakan cara yang berbeza, proprietari untuk memanipulasi dokumen HTML menggunakan JavaScript. DOM timbul dari usaha oleh Konsortium Web Web Wide (W3C) untuk menyediakan cara platform dan pelayar-neutral untuk mencapai tugas yang sama.

DOM mewakili struktur dokumen XML atau HTML sebagai hierarki objek, yang sesuai untuk parsing oleh alat XML standard.

kaedah manipulasi dom

JavaScript menyediakan API yang besar untuk menangani struktur DOM ini, dari segi parsing dan memanipulasi dokumen. Ini adalah salah satu cara utama untuk mencapai perubahan yang lebih kecil, sekeping demi kepingan ke laman web yang kita lihat dalam aplikasi Ajax. (Kaedah lain adalah untuk mengubah sifat innerHTML elemen. Kaedah ini tidak didokumentasikan dengan baik dalam mana -mana piawai, walaupun ia disokong secara meluas oleh pelayar arus perdana.)

peristiwa dom

Fungsi penting lain DOM ialah ia menyediakan cara standard untuk JavaScript untuk melampirkan acara ke unsur -unsur di laman web. Ini menjadikan kemungkinan antara muka pengguna yang lebih kaya, kerana ia membolehkan anda memberi peluang kepada pengguna untuk berinteraksi dengan halaman di luar pautan mudah dan elemen bentuk.

Contoh hebat ini adalah fungsi drag-and-drop, yang membolehkan pengguna menyeret kepingan halaman di sekitar skrin, dan menjatuhkannya ke tempat untuk mencetuskan kepingan fungsi tertentu. Ciri semacam ini hanya wujud dalam aplikasi desktop, tetapi sekarang ia berfungsi juga dalam penyemak imbas, terima kasih kepada Dom.

Persembahan: CSS

CSS (Lembaran Gaya Cascading) menyediakan kaedah bersatu untuk mengawal penampilan elemen antara muka pengguna dalam aplikasi web anda. Anda boleh menggunakan CSS untuk mengubah hampir semua aspek cara halaman kelihatan, dari saiz fon, warna, dan jarak, ke kedudukan unsur.

Dalam aplikasi AJAX, satu penggunaan CSS yang sangat baik adalah untuk memberikan maklum balas antara muka pengguna (dengan animasi dan peralihan yang didorong oleh CSS), atau untuk menunjukkan bahagian halaman yang dapat diintervasi oleh pengguna (dengan perubahan warna atau penampilan yang dicetuskan, misalnya, oleh Mouseover). Sebagai contoh, anda boleh menggunakan peralihan CSS untuk menunjukkan bahawa sebahagian daripada aplikasi anda sedang menunggu permintaan HTTP yang diproses pada pelayan.

angka manipulasi CSS sangat banyak dalam definisi yang lebih luas istilah Ajax-dalam pelbagai peralihan dan kesan visual, serta dalam fungsi drag-and-drop dan edit-in-place.

Komunikasi: xmlhttprequest

xmlhttprequest, kelas JavaScript dengan antara muka yang sangat mudah digunakan, menghantar dan menerima permintaan dan respons HTTP kepada dan dari pelayan web. Kelas XMLHTTPREQUEST adalah apa yang menjadikan pembangunan aplikasi Ajax benar mungkin. Permintaan HTTP yang dibuat dengan kerja XMLHTTPREQUEST seolah -olah pelayar membuat permintaan normal untuk memuatkan halaman atau mengemukakan borang, tetapi tanpa pengguna harus meninggalkan halaman web yang dimuatkan sekarang.

Microsoft pertama kali melaksanakan XMLHTTPREQUEST di Internet Explorer 5 untuk Windows sebagai objek ActiveX. Projek Mozilla menyediakan versi JavaScript-asli dengan API yang serasi dalam pelayar Mozilla, bermula pada versi 1.0. (Ia juga boleh didapati di Firefox, tentu saja.) Apple telah menambah XmlhttPrequest kepada Safari sejak versi 1.2.

Respons dari pelayan - sama ada dokumen XML atau rentetan teks - boleh diserahkan kepada JavaScript untuk menggunakan tetapi pemaju melihat sesuai - selalunya untuk mengemas kini beberapa antara muka pengguna aplikasi web.

meletakkan semuanya bersama: JavaScript

JavaScript adalah gam yang memegang aplikasi Ajax anda bersama -sama. Ia melaksanakan pelbagai peranan dalam pembangunan Ajax:

Mengawal permintaan HTTP yang dibuat menggunakan xmlhttprequest

• Mengurangkan hasil yang kembali dari pelayan, menggunakan kaedah manipulasi DOM, XSLT, atau kaedah tersuai, bergantung pada format pertukaran data yang digunakan
• Membentangkan data yang dihasilkan dalam antara muka pengguna, sama ada dengan menggunakan kaedah manipulasi DOM untuk memasukkan kandungan ke dalam laman web, dengan mengemas kini harta InnerHTML elemen, atau dengan menukar sifat CSS elemen
kerana sejarah penggunaannya yang panjang dalam pengaturcaraan web ringan (dan di tangan pengaturcara yang tidak berpengalaman), JavaScript belum dilihat oleh banyak pemaju aplikasi tradisional sebagai "bahasa pengaturcaraan yang serius," walaupun pada hakikat

Kesilapan JavaScript sebagai "bahasa mainan" kini berubah dengan cepat sebagai teknik pembangunan Ajax mengembangkan kuasa dan fungsi aplikasi berasaskan pelayar. Hasil daripada kedatangan Ajax, JavaScript kini seolah -olah mengalami sesuatu kebangkitan, dan pertumbuhan letupan dalam bilangan toolkit dan perpustakaan JavaScript yang tersedia untuk pembangunan Ajax adalah bukti fakta.

Ringkasan

Dalam bab ini, kami mempunyai gambaran ringkas tentang Ajax dan teknologi yang menjadikannya tanda. Kami melihat beberapa kontemporari pengekodan yang mengerikan yang pemaju terpaksa bertahan kembali pada hari -hari tua yang buruk untuk mewujudkan sesuatu yang menyerupai UI interaktif, dan kami melihat bagaimana Ajax menawarkan peningkatan yang besar terhadap pendekatan tersebut. Dengan arahan yang baik dari blok bangunan Ajax - XML, DOM, CSS, XMLHTTPREQUEST, dan JavaScript, yang mengikat mereka bersama -sama - anda mempunyai semua yang anda perlukan untuk mula membina tapak Ajax yang dinamik dan boleh diakses.

Bab 2. Asas XMLHTTPREQUEST

Saya tidak sabar untuk berkongsi keajaiban baru ini, rakyat akan melihat cahaya, biarkan mereka semua membuat muzik mereka sendiri, para imam memuji nama saya pada malam ini.

- Rush, Discovery

Ia adalah xmlhttprequest yang memberikan Ajax kuasa sebenarnya: keupayaan untuk membuat permintaan HTTP tak segerak dari penyemak imbas dan tarik kandungan dalam ketulan kecil.

pemaju web telah menggunakan helah dan hacks untuk mencapai matlamat ini untuk masa yang lama, sementara menderita batasan yang menjengkelkan: hack iframe yang tidak dapat dilihat memaksa kami untuk lulus data bolak -balik antara dokumen induk dan dokumen dalam iframe, dan juga kaedah "scripting jauh" adalah terhad untuk membuat permintaan yang mengandungi JavaScript.

Teknik Ajax moden, yang menggunakan XMLHTTPREQUEST, memberikan peningkatan yang besar ke atas kaedah kludgy ini, yang membolehkan aplikasi anda membuat kedua -dua mendapatkan permintaan dan pos tanpa memuat semula halaman.

Dalam bab ini, kami akan melompat masuk dan membina aplikasi Web Ajax yang mudah-aplikasi pemantauan tapak yang mudah yang membuang halaman pada pelayan web ke jadual waktu. Tetapi sebelum kita mula membuat permintaan HTTP yang tidak segerak untuk mengundi pelayan, kita perlu memudahkan penggunaan kelas XMLHTTPREQUEST dengan menjaga semua ketidakserasian pelayar kecil, seperti cara yang berbeza xmlhttprequest objek instantiated, di dalam satu, di dalam satu objek yang boleh digunakan semula.

perpustakaan ajax mudah

Satu pendekatan untuk mempermudahkan penggunaan kelas XMLHTTPREQUEST adalah menggunakan pustaka kod yang sedia ada. Terima kasih kepada peningkatan populariti pembangunan Ajax, terdapat puluhan perpustakaan, toolkit, dan kerangka yang tersedia yang menjadikan XMLHTTPREQUEST lebih mudah digunakan.

Tetapi, sebagai kod untuk membuat contoh kelas XMLHTTPREQUEST agak mudah, dan API untuk menggunakannya mudah difahami, kami hanya akan menulis perpustakaan JavaScript yang sangat mudah yang menjaga perkara asas yang kami perlukan.

Melangkah melalui proses membuat perpustakaan anda sendiri akan memastikan anda mengetahui bagaimana kelas XMLHTTPREQUEST berfungsi, dan akan membantu anda mendapatkan lebih banyak daripada alat atau perpustakaan lain apabila anda memutuskan untuk menggunakannya.

Memulakan Kelas Ajax kami

kita akan bermula dengan membuat kelas asas, yang dipanggil Ajax, di mana kita akan membungkus fungsi kelas XMLHTTPREQUEST.

Saya tidak pernah melakukan pengaturcaraan berorientasikan objek dalam JavaScript - Bantuan!

Dalam bahagian ini, kita akan mula membuat kelas dan objek dalam JavaScript. Jika anda tidak pernah melakukan ini sebelum ini, jangan risau - ia agak mudah selagi anda tahu asas -asas pengaturcaraan berorientasikan objek.

Dalam JavaScript, kami tidak mengisytiharkan kelas dengan sintaks kompleks seperti yang kami lakukan di Java, C atau salah satu bahasa .NET; Kami hanya menulis fungsi pembina untuk membuat contoh kelas. Yang perlu kita lakukan ialah:

Menyediakan fungsi pembina - Nama fungsi ini adalah nama kelas anda
Tambah sifat ke objek yang sedang dibina menggunakan kata kunci ini, diikuti dengan tempoh dan nama harta
Tambah kaedah ke objek dengan cara yang sama kami akan menambah sifat, menggunakan sintaks pembina fungsi khas JavaScript

inilah kod yang mencipta kelas mudah yang dipanggil Helloworld:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Rangka Kerja JavaScript untuk Pengaturcaraan Berorientasikan Objek sangat ringan, tetapi berfungsi dengan baik apabila anda mendapat gantungnya. Ciri -ciri berorientasikan objek yang lebih maju, seperti warisan dan polimorfisme, tidak terdapat dalam JavaScript, tetapi ciri -ciri ini jarang diperlukan di sisi klien dalam aplikasi AJAX. Logik perniagaan yang kompleks yang mana ciri -ciri ini berguna harus sentiasa berada di pelayan web, dan diakses menggunakan kelas XMLHTTPREQUEST.

Dalam contoh ini, kami membuat kelas yang dipanggil Helloworld dengan satu harta (mesej) dan satu kaedah (SayMessage). Untuk menggunakan kelas ini, kami hanya memanggil fungsi pembina, seperti yang ditunjukkan di bawah:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

di sini, kami membuat contoh Helloworld (dipanggil HW), kemudian gunakan objek ini untuk memaparkan dua mesej. Kali pertama kita panggil Saymessage, lalai "Hello, World!" mesej dipaparkan. Kemudian, selepas menukar harta mesej objek kami untuk "selamat tinggal," kami panggil SayMessage dan "Goodbye" dipaparkan.

Jangan risau jika ini tidak terlalu masuk akal pada masa ini. Ketika kami maju melalui bangunan kelas Ajax kami, ia akan menjadi lebih jelas.

Berikut adalah permulaan fungsi pembina kelas Ajax kami:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Kod ini hanya mentakrifkan sifat yang kita perlukan dalam kelas Ajax kami untuk bekerja dengan objek XMLHTTPREQUEST. Sekarang, mari tambahkan beberapa kaedah ke objek kami. Kami memerlukan beberapa fungsi yang akan menubuhkan objek XMLHTTPREQUEST dan menceritakan bagaimana membuat permintaan untuk kami.

Mewujudkan objek XMLHTTPREQUEST

Pertama, kami akan menambah kaedah init, yang akan membuat objek XMLHTTPREQUEST untuk kami. Malangnya, XMLHTTPREQUEST dilaksanakan sedikit berbeza di Firefox (dalam buku ini, apabila saya menerangkan bagaimana sesuatu berfungsi di Firefox, saya merujuk kepada semua pelayar yang berasaskan Mozilla, termasuk Firefox, Mozilla, Camino, dan Seamonkey) Pembangunan Ajax pada masa akan datang), jadi anda perlu cuba meneliti objek dalam beberapa cara yang berbeza jika anda tidak mensasarkan penyemak imbas tertentu. Firefox dan Safari membuat objek XMLHTTPREQUEST menggunakan kelas yang dipanggil XMLHTTPREQUEST, manakala Internet Explorer versi 6 dan lebih awal menggunakan kelas khas yang dipanggil ActiveXObject yang dibina ke dalam enjin skrip Microsoft. Walaupun kelas ini mempunyai pembina yang berbeza, mereka berkelakuan dengan cara yang sama.

kod cross-browser

Untungnya, penyemak imbas yang paling moden (Internet Explorer 6, Firefox 1.0, Safari 1.2, dan Opera 8, atau versi yang lebih baru dari mana-mana pelayar ini) mematuhi piawaian web secara keseluruhannya dengan baik, jadi anda tidak perlu melakukan banyak cawangan khusus penyemak imbas dalam kod AJAX anda.

Ini biasanya membuat aplikasi Ajax berasaskan pelayar lebih cepat untuk membangun dan menggunakan platform silang daripada aplikasi desktop. Memandangkan kuasa dan keupayaan yang tersedia untuk peningkatan aplikasi AJAX, aplikasi desktop menawarkan kelebihan yang lebih sedikit dari perspektif antara muka pengguna.

kaedah init kelihatan seperti ini:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kaedah init melalui setiap cara yang mungkin untuk membuat objek XMLHTTPREQUEST sehingga ia menghasilkan satu dengan jayanya. Objek ini kemudian dikembalikan ke fungsi panggilan.

merendahkan anggun

Mengekalkan keserasian dengan penyemak imbas yang lebih tua (dengan "lebih tua" saya maksudkan apa -apa yang lebih tua daripada "pelayar moden" yang saya nyatakan dalam nota sebelumnya) memerlukan banyak kerja kod tambahan, jadi penting untuk menentukan pelayar yang mana permohonan anda harus menyokong.

Jika anda tahu permohonan anda akan menerima trafik yang signifikan melalui pelayar yang lebih tua yang tidak menyokong kelas XMLHTMLRequest (mis., Internet Explorer 4 dan lebih awal, Netscape 4 dan lebih awal), anda perlu sama ada untuk meninggalkannya sepenuhnya, atau menulis kod anda supaya ia merendahkan dengan anggun. Ini bermakna bahawa bukannya membenarkan fungsi anda hanya hilang dalam penyemak imbas yang kurang berkemampuan, anda kod untuk memastikan pengguna pelayar tersebut menerima sesuatu yang bersamaan dengan fungsional, walaupun mungkin dalam format yang kurang interaktif atau mudah digunakan.

Ia juga mungkin bahawa laman web anda akan menarik pengguna yang melayari dengan JavaScript dilumpuhkan. Jika anda ingin memenuhi keperluan pengguna ini, anda harus menyediakan alternatif, antara muka sekolah lama secara lalai, yang kemudiannya boleh mengubah suai secara on-the-fly-menggunakan JavaScript-untuk pelayar moden.

Menghantar permintaan

Kami kini mempunyai kaedah yang mencipta XMLHTTPREQUEST. Oleh itu mari kita tulis fungsi yang menggunakannya untuk membuat permintaan. Kami memulakan kaedah DOREQ seperti ini:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Bahagian pertama DOREQ Panggilan init untuk membuat contoh kelas XMLHTTPREQUEST, dan memaparkan amaran cepat jika ia tidak berjaya.

menyediakan permintaan

Seterusnya, kod kami memanggil kaedah terbuka pada ini.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Kaedah terbuka mengambil tiga parameter:

1. Kaedah - Parameter ini mengenal pasti jenis kaedah permintaan HTTP yang akan kami gunakan. Kaedah yang paling biasa digunakan adalah mendapatkan dan pos.

Kaedah

adalah sensitif kes

Menurut spesifikasi HTTP (RFC 2616), nama-nama kaedah permintaan ini sensitif kes. Dan kerana kaedah yang diterangkan dalam spec ditakrifkan sebagai semua huruf besar, anda harus selalu memastikan anda menaip kaedah dalam semua huruf besar.

2. URL - Parameter ini mengenal pasti halaman yang diminta (atau diposkan jika kaedah itu diposkan).

Crossing Domains

Tetapan keselamatan penyemak imbas biasa tidak akan membolehkan anda menghantar permintaan HTTP ke domain lain. Sebagai contoh, halaman yang disampaikan dari ajax.net tidak akan dapat menghantar permintaan ke remotescripting.com melainkan jika pengguna telah membenarkan permintaan tersebut.

3. Bendera Asynchronous - Jika parameter ini ditetapkan untuk benar, JavaScript anda akan terus melaksanakan secara normal sambil menunggu tindak balas terhadap permintaan. Oleh kerana keadaan permintaan berubah, peristiwa dipecat supaya anda dapat menangani keadaan yang berubah dari permintaan.

Jika anda menetapkan parameter kepada palsu, pelaksanaan JavaScript akan berhenti sehingga respons datang dari pelayan. Pendekatan ini mempunyai kelebihan menjadi sedikit lebih mudah daripada menggunakan fungsi panggil balik, kerana anda boleh mula berurusan dengan respons lurus selepas anda menghantar permintaan dalam kod anda, tetapi kelemahan besar adalah bahawa kod anda berhenti sementara permintaan dihantar dan diproses pada pelayan, dan respons diterima. Oleh kerana keupayaan untuk berkomunikasi dengan pelayan secara tidak segerak adalah keseluruhan titik aplikasi Ajax, ini harus ditetapkan kepada benar.

Dalam kelas Ajax kami, kaedah dan sifat async diasaskan kepada mungkir yang munasabah (mendapatkan dan benar), tetapi anda akan sentiasa menetapkan URL sasaran, tentu saja.

menyediakan pengendali acara onreadystatechange

Sebagai permintaan HTTP diproses pada pelayan, kemajuannya ditunjukkan oleh perubahan kepada harta ReadyState. Harta ini adalah integer yang mewakili salah satu negeri berikut, yang disenaraikan dari permulaan permintaan hingga selesai:

• 0: Uninitialized - Terbuka belum dipanggil.
• 1: memuatkan - hantar belum dipanggil.
• 2: dimuatkan - hantar telah dipanggil, tetapi respons belum tersedia.
• 3: Interaktif - Respons dimuat turun, dan harta responsetext memegang data separa.
• 4: Selesai - Sambutan telah dimuatkan dan permintaan selesai.

Objek XMLHTTPREQUEST memberitahu anda tentang setiap perubahan dalam keadaan dengan menembak acara ReadyStateChange. Dalam pengendali untuk acara ini, periksa siap sedia permintaan itu, dan apabila permintaan selesai (iaitu, apabila siap sedia berubah menjadi 4), anda boleh mengendalikan respons pelayan.

garis besar asas untuk kod Ajax kami akan kelihatan seperti ini:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kami akan membincangkan bagaimana untuk "melakukan perkara untuk mengendalikan tindak balas" hanya sedikit. Buat masa ini, ingatlah bahawa anda perlu menyediakan pengendali acara ini sebelum permintaan dihantar.

Menghantar permintaan

Gunakan kaedah hantar kelas XMLHTTPREQUEST untuk memulakan permintaan HTTP, seperti SO:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Kaedah Hantar mengambil satu parameter, yang digunakan untuk data pos. Apabila permintaan itu mudah mendapat apa -apa data ke pelayan, seperti permintaan semasa kami, kami menetapkan parameter ini untuk batal.

kehilangan skop dan ini

Anda mungkin perasan bahawa OnreadyStateChange termasuk tugasan pembolehubah yang pelik:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Pembolehubah baru ini, diri sendiri, adalah penyelesaian kepada masalah yang disebut "kehilangan skop" yang sering dialami oleh pemaju JavaScript menggunakan pengendali acara tak segerak. Pengendali acara asynchronous biasanya digunakan bersempena dengan XMLHTTPREQUEST, dan dengan fungsi seperti setTimeout atau setInterval.

Kata kunci ini digunakan sebagai tersendiri dalam kod JavaScript yang berorientasikan objek untuk merujuk kepada "objek semasa." Berikut adalah contoh cepat - kelas yang dipanggil Scopetest:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Kod ini akan membuat contoh kelas Scopetest, kemudian panggil kaedah Dotest Objek, yang akan memaparkan mesej "Salam dari Scopetest!" Mudah, betul?

Sekarang, mari tambahkan beberapa kod XMLHTTPREQUEST mudah ke kelas ScopeTest kami. Kami akan menghantar permintaan mudah untuk halaman rumah pelayan web anda, dan, apabila respons diterima, kami akan memaparkan kandungan kedua -dua ini.

Jadi, mesej apa yang dipaparkan? Jawapannya diturunkan dalam Rajah 2.1.

Example 2.3. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
};

kita dapat melihat bahawa diri.

Menggunakan kata kunci Ini adalah cara yang mudah untuk merujuk kepada "objek yang melaksanakan kod ini." Tetapi ini mempunyai satu masalah kecil - makna berubah apabila ia dipanggil dari luar objek. Inilah hasil dari sesuatu yang dipanggil konteks pelaksanaan. Semua kod di dalam objek berjalan dalam konteks pelaksanaan yang sama, tetapi kod yang dijalankan dari objek lain - seperti pengendali acara - berjalan dalam konteks pelaksanaan objek panggilan. Apa ini bermakna bahawa, apabila anda menulis JavaScript berorientasikan objek, anda tidak akan dapat menggunakan kata kunci ini untuk merujuk kepada objek dalam kod untuk pengendali acara (seperti OnreadyStateChange di atas). Masalah ini dipanggil kehilangan skop.

Jika konsep ini tidak 100% jelas kepada anda, jangan terlalu risau. Kami akan melihat demonstrasi sebenar masalah ini dalam bab seterusnya. Sementara itu, sememangnya perlu diingat bahawa jika anda melihat pembolehubah diri dalam contoh kod, ia telah dimasukkan untuk menangani masalah kehilangan-skop.

Rajah 2.1. Mesej yang dipaparkan oleh kelas scopetest

memproses tindak balas

Sekarang kami bersedia menulis beberapa kod untuk mengendalikan respons pelayan kepada permintaan HTTP kami. Ingat komen "Adakah perkara untuk mengendalikan respons" yang kami tinggalkan dalam pengendali acara OnreadyStateChange? Kami akan, sudah tiba masanya kami menulis beberapa kod untuk melakukan perkara itu! Fungsi ini perlu melakukan tiga perkara:

mengetahui jika tindak balas adalah ralat atau tidak.

Sediakan respons dalam format yang dikehendaki.

1. lulus respons kepada fungsi pengendali yang dikehendaki.


2. Sertakan kod di bawah dalam fungsi dalaman kelas Ajax kami:


3. Apabila respons selesai, kod yang menunjukkan sama ada atau tidak permintaan yang berjaya dikembalikan dalam harta status objek XMLHTTPREQUEST kami. Harta status mengandungi kod status HTTP permintaan yang lengkap. Ini boleh menjadi kod 404 jika halaman yang diminta hilang, 500 jika ralat berlaku dalam skrip sisi pelayan, 200 jika permintaan itu berjaya, dan sebagainya. Senarai penuh kod ini disediakan dalam spesifikasi HTTP (RFC 2616).

tidak baik dengan nombor?

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Jika anda menghadapi masalah mengingati kod, jangan risau: Anda boleh menggunakan harta Statustext, yang mengandungi mesej ringkas yang memberitahu anda sedikit lebih terperinci mengenai ralat (mis., "Tidak dijumpai," "Ralat Pelayan Dalaman," "OK").

Kelas Ajax kami akan dapat memberikan respons dari pelayan dalam tiga format yang berbeza: sebagai rentetan JavaScript biasa, sebagai objek dokumen XML yang boleh diakses melalui W3C XML DOM, dan sebagai objek XMLHTTPREQUEST yang sebenarnya digunakan untuk membuat permintaan. Ini dikawal oleh harta ResponsFormat Kelas Ajax, yang boleh ditetapkan ke teks, XML atau Objek.

Kandungan respons boleh diakses melalui dua sifat objek XMLHTTPREQUEST kami:

ResponseText - Harta ini mengandungi respons dari pelayan sebagai rentetan biasa. Dalam kes ralat, ia akan mengandungi halaman ralat pelayan web HTML. Selagi respons dikembalikan (iaitu, Readystate menjadi 4), harta ini akan mengandungi data, walaupun mungkin bukan apa yang anda harapkan.
Responsexml - Harta ini mengandungi objek dokumen XML. Sekiranya respons bukan XML, harta ini akan kosong.

Kelas Ajax kami memulakan harta ResponsFormatnya ke teks, jadi secara lalai, pengendali respons anda akan diluluskan kandungan dari pelayan sebagai rentetan JavaScript. Jika anda bekerja dengan kandungan XML, anda boleh menukar harta ResponseFormat ke XML, yang akan mengeluarkan objek dokumen XML sebaliknya.

Terdapat satu lagi pilihan yang boleh anda gunakan jika anda ingin benar -benar mewah: anda boleh mengembalikan objek XMLHTTPREQUEST sebenar kepada fungsi pengendali anda. Ini memberi anda akses langsung kepada perkara -perkara seperti status dan sifat statustext, dan mungkin berguna dalam kes -kes di mana anda ingin merawat kelas -kelas tertentu yang berbeza - contohnya, melengkapkan pembalakan tambahan dalam kes 404 kesilapan.

menetapkan jenis kandungan yang betul

Pelaksanaan XMLHTTPREQUEST dalam semua pelayar utama memerlukan jenis kandungan respons HTTP untuk ditetapkan dengan betul agar respons ditangani sebagai XML. XML yang dibentuk dengan baik, dikembalikan dengan jenis kandungan teks/XML (atau aplikasi/XML, atau bahkan aplikasi/XHTML XML), akan memasuki sifat responsxML objek XMLHTTPREQUEST; Jenis kandungan bukan XML akan menghasilkan nilai null atau undefined untuk harta itu.

Walau bagaimanapun, Firefox, Safari, dan Internet Explorer 7 menyediakan jalan sekitar pilihan XMLHTTPREQUEST atas dokumen XML: kaedah overridemimetype kelas XMLHTTPREQEEST. Cangkuk kelas Ajax mudah kami ke dalam ini dengan kaedah setMimeType:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kaedah ini menetapkan harta mimetype.

Kemudian, dalam kaedah DOREQ kami, kami hanya memanggil overridemimeType di dalam percubaan ... menangkap blok, seperti SO:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

dapat mengatasi tajuk jenis kandungan dari pelayan yang tidak berkerjasama boleh menjadi sangat penting dalam persekitaran di mana anda tidak mempunyai kawalan ke atas kedua-dua hujung depan dan belakang aplikasi web anda. Hal ini terutama berlaku kerana banyak perkhidmatan dan kandungan akses aplikasi hari ini dari banyak domain atau sumber yang berbeza. Walau bagaimanapun, kerana teknik ini tidak akan berfungsi di Internet Explorer 6 atau Opera 8, anda mungkin tidak dapat digunakan untuk digunakan dalam aplikasi anda hari ini.

Pengendali tindak balas

Menurut spesifikasi HTTP 1.1, sebarang tindak balas yang mempunyai kod antara 200 dan 299 termasuk tindak balas yang berjaya.

Pengendali Acara OnreadyStateChange Kami telah menentukan melihat harta status untuk mendapatkan status respons. Sekiranya kod tersebut berada dalam julat yang betul untuk respons yang berjaya, pengendali acara OnreadyStateChange meluluskan tindak balas kepada kaedah pengendali tindak balas (yang ditetapkan oleh harta pengendali).

Pengendali tindak balas perlu tahu apa respons itu, tentu saja, jadi kami akan menyampaikannya sebagai respons sebagai parameter. Kami akan melihat proses ini dalam tindakan kemudian, apabila kita bercakap mengenai kaedah Doget.

Oleh kerana kaedah pengendali ditakrifkan pengguna, kod juga melakukan pemeriksaan sepintas untuk memastikan kaedah telah ditetapkan dengan betul sebelum ia cuba melaksanakan kaedah.

pengendali ralat

Jika harta status menunjukkan bahawa terdapat ralat dengan permintaan (iaitu, ia berada di luar julat kod 200 hingga 299), respons pelayan diserahkan kepada pengendali ralat dalam harta Handleerr. Kelas Ajax kami sudah mentakrifkan lalai yang munasabah untuk pengendali ralat, jadi kami tidak perlu memastikan ia ditakrifkan sebelum kami memanggilnya.

Harta Handleerr menunjukkan fungsi yang kelihatan seperti ini:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kaedah ini memeriksa untuk memastikan bahawa pop timbul tidak disekat, kemudian cuba memaparkan teks penuh kandungan halaman ralat pelayan dalam tetingkap pelayar baru. Kod ini menggunakan cubaan ... menangkap blok, jadi jika pengguna telah menyekat pop timbul, kami dapat menunjukkan kepada mereka versi potong mesej ralat dan memberitahu mereka bagaimana untuk mengakses mesej ralat yang lebih terperinci.

Ini adalah lalai yang baik untuk permulaan, walaupun anda mungkin ingin menunjukkan kurang maklumat kepada pengguna akhir-semuanya bergantung pada tahap paranoia anda. Jika anda ingin menggunakan pengendali ralat tersuai anda sendiri, anda boleh menggunakan Sethandlererr seperti So:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

atau, pengendali yang benar

Mungkin anda mungkin mahu menggunakan fungsi tunggal untuk mengendalikan kedua -dua respons dan kesilapan yang berjaya. SethandlerBoth, kaedah kemudahan dalam kelas Ajax kami, menetapkan ini dengan mudah untuk kami:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Sebarang fungsi yang diluluskan sebagai parameter kepada SethandlerBoth akan mengendalikan kedua -dua respons dan kesilapan yang berjaya.

Persediaan ini mungkin berguna kepada pengguna yang menetapkan harta ResponsFormat kelas anda untuk objek, yang akan menyebabkan objek XMLHTTPREQUEST yang digunakan untuk membuat permintaan - bukan hanya nilai responsetext atau responsxml sifat - untuk diserahkan kepada pengendali tindak balas.

Mengatur permintaan

Kadang -kadang, seperti yang anda ketahui dari pengalaman anda sendiri, laman web akan mengambil masa yang lama untuk dimuatkan. Penyemak imbas web anda mempunyai butang berhenti, tetapi bagaimana dengan kelas Ajax anda? Di sinilah kaedah abort dimainkan:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kaedah ini mengubah pengendali acara OnreadyState ke fungsi kosong, memanggil kaedah abort pada contoh kelas XMLHTTPREQUEST, kemudian memusnahkan contoh yang telah anda buat. Dengan cara itu, apa -apa sifat yang telah ditetapkan secara eksklusif untuk permintaan yang sedang dibatalkan adalah ditetapkan semula. Lain kali permintaan dibuat, kaedah INIT akan dipanggil dan sifat -sifat tersebut akan dihidupkan semula.

Jadi, mengapa kita perlu menukar pengendali acara OnreadyState? Banyak pelaksanaan XMLHTTPREQUEST akan membakar acara OnreadyState sebaik sahaja dibatalkan, untuk menunjukkan bahawa keadaan permintaan telah diubah. Apa yang lebih buruk ialah peristiwa -peristiwa itu datang dengan siap sedia 4, yang menunjukkan bahawa segala -galanya selesai seperti yang diharapkan (yang sebahagiannya benar, jika anda memikirkannya: sebaik sahaja kita memanggilnya, segala -galanya harus berhenti dan contoh XMLHTTprequest harus bersedia untuk menghantar permintaan lain, sekiranya kita inginkan). Jelas sekali, kami tidak mahu pengendali respons kami dipanggil apabila kami membatalkan permintaan, jadi kami mengeluarkan pengendali yang sedia ada sebelum kami memanggilnya.

membungkusnya

Memandangkan kod yang kita ada setakat ini, kelas Ajax hanya memerlukan dua perkara untuk membuat permintaan:

URL sasaran
fungsi pengendali untuk respons

mari kita menyediakan kaedah yang dipanggil Detet untuk menetapkan kedua -dua sifat ini, dan memulakan permintaan:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Anda akan melihat bahawa, bersama -sama dengan dua parameter, URL dan tangan yang dijangkakan, fungsi ini mempunyai parameter ketiga: format. Ini adalah parameter pilihan yang membolehkan kita menukar format respons pelayan yang diserahkan kepada fungsi pengendali.

Jika kita tidak lulus dalam nilai untuk format, harta ResponsFormat kelas Ajax akan lalai kepada nilai teks, yang bermaksud pengendali anda akan lulus nilai harta responsetext. Anda boleh, sebaliknya, lulus XML atau objek sebagai format, yang akan mengubah parameter yang dihantar ke pengendali tindak balas kepada Objek XML atau XMLHTTPREQUEST.

Contohnya: Halaman Ujian Mudah

Akhirnya masa untuk meletakkan segala yang telah kita pelajari bersama! Mari buat contoh kelas Ajax ini, dan gunakannya untuk menghantar permintaan dan mengendalikan respons.

Sekarang bahawa kod kelas kami berada dalam fail yang dipanggil ajax.js, mana -mana laman web di mana kami mahu menggunakan kelas Ajax kami perlu memasukkan kod AJAX dengan tag . Sebaik sahaja halaman kami mempunyai akses ke kod AJAX, kami boleh membuat objek AJAX.

Skrip ini memberi kita contoh baru yang berkilat dari kelas Ajax. Sekarang, mari kita buat sesuatu yang berguna.

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Untuk membuat permintaan paling asas dengan kelas Ajax kami, kami boleh melakukan sesuatu seperti ini:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Ini mewujudkan contoh kelas Ajax kami yang akan membuat permintaan mudah ke halaman yang dipanggil Fakeserver.php, dan lulus hasilnya kembali sebagai teks ke fungsi tangan. Jika Fakeserver.php mengembalikan dokumen XML yang anda mahu gunakan, anda boleh melakukannya seperti ini:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Anda ingin memastikan dengan pasti dalam kes ini bahawa SomePage.php benar-benar melayani XML yang sah dan tajuk tindak balas HTTP jenis kandungannya ditetapkan ke teks/XML (atau sesuatu yang sesuai).

Membuat halaman

Sekarang kita telah mencipta objek Ajax, dan menubuhkan fungsi pengendali mudah untuk permintaan itu, sudah tiba masanya untuk meletakkan kod kami ke dalam tindakan.

halaman pelayan palsu

Dalam kod di atas, anda dapat melihat bahawa URL sasaran untuk permintaan ditetapkan ke halaman yang dipanggil Fakeserver.php. Untuk menggunakan kod demonstrasi ini, anda perlu melayani kedua-dua ajaxtest.html dan fakeserver.php dari pelayan web yang dibolehkan PHP yang sama. Anda boleh melakukan ini dari pelayan web IIS dengan beberapa ASP mudah. Halaman pelayan palsu adalah halaman super-mudah yang mensimulasikan masa tindak balas yang berbeza-beza dari pelayan web menggunakan kod PHP di bawah:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Itu semua kod kecil ini: Ia menunggu di antara tiga dan 12 saat, kemudian mencetak OK.

Kod Fakeerver.php menetapkan tajuk kandungan jenis respons kepada teks/dataran. Bergantung pada kandungan halaman yang anda lalui, anda mungkin memilih jenis kandungan lain untuk respons anda. Sebagai contoh, jika anda lulus dokumen XML kembali kepada pemanggil, anda secara semulajadi mahu menggunakan teks/XML.

Ini berfungsi juga dalam ASP, walaupun beberapa ciri (seperti tidur) tidak mudah didapati, seperti kod di bawah menggambarkan:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Sepanjang buku ini, semua contoh pelayan kami akan ditulis dalam PHP, walaupun mereka dapat dengan mudah ditulis dalam ASP, ASP.NET, Java, Perl, atau hampir mana-mana bahasa yang dapat melayani kandungan melalui pelayan web.

Gunakan kaedah setMimeType

Bayangkan bahawa anda mempunyai respons yang anda tahu mengandungi dokumen XML yang sah yang anda ingin menghuraikan sebagai XML, tetapi pelayan menegaskan untuk melayani anda sebagai teks/biasa. Anda boleh memaksa respons yang dihuraikan sebagai XML di Firefox dan Safari dengan menambahkan panggilan tambahan kepada setMimeType, seperti SO:

Example 2.3. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
};

Secara semulajadi, anda harus menggunakan pendekatan ini hanya apabila anda yakin bahawa respons dari pelayan akan menjadi XML yang sah, dan anda pasti bahawa penyemak imbas adalah Firefox atau Safari.

memukul halaman

kini datang momen kebenaran! Tekan pelayan web tempatan anda, muatkan ajaxtest.html, dan lihat apa yang anda dapat. Sekiranya semuanya berfungsi dengan baik, akan ada beberapa saat kelewatan, dan kemudian anda akan melihat amaran JavaScript standard seperti yang ada dalam Rajah 2.2 yang mengatakan hanya OK.

Rajah 2.2. Pengesahan bahawa kelas Ajax anda berfungsi seperti yang diharapkan

Sekarang semuanya baik dan kelas Ajax kami berfungsi dengan baik, sudah tiba masanya untuk bergerak ke langkah seterusnya.

Contoh: aplikasi ajax mudah

Baiklah, jadi gunakan kuasa Ajax yang mengagumkan untuk menanam kotak amaran JavaScript kecil yang berbunyi "OK" mungkin tidak betul -betul apa yang anda fikirkan apabila anda membeli buku ini. Mari kita melaksanakan beberapa perubahan pada kod contoh kami yang akan menjadikan barangan XMLHTTPREQUEST ini sedikit lebih berguna. Pada masa yang sama, kami akan membuat aplikasi pemantauan mudah yang saya nyatakan pada permulaan bab ini. Aplikasi ini akan memancarkan laman web dan melaporkan masa yang diperlukan untuk mendapatkan respons kembali.

meletakkan asas

Kami akan bermula dengan dokumen HTML yang mudah yang dihubungkan ke dua fail JavaScript: ajax.js, yang mengandungi perpustakaan kami, dan appmonitor1.js, yang akan mengandungi kod untuk aplikasi kami.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Anda akan melihat bahawa hampir tidak ada kandungan dalam badan halaman - hanya ada unsur div tunggal. Ini agak tipikal aplikasi web yang bergantung kepada fungsi Ajax. Sering kali, banyak kandungan aplikasi Ajax dicipta oleh JavaScript secara dinamik, jadi kita biasanya melihat markup yang kurang dalam badan sumber halaman daripada yang kita lakukan dalam aplikasi web bukan ajax yang mana semua kandungan dihasilkan oleh pelayan. Walau bagaimanapun, di mana Ajax bukan bahagian penting dalam aplikasi, versi HTML biasa aplikasi harus disediakan.

kami akan memulakan fail appmonitor1.js kami dengan beberapa kandungan mudah yang menggunakan kelas Ajax kami:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

kami akan menggunakan pembolehubah Mula untuk merakam masa di mana setiap permintaan bermula - angka ini akan digunakan untuk mengira berapa lama setiap permintaan diperlukan. Kami membuat pembolehubah global supaya kami tidak perlu mengasah kerja kelas Ajax kami dengan kod tambahan untuk permintaan masa - kami boleh menetapkan nilai Mula dengan segera sebelum dan selepas panggilan kami ke objek Ajax.

Pembolehubah Ajax hanya memegang contoh kelas Ajax kami.

Fungsi Dopoll sebenarnya membuat permintaan HTTP menggunakan kelas AJAX. Anda harus mengenali panggilan ke kaedah Doget dari halaman ujian asal kami.

Perhatikan bahawa kami telah menambah kepada URL sasaran rentetan pertanyaan yang mempunyai nilai permulaan sebagai parameter. Kami sebenarnya tidak akan menggunakan nilai ini pada pelayan; Kami hanya menggunakannya sebagai nilai rawak untuk menangani caching Internet Explorer. IE cache semua mendapatkan permintaan yang dibuat dengan XMLHTTPREQUEST, dan satu cara melumpuhkan "ciri" adalah untuk menambahkan nilai rawak ke dalam rentetan pertanyaan. Nilai milisaat dalam permulaan boleh berganda sebagai nilai rawak. Alternatif untuk pendekatan ini adalah dengan menggunakan kaedah setRequestheader kelas XMLHTTPREQUEST untuk menetapkan header IF-Modified-Since atas permintaan.

Akhirnya, kami menendang segala -galanya dengan melampirkan dopoll ke acara window.onload.

mengendalikan keputusan dengan Showpoll

Parameter kedua yang kami lalui untuk Doget memberitahu kelas Ajax untuk menyampaikan respons kepada fungsi Showpoll. Inilah kod untuk fungsi itu:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Ini semua cukup mudah: Fungsi ini menjangkakan parameter tunggal, yang sepatutnya menjadi rentetan OK kembali dari Fakeerver.php jika semuanya berjalan seperti yang diharapkan. Sekiranya tindak balasnya betul, kod tersebut melakukan pengiraan cepat yang diperlukan untuk mengetahui berapa lama tindak balas yang diambil, dan membuat mesej yang mengandungi hasilnya. Ia menyampaikan mesej itu ke PollResult untuk paparan.

Dalam pelaksanaan yang sangat mudah ini, apa -apa selain daripada tindak balas yang diharapkan hasil dalam mesej yang agak tersembunyi dan tidak membantu: Permintaan gagal. Kami akan membuat pengendalian keadaan kesilapan kami lebih mantap apabila kami menaik taraf aplikasi ini dalam bab seterusnya.

Setelah PollResult ditetapkan, ia diserahkan kepada fungsi PrintResult:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Fungsi PrintResult memaparkan mesej yang dihantar dari Showpoll di dalam div tunggal di halaman.

Perhatikan ujian dalam kod di atas, yang digunakan untuk melihat sama ada div kami mempunyai nod kanak -kanak. Pemeriksaan ini untuk kewujudan mana -mana nod teks, yang boleh termasuk teks yang kami tambahkan ke Div ini dalam lelaran sebelumnya, atau teks yang terkandung di dalam div dalam markup halaman, dan kemudian menghilangkannya. Jika anda tidak mengeluarkan nod teks yang sedia ada, kod tersebut hanya akan menambahkan hasil baru ke halaman sebagai nod teks baru: Anda akan memaparkan rentetan teks yang panjang yang lebih banyak teks terus dilampirkan.

mengapa tidak menggunakan innerHtml?

anda hanya boleh mengemas kini harta InnerHTML div, seperti SO:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Harta InnerHTML bukanlah standard web, tetapi semua pelayar utama menyokongnya. Dan, seperti yang anda lihat dari fakta bahawa ia adalah satu baris kod (berbanding dengan empat baris yang diperlukan untuk kaedah DOM), kadang -kadang lebih mudah digunakan daripada kaedah DOM. Tidak ada cara untuk memaparkan kandungan pada halaman anda sememangnya lebih baik.

Dalam sesetengah kes, anda mungkin memilih kaedah berdasarkan perbezaan kelajuan kedua -dua pendekatan ini (innerHTML boleh lebih cepat daripada kaedah DOM). Dalam kes lain, anda boleh mendasarkan keputusan anda mengenai kejelasan kod, atau bahkan pada rasa peribadi.

Memulakan proses sekali lagi

Akhirnya, ShowPoll memulakan keseluruhan proses dengan menjadualkan panggilan ke fungsi Dopoll asal dalam masa 15 saat menggunakan setTimeout, seperti yang ditunjukkan di bawah:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Hakikat bahawa kod tersebut secara berterusan memanggil fungsi Dopoll bermakna bahawa sebaik sahaja halaman dimuatkan, permintaan HTTP mengundi halaman Fakeerver.php akan terus berbuat demikian sehingga halaman itu ditutup. Pembolehubah pengundian adalah ID selang yang membolehkan anda menjejaki operasi yang belum selesai, dan membatalkannya menggunakan ClearTimeout.

Parameter pertama panggilan setTimeout, Dopoll, adalah penunjuk kepada fungsi utama aplikasi; Yang kedua mewakili tempoh masa, dalam beberapa saat, yang mesti berlalu antara permintaan.

Kod Contoh Penuh

ini semua kod dari percubaan pertama kami dijalankan dengan aplikasi pemantauan mudah ini.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Dalam usaha untuk mengikuti prinsip kejuruteraan perisian yang baik, saya telah memisahkan kod JavaScript dari markup, dan meletakkannya dalam dua fail yang berbeza.

Saya akan mengikuti pendekatan yang sama dengan semua kod contoh untuk buku ini, memisahkan setiap markup contoh, kod JavaScript, dan CSS ke dalam fail berasingan. Aplikasi pemantauan kecil ini sangat asas bahawa ia tidak mempunyai fail CSS. Kami akan menambah beberapa gaya untuk menjadikannya kelihatan lebih baik dalam bab seterusnya.

Running App

Cuba muatkan halaman dalam penyemak imbas anda. Jatuhkannya ke direktori akar pelayan web anda, dan buka halaman dalam penyemak imbas anda.

Jika halaman Fakeerver.php bertindak balas dengan betul, anda akan melihat sesuatu seperti paparan yang ditunjukkan dalam Rajah 2.3.

Rajah 2.3. Menjalankan aplikasi pemantauan mudah

bacaan selanjutnya

Berikut adalah beberapa sumber dalam talian yang akan membantu anda mempelajari lebih lanjut mengenai teknik dan konsep dalam bab ini.

Model objek JavaScript

http://docs.sun.com/source/816-6409-10/Obj.htm

http://docs.sun.com/source/816-6409-10/obj2.htm
• Semak kedua-dua bab ini mengenai objek dari Panduan JavaScript sisi klien untuk versi 1.3 JavaScript, yang dihoskan oleh Sun Microsystems. Bab pertama menerangkan semua konsep asas yang anda perlukan untuk memahami cara bekerja dengan objek dalam JavaScript. Yang kedua menjadi lebih mendalam mengenai model warisan berasaskan prototaip JavaScript, yang membolehkan anda memanfaatkan lebih banyak kuasa pengekodan berorientasikan objek dengan JavaScript.

Ini adalah pengenalan ringkas untuk mewujudkan pembolehubah contoh peribadi dengan objek JavaScript. Ia akan membantu anda mendapatkan pemahaman yang lebih mendalam mengenai skim warisan berasaskan prototaip JavaScript.

xmlhttprequest

Berikut adalah halaman rujukan yang baik dari sambungan pemaju Apple. Ia memberikan gambaran yang bagus tentang kelas XMLHTTPREQUEST, dan jadual rujukan kaedah dan sifatnya.

Artikel ini, yang asalnya dipaparkan pada tahun 2002, terus dikemas kini dengan maklumat baru. Ia termasuk maklumat mengenai membuat permintaan kepala (bukan hanya mendapatkan atau pos), serta notasi objek JavaScript (JSON), dan sabun.

Ini adalah rujukan lengkap Xulplanet mengenai pelaksanaan XMLHTTPREQUEST di Firefox.

Berikut adalah satu lagi gambaran yang bagus, yang juga menunjukkan beberapa kaedah yang kurang digunakan bagi objek XMLHTTPREQUEST, seperti overridemimeType, SetRequestHeader, dan Getresponseheader. Sekali lagi, rujukan ini memberi tumpuan kepada pelaksanaan di Firefox.

Ini adalah dokumentasi Microsoft mengenai MSDN mengenai pelaksanaannya XMLHTTPREQUEST.

Ringkasan

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

• cara untuk pentadbir sistem untuk mengkonfigurasi selang antara pemilihan dan ambang masa tamat
• Cara mudah untuk memulakan dan menghentikan proses pemantauan
• graf bar masa tindak balas untuk permintaan sebelumnya; Bilangan penyertaan dalam senarai sejarah akan dikonfigurasikan pengguna
• Pemberitahuan Pengguna Apabila permohonan sedang dalam proses membuat permintaan
• pengendalian tamat masa permintaan yang anggun

Rajah 3.1 menunjukkan apa aplikasi berjalan akan kelihatan seperti sekali kita selesai dengan semua peningkatan.

Kod untuk aplikasi ini dipecahkan kepada tiga fail: markup dalam appmonitor.html, kod JavaScript dalam appmonitor2.js, dan gaya dalam appmonitor2.css. Untuk memulakan, kami akan menghubungkan semua fail yang diperlukan ke appmonitor2.html:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Rajah 3.1. Aplikasi Running Mengatur kod

Semua fungsi baru ini akan menambah lebih banyak kerumitan kepada aplikasi kami, jadi ini adalah masa yang baik untuk menubuhkan beberapa jenis organisasi dalam kod kami (pilihan yang lebih baik daripada meninggalkan segala -galanya dalam skop global). Lagipun, kami sedang membina aplikasi AJAX yang berfungsi sepenuhnya, jadi kami ingin menganjurkannya dengan betul.

Kami akan menggunakan prinsip reka bentuk berorientasikan objek untuk mengatur aplikasi kami. Dan kita akan mula, tentu saja, dengan penciptaan kelas asas untuk aplikasi kami - kelas monitor.

Biasanya, kami akan membuat kelas dalam JavaScript seperti ini:

Ini adalah fungsi pembina yang baik dan normal, dan kami dapat dengan mudah menggunakannya untuk membuat kelas monitor (atau sekumpulan mereka jika kami mahu).

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

kehilangan skop dengan setTimeout

Malangnya, perkara -perkara tidak akan begitu mudah dalam kes permohonan kami. Kami akan menggunakan banyak panggilan ke SetTimeout (serta SetInterval) dalam aplikasi kami, jadi kaedah biasa untuk membuat kelas JavaScript mungkin membuktikan masalah untuk kelas monitor kami.

Fungsi SetTimeout sangat berguna untuk melambatkan pelaksanaan sekeping kod, tetapi ia mempunyai kelemahan yang serius: ia menjalankan kod itu dalam konteks pelaksanaan yang berbeza dari objek tersebut. (Kami bercakap sedikit tentang masalah ini, yang disebut kehilangan skop, dalam bab terakhir.)

Ini adalah masalah kerana kata kunci objek ini mempunyai makna baru dalam konteks pelaksanaan baru. Jadi, apabila anda menggunakannya di dalam kelas anda, ia menderita dari serangan amnesia secara tiba -tiba - ia tidak tahu apa itu!

ini mungkin agak sukar difahami; Mari kita berjalan melalui demonstrasi yang cepat supaya anda dapat melihat gangguan ini dalam tindakan. Anda mungkin ingat kelas Scopetest yang kami lihat dalam bab terakhir. Untuk bermula dengan, ia adalah kelas yang mudah dengan satu harta dan satu kaedah:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Hasil dari kod ini adalah kotak amaran JavaScript yang boleh diramal dengan teks "Salam dari Scopetest!"

mari kita ubah kaedah dotest supaya ia menggunakan setTimeout untuk memaparkan mesej dalam satu saat.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Daripada mesej ucapan kami, kotak amaran yang dihasilkan dari versi kod ini akan membaca "Undefined." Kerana kami memanggil OnTimeout dengan SetTimeout, OnTimeout dijalankan dalam konteks pelaksanaan baru. Dalam konteks pelaksanaan itu, ini tidak lagi merujuk kepada contoh scopetest, jadi ini.message tidak mempunyai makna.

Cara paling mudah untuk menangani masalah kehilangan skop ini adalah dengan membuat kelas monitor kelas khas, yang dipanggil singleton.

Singletons dengan JavaScript

"Singleton" dipanggil kerana hanya satu contoh "tunggal" kelas itu wujud pada bila -bila masa. Membuat kelas menjadi singleton sangat mudah:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Menggunakan kata kunci BARU Sebelum fungsi mencipta pembina "satu-shot". Ia mewujudkan satu contoh scopetest, dan ia dilakukan: anda tidak boleh menggunakannya untuk membuat objek scopetest lagi.

Untuk memanggil kaedah dotest objek singleton ini, anda mesti menggunakan nama sebenar kelas (kerana hanya ada satu contohnya):

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Itu semua baik dan baik, tetapi kami tidak menyelesaikan masalah kehilangan skop kami. Sekiranya anda mencuba kod sekarang, anda akan mendapat mesej "tidak jelas" yang anda lihat sebelum ini, kerana ini tidak merujuk kepada contoh Scopetest. Walau bagaimanapun, dengan menggunakan singleton memberi kita cara mudah untuk menyelesaikan masalah ini. Apa yang perlu kita lakukan ialah menggunakan nama sebenar objek - bukannya kata kunci ini - di dalam masa:

Example 2.3. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
};

Hanya ada satu contoh Scopetest, dan kami menggunakan nama sebenarnya dan bukannya ini, jadi tidak ada kekeliruan mengenai contoh Scopetest yang dirujuk di sini.

Apabila anda melaksanakan kod ini, anda akan melihat nilai yang diharapkan dari "Salam dari Scopetest!" dalam kotak amaran JavaScript.

Sekarang, saya bosan menggunakan nama objek sebenar sepanjang kod objek saya, dan saya suka menggunakan kata kunci pintasan seperti ini di mana sahaja saya boleh. Oleh itu, biasanya saya membuat diri yang berubah -ubah yang boleh saya gunakan sebagai ganti ini, dan tunjukkan kepada nama objek di bahagian atas setiap kaedah, seperti:

Example 2.4. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
  this.req.open(this.method, this.url, this.async);  <br>
};

Ini kelihatan sedikit bodoh dalam kaedah yang sekadarnya, tetapi dalam potongan kod yang lebih lama, ia bagus untuk mempunyai penyelesaian tersendiri yang serupa dengan ini yang boleh anda gunakan untuk merujuk kepada objek anda. Saya menggunakan diri, tetapi anda boleh menggunakan saya, atau heyyou, atau darthvader jika anda mahu.

Mewujudkan objek monitor

Sekarang kita mempunyai rancangan untuk organisasi kod yang akan menyelesaikan masalah kehilangan-skop dari setTimeout, sudah tiba masanya untuk membuat kelas pemantauan asas kami:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Empat hartanah pertama, TargetUrl, Pollinterval, MaxPollentries, dan TimeoutHreshold, akan diasaskan sebagai sebahagian daripada permulaan kelas. Mereka akan mengambil nilai -nilai yang ditakrifkan dalam konfigurasi aplikasi, yang akan kita lihat di bahagian seterusnya.

inilah rundown ringkas mengenai sifat -sifat lain:

AJAX - Contoh kelas Ajax kami yang membuat permintaan HTTP ke pelayan yang kami pemantauan.
mula - digunakan untuk merakam masa di mana permintaan terakhir dihantar.
PollArray - array yang memegang masa tindak balas pelayan; max_poll_entries yang berterusan menentukan bilangan item yang dipegang dalam array ini.
Pollhand, Timeouthand-ID selang dikembalikan oleh setTimeout memerlukan dua proses yang berbeza-proses pengundian utama, dan Watcher Timeout, yang mengawal tempoh masa tamat yang ditentukan oleh pengguna untuk setiap permintaan.
Reqstatus - Digunakan untuk animasi status yang memberitahu pengguna apabila permintaan sedang berjalan. Kod yang dicapai ini agak rumit, jadi kami akan menulis satu lagi kelas singleton untuk mengurusnya. Harta Reqstatus menunjuk kepada satu contoh kelas itu.

mengkonfigurasi dan memulakan aplikasi kami

Seorang webmaster yang melihat aplikasi ini mungkin berfikir bahawa ia agak sejuk, tetapi salah satu perkara pertama yang dia inginkan adalah cara mudah untuk mengkonfigurasi selang pengundian aplikasinya, atau masa yang berlalu antara permintaan aplikasi membuat tapak pemantauan. Sangat mudah untuk mengkonfigurasi selang pengundian menggunakan pemalar global.

Untuk menjadikannya sangat mudah bagi mana -mana pengguna skrip ini untuk menetapkan selang pengundian, kami akan meletakkan bahagian ini kod dalam elemen skrip di dalam kepala appmonitor2.html:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Anda akan melihat bahawa nama-nama pembolehubah ini ditulis dalam semua-cap. Ini adalah petunjuk bahawa mereka harus bertindak seperti pemalar - nilai yang ditetapkan awal dalam kod, dan tidak berubah seperti yang dilaksanakan oleh kod. Pemalar adalah ciri banyak bahasa pengaturcaraan tetapi, malangnya, JavaScript bukanlah salah satu daripada mereka. (Versi baru JavaScript membolehkan anda menetapkan pemalar sebenar dengan kata kunci, tetapi kemudahan ini tidak disokong secara meluas (walaupun oleh banyak pelayar moden).) Perhatikan bahawa pemalar ini berkaitan langsung dengan empat sifat pertama kelas kami: Targeturl, Pollinterval, MaxPollentries, dan Timeouthreshold. Ciri -ciri ini akan dimulakan dalam kaedah init kelas kami:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Selain memulakan beberapa sifat kelas kami, kaedah init juga memanggil dua kaedah: toggleappstatus, yang bertanggungjawab untuk memulakan dan menghentikan pengundian, dan kaedah init objek Reqstatus. Reqstatus adalah contoh kelas singleton status yang kita bincangkan sebentar tadi.

kaedah init ini terikat pada acara window.onload untuk halaman, seperti SO:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

menyediakan ui

Versi pertama aplikasi ini bermula apabila halaman dimuatkan, dan berlari sehingga tetingkap penyemak imbas ditutup. Dalam versi ini, kami ingin memberi pengguna butang yang boleh digunakan untuk mengalihkan atau mematikan proses pengundian. Kaedah toggleappstatus mengendalikan ini untuk kami:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Baiklah, jadi toggleappstatus tidak benar -benar melakukan kerja, tetapi ia memanggil kaedah yang dilakukan: Togglebutton, yang mengubah butang mula menjadi butang berhenti dan sebaliknya, dan togglestatusmessage, yang mengemas kini mesej status aplikasi. Mari kita lihat dengan lebih dekat setiap kaedah ini.

Kaedah ToggleButton

Kaedah ini menukarkan aplikasi utama antara "stop" dan "mula" menyatakan. Ia menggunakan kaedah manipulasi dom untuk membuat butang yang sesuai secara dinamik, memberikan teks yang betul dan pengendali acara onclick:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Satu -satunya parameter untuk kaedah ini, dihentikan, boleh menjadi benar, menunjukkan bahawa pengundian telah dihentikan, atau palsu, menunjukkan bahawa pengundian telah bermula.

seperti yang anda lihat dalam kod untuk kaedah ini, butang dibuat, dan ditetapkan untuk memaparkan Mula jika aplikasi dihentikan, atau berhenti jika aplikasi sedang mengundi pelayan. Ia juga menyerahkan sama ada PollServerTart atau Pollserverstop sebagai pengendali acara OnClick butang. Pengendali acara ini akan memulakan atau menghentikan proses pengundian masing -masing.

Apabila kaedah ini dipanggil dari init (melalui toggleappstatus), dihentikan ditetapkan untuk benar supaya butang akan memaparkan permulaan apabila aplikasi dimulakan.

kerana kod ini memanggil div dengan butang ID, mari tambahkannya ke markup kami sekarang:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

kaedah togglestatusmessage

Menunjukkan butang dengan perkataan "mula" atau "berhenti" di atasnya mungkin semua pengaturcara atau jurutera perlu memikirkan status aplikasi, tetapi kebanyakan orang biasa memerlukan mesej yang sedikit lebih jelas dan lebih jelas untuk menyelesaikan apa yang sedang berlaku dengan permohonan.

versi yang dinaik taraf aplikasi ini akan memaparkan mesej status di bahagian atas halaman untuk memberitahu pengguna mengenai keadaan keseluruhan aplikasi (dihentikan atau berjalan), dan status proses pengundian. Untuk memaparkan status aplikasi, kami akan meletakkan mesej yang bagus dan jelas dalam bar status aplikasi yang menyatakan status aplikasi: berhenti atau status aplikasi: berjalan.

Dalam markup kami, mari masukkan mesej status di atas di mana butang muncul. Kami hanya akan memasukkan bahagian "status aplikasi" mesej dalam markup kami. Selebihnya mesej akan dimasukkan ke dalam rentang dengan id currentAppState:

kaedah togglestatusmessage bertukar antara kata -kata yang boleh dipaparkan di dalam rentang semasa:

Example 2.3. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
};

Setelah UI ditubuhkan, aplikasi itu disediakan dan bersedia untuk memulakan pengundian dan rakaman masa tindak balas.

Example 2.4. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
  this.req.open(this.method, this.url, this.async);  <br>
};

Memeriksa kerja anda sedang berjalan

Sekarang bahawa anda telah datang sejauh ini, lebih baik dapat melihat kerja anda dalam tindakan, bukan? Malangnya, kami masih mendapat banyak hujung yang longgar dalam permohonan kami - kami telah menyebut secara ringkas kelas singleton yang dipanggil Status tetapi kami belum menciptanya lagi, dan kami masih mempunyai pengendali acara yang tersisa untuk menulis. Tetapi jangan takut! Kami dapat dengan cepat mendapatkan aplikasi dan berjalan dengan beberapa kelas dan fungsi stub.

kita akan mulakan dengan membuat kelas singleton status dengan satu kaedah kosong.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Oleh kerana kelas status digunakan oleh kelas monitor, kita mesti mengisytiharkan status sebelum monitor.

Kemudian, kami akan menambah pengendali acara OnClick kami ke kelas monitor. Kami akan memaparkan dialog amaran supaya kami tahu apa yang akan berlaku jika ada apa -apa yang berlaku di belakang tabir.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Dengan kedua-dua stub mudah ini, aplikasi anda kini perlu bersedia untuk memandu ujian.

Rajah 3.2. Permulaan yang rendah

Apabila anda mengklik butang Mula dalam paparan yang ditunjukkan dalam Rajah 3.2 anda dibentangkan dengan kotak amaran yang menjanjikan perkara yang lebih besar untuk datang. Mari kita mulakan dengan baik pada janji -janji itu.

mengundi pelayan

Langkah pertama adalah untuk memakan handler acara OnClick Button, PollServerTart:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Kod ini segera memanggil kaedah dopoll, yang, seperti monitor aplikasi yang kami bina dalam Bab 2, asas XMLHTTPREQUEST, akan bertanggungjawab untuk membuat permintaan HTTP untuk mengundi pelayan. Sebaik sahaja permintaan itu dihantar, kod panggilan toggleappstatus, menyampaikannya palsu untuk menunjukkan bahawa pengundian sedang dijalankan.

di mana selang undian?

Anda mungkin tertanya -tanya mengapa, selepas semua ini bercakap tentang menetapkan selang tinjauan, kod kami melompat terus dengan permintaan ke pelayan; Di manakah kelewatan masa? Jawapannya ialah kita tidak mahu kelewatan masa atas permintaan pertama. Jika pengguna mengklik butang dan terdapat kelewatan sepuluh saat sebelum apa-apa berlaku, mereka akan berfikir aplikasinya rosak. Kami mahu kelewatan antara semua permintaan berikutnya yang berlaku sebaik sahaja aplikasi berjalan, tetapi apabila pengguna pertama mengklik butang itu, kami mahu pengundian bermula dengan segera.

Satu -satunya perbezaan antara Dopoll dalam versi ini dari monitor aplikasi kami dan yang kita lihat dalam bab terakhir ialah penggunaan diri untuk awalan sifat kelas, dan panggilan ke setTimeout. Lihatlah:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Panggilan kami ke SetTimeout mengarahkan penyemak imbas untuk memanggil HandleTimeout sebaik sahaja ambang masa tamat telah berlalu. Kami juga menjejaki ID selang yang dikembalikan, jadi kami boleh membatalkan panggilan kami ke handletimeout apabila respons diterima oleh Showpoll.

inilah kod untuk kaedah ShowPoll, yang mengendalikan respons dari pelayan:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Perkara pertama kaedah ini adalah membatalkan panggilan tertunda ke handletimeout yang dibuat pada akhir dopoll. Selepas ini, kami memberitahu contoh kelas status kami untuk menghentikan animasinya (kami akan melihat butiran ini sedikit kemudian).

Selepas panggilan ini, showpoll cek untuk memastikan bahawa respons adalah OK, kemudian mengira berapa lama tindak balas yang diambil untuk kembali dari pelayan. Keupayaan pengendalian ralat kelas Ajax harus mengendalikan kesilapan dari pelayan, jadi skrip kami tidak boleh mengembalikan apa -apa selain OK ... walaupun tidak menyakitkan untuk memastikan!

Sebaik sahaja ia telah mengira masa tindak balas, Showpoll merekodkan masa tindak balas dengan UpdatePollArray, kemudian memaparkan hasilnya dengan PrintResult. Kami akan melihat kedua -dua kaedah ini di bahagian seterusnya.

Akhirnya, kami menjadualkan satu lagi tinjauan dalam dopolldelay - kaedah yang sangat mudah yang menjadualkan panggilan lain untuk dopoll sebaik sahaja selang pengundian telah berlalu:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Untuk memeriksa kemajuan kami sehingga ke tahap ini, kami perlu menambah beberapa kaedah stub. Pertama, mari tambahkan StartProc dan Stopproc ke kelas status:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Mari juga tambahkan beberapa kaedah stub ke kelas monitor kami:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Sekarang kita sudah bersedia untuk menguji kemajuan kita. Buka appmonitor2.html di pelayar web anda, klik Mula, dan tunggu Fakeerver.php bangun dari tidurnya dan hantar kembali ke halaman anda.

Anda boleh mengharapkan satu daripada dua hasil: sama ada respons diterima oleh halaman anda, dan anda melihat dialog yang serupa dengan yang ditunjukkan dalam Rajah 3.3, atau anda melihat mesej tamat masa yang ditunjukkan dalam Rajah 3.4.

Rajah 3.3. Tanggapan yang diterima oleh aplikasi Ajax anda
Jangan risau jika anda menerima mesej tamat masa yang ditunjukkan dalam Rajah 3.4. Perlu diingat bahawa dalam aplikasi Ajax kami, ambang masa tamat kami kini ditetapkan hingga sepuluh saat, dan Fakeerver.php sedang tidur untuk bilangan detik yang dipilih secara rawak antara tiga dan 12. Jika nombor rawak adalah sepuluh atau lebih, aplikasi Ajax akan melaporkan masa tamat.

Rajah 3.4. Permohonan Ajax anda memberikan harapan

Pada masa ini, kami belum melaksanakan cara untuk menghentikan pengundian, jadi anda perlu menghentikannya sama ada dengan memuatkan semula halaman atau menutup tetingkap penyemak imbas anda. Pengendalian masa tamat

Jika anda telah menjalankan kod yang telah kami tulis setakat ini, anda mungkin menyedari bahawa walaupun masa tamat dilaporkan, anda melihat mesej yang melaporkan masa tindak balas permintaan tidak lama kemudian. Ini berlaku kerana handletimeout tidak lain hanyalah stub mudah pada masa ini. Mari kita lihat bangunan di stub itu supaya kita tidak mendapat kesan sampingan ini.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

di sini, handletimeout panggilan Stoppoll untuk menghentikan permohonan kami mengundi pelayan. Ia mencatatkan bahawa masa tamat berlaku, mengemas kini antara muka pengguna, dan akhirnya menetapkan panggilan lain untuk DOPOLL melalui DOPOLLDELAY. Kami memindahkan kod yang menghentikan pengundian ke dalam fungsi yang berasingan kerana kami perlu meninjau semula kemudian dan dagingnya. Pada masa ini, kaedah Stoppoll hanya menggugurkan permintaan HTTP melalui kaedah abort kelas Ajax; Walau bagaimanapun, terdapat beberapa senario yang fungsi ini tidak dikendalikan. Kami akan menangani perkara ini kemudian, apabila kami membuat kod lengkap untuk menghentikan proses pengundian, tetapi untuk tujuan mengendalikan masa tamat, Stoppoll baik -baik saja.

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Sekarang, apabila kita memuatkan semula permohonan kita, tamat masa yang tepat seperti yang kita harapkan.

graf bar kali respons

Sekarang, kepada daging versi baru aplikasi pemantauan kami! Kami mahu permohonan itu menunjukkan senarai masa tindak balas masa lalu, bukan hanya satu entri yang paling baru -baru ini, dan kami ingin menunjukkan senarai itu dengan cara yang cepat dan mudah dibaca. Paparan graf bar yang berjalan adalah alat yang sesuai untuk pekerjaan.

Senarai berjalan di PollArray

Semua masa tindak balas akan masuk ke dalam array yang disimpan dalam harta PollArray kelas monitor. Kami menyimpan array ini dikemas kini dengan kaedah kemas kini yang dinamakan secara intuitif. Ini kaedah yang sangat mudah yang kelihatan seperti ini:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Kod ini sangat mudah, walaupun beberapa fungsi yang kami gunakan di dalamnya mempunyai nama yang sedikit mengelirukan.

Kaedah unshift objek array meletakkan item baru dalam elemen pertama array, dan mengalihkan seluruh kandungan array dengan satu kedudukan, seperti yang ditunjukkan dalam Rajah 3.5.

Rajah 3.5. Memasukkan buah menggunakan unshift
Apabila array melebihi panjang maksimum yang ditentukan pengguna, UpdatePollArray memotongnya dengan "muncul" item dari akhir. Ini dicapai dengan kaedah POP, yang hanya memadamkan item terakhir array. (Perhatikan bahawa nama kaedah POP mungkin kelihatan agak ganjil, tetapi ia lebih masuk akal apabila anda memahami struktur data yang dipanggil timbunan, yang menyimpan beberapa item yang boleh diakses hanya dalam sebaliknya perintah yang mereka tambah ke timbunan. Item dalam array.) Sebab mengapa kami menambah item ke bahagian atas dan mengeluarkan item dari bahagian bawah array adalah, dalam paparan kami, kami mahu penyertaan paling terkini muncul di bahagian atas, dan penyertaan yang lebih tua untuk beransur -ansur bergerak ke bawah.

Memaparkan hasil

Sebaik sahaja kami telah mengemas kini keputusan di PollArray, kami boleh memaparkannya menggunakan kaedah PrintResult. Ini sebenarnya bahagian yang sejuk: Pengguna akan mengalami perbezaan antara aplikasi Ajax kami dan aplikasi gaya yang lebih tua yang memerlukan seluruh halaman menyegarkan untuk mengemas kini kandungan.

Rendering Page Partials

Dalam jargon Ajax, bahagian halaman yang memegang senarai masa tindak balas dipanggil halaman separa. Ini merujuk kepada kawasan laman web yang dikemas kini secara berasingan dari seluruh halaman.

Mengemas kini sebahagian daripada laman web sebagai tindak balas kepada permintaan tak segerak ke pelayan dipanggil "memberikan halaman separa."

Kaedah PrintResult melangkah melalui PollArray, dan menggunakan kaedah DOM untuk menarik senarai hasil pengundian di dalam div dengan ID PollResults. Kami akan mulakan dengan menambahkan div itu ke markup kami:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Sekarang kita sudah bersedia untuk kaedah PrintResult:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Terdapat sedikit di sini, jadi mari kita lihat kaedah ini langkah demi langkah.

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Selepas memulakan beberapa pembolehubah, kaedah ini menghilangkan segala -galanya dari POLLDIV: Loop While menggunakan RemoveChild berulang kali untuk memadam semua nod kanak -kanak dari POLLDIV.

seterusnya datang mudah untuk gelung yang melompat melalui pelbagai keputusan yang dikemas kini dan memaparkannya.

Kami menjana mesej untuk hasil setiap item dalam array ini. Seperti yang anda lihat di bawah, tamat masa (yang direkodkan sebagai 0) menjana mesej (tamat masa).

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Seterusnya, kami menggunakan kaedah DOM untuk menambah markup untuk setiap entri dalam senarai secara dinamik. Sebenarnya, kami membina HTML berikut dalam JavaScript untuk setiap entri dalam senarai:

Example 2.3. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
};

Lebar perubahan div bar untuk mencerminkan masa tindak balas sebenar, dan tamat masa ditunjukkan dengan warna merah, tetapi sebaliknya semua penyertaan dalam senarai ini adalah sama. Perhatikan bahawa anda perlu meletakkan sesuatu di Div untuk menyebabkan warna latarnya dipaparkan. Walaupun anda memberikan div lebar tetap, warna latar belakang tidak akan menunjukkan jika div kosong. Ini menjengkelkan, tetapi mudah untuk diperbaiki: kita boleh mengisi div dengan watak ruang yang tidak pecah.

mari kita lihat kod yang akan kami gunakan untuk memasukkan markup ini:

Example 2.4. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
  this.req.open(this.method, this.url, this.async);  <br>
};

Kod ini mungkin kelihatan rumit jika anda tidak pernah menggunakan fungsi manipulasi DOM, tetapi ia sangat mudah. Kami menggunakan kaedah createelement yang dinamakan dengan baik untuk mencipta unsur-unsur; Kemudian kami memberikan nilai kepada sifat -sifat setiap objek elemen tersebut.

Hanya selepas pernyataan IF, kita dapat melihat kod yang menetapkan lebar piksel div bar mengikut bilangan detik yang diambil untuk menghasilkan setiap respons. Kami membiak angka masa itu sebanyak 20 untuk mendapatkan lebar yang munasabah, tetapi anda mungkin mahu menggunakan nombor yang lebih tinggi atau lebih rendah bergantung pada berapa banyak ruang mendatar yang tersedia di halaman.

3

createetextnode dan ruang tidak pecah

Dalam kod di atas, kami membuat ruang yang tidak pecah menggunakan U00A0. Jika kita cuba menggunakan normal & nbsp; Entiti di sini, CreateTextNode akan cuba "membantu" dengan menukar ampersand ke & amp ;; Hasilnya ialah & nbsp; dipaparkan di halaman anda. Penyelesaiannya adalah menggunakan ruang Unicode yang tidak pecah: U00A0.

Rajah 3.6. Permohonan mula mengambil bentuk

Sekeping terakhir kod meletakkan semua elemen div bersama -sama, kemudian meletakkan Div Pollresult di dalam Div PollResults. Rajah 3.6 menunjukkan aplikasi berjalan.

"Tahan sebentar," anda mungkin berfikir. "Di manakah graf bar kita sepatutnya melihat?"

bar pertama ada di sana, tetapi ia dipaparkan dengan putih pada putih, yang tidak berguna. Mari kita dapat dilihat melalui CSS aplikasi kami:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Titik utama yang menarik dalam CSS adalah terapung: pengisytiharan kiri untuk elemen masa dan bar div, yang membentuk penyenaraian masa dan bar berwarna dalam graf bar. Menggalakkan mereka ke kiri adalah apa yang membuat mereka kelihatan bersebelahan. Walau bagaimanapun, untuk teknik kedudukan ini berfungsi, elemen dengan kelas Clearboth mesti muncul sejurus selepas kedua -dua div ini.

Ini adalah di mana anda dapat melihat Ajax dalam tindakan. Ia menggunakan bit dan kepingan semua teknologi yang berbeza ini - XMLHTTPREQUEST, W3C DOM, dan CSS - berwayar bersama dan dikawal dengan JavaScript. Pengaturcara sering mengalami masalah terbesar dengan CSS dan dengan praktikal membina elemen antara muka dalam kod mereka.

Sebagai pengaturcara Ajax, anda boleh cuba bergantung kepada perpustakaan untuk menjaga CSS untuk anda, atau anda boleh belajar cukup untuk mendapatkan pekerjaan yang dilakukan. Adalah berguna untuk mengetahui seseorang yang pintar yang gembira menjawab banyak soalan mengenai topik ini, atau mempunyai buku yang baik di CSS (contohnya, Anthology CSS SitePoint: 101 Tips, Trik & Hacks

).

Rajah 3.7. Permulaan graf bar kami

Sekarang bahawa CSS kami berada di tempat, kami dapat melihat graf bar dalam paparan aplikasi kami, seperti yang ditunjukkan oleh Rajah 3.7.

Menghentikan aplikasi

Tindakan akhir kaedah PollServerTart, selepas mendapatkan aplikasi berjalan, adalah untuk memanggil ToggleAppStatus untuk menukar penampilan permohonan itu. ToggleAppStatus mengubah paparan status ke status aplikasi: berjalan, menukar butang mula ke butang berhenti, dan melampirkan kaedah PollServerStop ke acara onclick butang. Kaedah PollServerStop menghentikan proses pengundian yang berterusan, kemudian bertukar -tukar aplikasi supaya ia kelihatan seperti ia dihentikan dengan betul:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kod ini menggunakan semula kaedah Stoppoll yang kami tambahkan sebelum ini dalam bab ini. Pada masa ini, semua kaedah itu adalah membatalkan permintaan HTTP semasa, yang baik semasa kami mengendalikan masa tamat. Walau bagaimanapun, kaedah ini perlu mengendalikan dua senario lain juga.

yang pertama dari senario ini berlaku apabila kaedah dipanggil semasa selang pengundian (iaitu, selepas kami menerima respons kepada permintaan HTTP, tetapi sebelum permintaan seterusnya dihantar). Dalam senario ini, kita perlu membatalkan panggilan tertunda ke dopoll.

Senario kedua bahawa kaedah ini mesti dapat mengendalikan timbul apabila Stoppoll dipanggil selepas ia telah menghantar permintaan, tetapi sebelum ia menerima respons. Dalam senario ini, pengendali masa tamat perlu dibatalkan.

Semasa kami menjejaki ID selang kedua -dua panggilan, kami boleh mengubah suai Stoppoll untuk mengendalikan senario ini dengan dua panggilan ke ClearTimeout:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Sekarang, anda sepatutnya dapat berhenti dan memulakan proses pengundian hanya dengan mengklik butang Start/Stop di bawah graf bar.

Pemberitahuan status

Keupayaan Ajax untuk mengemas kini kandungan secara tidak segerak, dan hakikat bahawa kemas kini hanya boleh menjejaskan kawasan kecil halaman, membuat paparan pemberitahuan status sebagai bahagian kritikal dari reka bentuk dan pembangunan aplikasi Ajax. Lagipun, pengguna aplikasi anda perlu tahu apa yang dilakukan oleh aplikasinya.

Kembali pada hari -hari lama pembangunan web, apabila keseluruhan halaman terpaksa dimuat semula untuk mencerminkan sebarang perubahan pada kandungannya, ia adalah jelas kepada pengguna akhir apabila aplikasi berkomunikasi dengan pelayan. Tetapi aplikasi web Ajax kami boleh bercakap dengan pelayan di latar belakang, yang bermaksud bahawa pengguna tidak melihat muat semula halaman lengkap yang akan menunjukkan bahawa sesuatu sedang berlaku.

Jadi, bagaimanakah pengguna aplikasi Ajax anda tahu bahawa halaman tersebut berkomunikasi dengan pelayan? Nah, bukannya dunia berputar lama atau animasi bendera melambai yang dipaparkan dalam krom penyemak imbas, aplikasi Ajax biasanya memberitahu pengguna bahawa pemprosesan sedang dijalankan dengan bantuan animasi kecil atau peralihan visual. Biasanya dicapai dengan CSS, peralihan ini menangkap mata pengguna - tanpa mengganggu! - dan memberi petunjuk tentang apa yang dilakukan oleh permohonan itu. Aspek penting dalam reka bentuk aplikasi Ajax yang baik adalah pembangunan pemberitahuan seperti ini.

Animasi status

Oleh kerana kami sudah ada di bahagian atas aplikasi kami bar kecil yang memberitahu pengguna jika aplikasinya berjalan atau dihentikan, ini adalah tempat yang cukup logik untuk memaparkan maklumat status yang lebih sedikit.

Animasi seperti bola berpusing atau anjing yang sedang berjalan adalah cara yang baik untuk menunjukkan bahawa aplikasi sibuk - secara amnya, anda akan mahu memaparkan imej yang menggunakan pergerakan untuk menunjukkan aktiviti. Walau bagaimanapun, kami tidak mahu menggunakan isyarat yang akan menarik perhatian pengguna dari senarai, atau mendorong orang ramai untuk gangguan kerana mereka cuba membaca hasilnya, jadi kami hanya akan pergi dengan animasi yang perlahan dan berdenyut yang ditunjukkan dalam Rajah 3.8.

Animasi ini mempunyai kelebihan tambahan yang ringan dan mudah dilaksanakan dalam CSS - tiada pemain Flash diperlukan, dan tidak ada imej GIF yang besar untuk memuat turun bingkai dengan bingkai yang membosankan.

sebelah kanan bar putih adalah ruang yang tidak digunakan, yang menjadikannya tempat yang ideal untuk pemberitahuan semacam ini: ia berada di bahagian atas antara muka pengguna, jadi mudah dilihat, tetapi ia berada di sebelah kanan, jadi ia keluar dari cara orang yang cuba membaca senarai hasil.

Rajah 3.8. Animasi Status Pulsing kami
Untuk menjadi tuan rumah animasi ini, kami akan menambah div dengan ID PollingMessage tepat di bawah Div Mesej Status dalam dokumen kami:

tambahkan peraturan CSS ke lembaran gaya anda untuk meletakkan div ini:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Animasi ini kini diposisikan di sebelah kanan halaman.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Apabila anda membuka halaman dalam penyemak imbas anda, anda tidak akan dapat melihat animasi - ia bukan apa -apa tetapi kotak putih pada latar belakang putih pada masa ini. Sekiranya anda ingin, tambahkan beberapa kandungan untuk mengundi untuk melihat di mana ia diposisikan.

setInterval dan kehilangan skop

SetInterval JavaScript adalah cara yang jelas dan mudah untuk mengendalikan tugas yang berlaku berulang kali - misalnya, untuk mengawal animasi berdenyut.

semua gyrations CSS dengan setInterval menghasilkan beberapa kod yang agak menarik dan besar. Jadi, seperti yang saya nyatakan sebelum ini, masuk akal untuk meletakkan kod untuk animasi status ke dalam kelasnya sendiri - status - yang kita boleh merujuk dan menggunakan dari kelas monitor.

Beberapa pemaju pintar yang membaca ini mungkin telah menebak bahawa setInterval mengalami masalah kehilangan skop yang sama seperti setTimeout: kata kunci objek ini hilang. Oleh kerana kita perlu berurusan dengan hanya satu animasi status dalam aplikasi pemantauan kami, masuk akal untuk mengambil pendekatan yang sesuai, dan menjadikan kelas status kami Singleton, seperti yang kita lakukan untuk kelas monitor.

Menyediakan status

mari kita mulakan dengan menambahkan beberapa sifat ke status status yang telah kami tulis, untuk mendapatkan kod sebelumnya yang berfungsi:

Objek Status mempunyai empat sifat:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

• Properti Curropacity menjejaki kelegapan div PollingMessage. Kami menggunakan setInterval untuk mengubah kelegapan div ini dengan cepat, yang menghasilkan kesan berdenyut dan pudar.
• Harta Proc adalah suis tiga negeri yang menunjukkan sama ada permintaan HTTP sedang berjalan, telah selesai, atau telah dibatalkan sebelum siap.
• Harta ProcInterval adalah untuk menyimpan ID selang untuk proses setInterval yang mengawal animasi. Kami akan menggunakannya untuk menghentikan animasi berjalan.
• Harta Div adalah rujukan kepada Div PollingMessage. Kelas status memanipulasi sifat CSS div div untuk membuat animasi.

Inisialisasi

Kaedah init diperlukan untuk mengikat harta div untuk mengundi:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kaedah init juga mengandungi panggilan kepada kaedah yang bernama Setalpha, yang diperlukan untuk penyelesaian IE yang akan kita lihat sedikit kemudian.

kebocoran memori Internet Explorer

rujukan elemen dom (pembolehubah yang menunjukkan unsur div, td, atau span dan sebagainya) yang digunakan sebagai sifat kelas adalah penyebab kebocoran memori yang terkenal di Internet Explorer. Sekiranya anda memusnahkan contoh kelas tanpa membersihkan sifat -sifat tersebut (dengan menetapkannya kepada batal), ingatan tidak akan ditebus.

mari kita tambahkan ke Kaedah Pembersihan Kelas A Monitor kami yang mengendalikan acara Window.

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Kaedah ini membersihkan kelas status dengan memanggil kaedah pembersihan kelas dan menetapkan harta Reqstatus ke NULL:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Kaedah pembersihan dalam kelas status adakah pengemasan IE:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Jika kita tidak menetapkan rujukan div itu kepada NULL, Internet Explorer akan menyimpan ingatan yang diperuntukkan kepada pembolehubah itu dalam cengkaman kematian, dan anda akan melihat belon menggunakan memori setiap kali anda memuat semula halaman.

Pada hakikatnya, ini tidak akan menjadi masalah untuk aplikasi kecil kami, tetapi ia boleh menjadi isu yang serius dalam aplikasi web besar yang mempunyai banyak DHTML. Adalah baik untuk masuk ke dalam kebiasaan membersihkan rujukan DOM dalam kod anda supaya ini tidak menjadi masalah untuk anda.

Kaedah DisplayOpacity

Sekeping kod pusat dalam kelas status hidup dalam kaedah DisplayOpacity. Ini mengandungi kod khusus penyemak imbas yang diperlukan untuk mengubah sifat CSS yang sesuai di Div PollingMessage. Inilah kod:

Example 2.3. ajax.js (excerpt)  <br>
  <br>
this.doReq = function() {  <br>
  if (!this.init()) {  <br>
    alert('Could not create XMLHttpRequest object.');  <br>
    return;  <br>
  }  <br>
};

Properti Curropacity objek mewakili kelegapan yang mana div pengundian harus ditetapkan. Pelaksanaan kami menggunakan skala integer antara 0 hingga 100, yang digunakan oleh Internet Explorer, dan bukannya skala pecahan dari sifar ke satu yang diharapkan oleh Mozilla dan Safari. Pilihan ini hanyalah keutamaan peribadi; Jika anda lebih suka menggunakan nilai pecahan, dengan segala cara lakukan.

Dalam kaedah ini, anda akan melihat ujian untuk Document.All - harta yang disokong hanya oleh IE dan Opera - dan ujian untuk Window.Opera, yang, tidak mengejutkan, hanya disokong oleh Opera. Oleh itu, hanya IE yang harus melaksanakan klausa jika ini jika pernyataan. Di dalam cawangan IE ini, Pernyataan IF, harta Alpha.Opacity proprietari digunakan untuk menetapkan kelegapan, sementara dalam klausa lain, kami menggunakan harta Mozopacity yang lebih tua, yang disokong oleh pelayar yang berpangkalan di Mozilla yang lebih tua.

Akhirnya, kaedah ini menetapkan kelegapan dalam cara yang mematuhi piawaian: menggunakan harta kelegapan, yang akhirnya akan disokong dalam semua pelayar paman piawai.

iaitu gotchas

Internet Explorer Version 6, sebagai pelayar yang lebih tua, mengalami beberapa isu ketika cuba membuat perubahan CSS berasaskan opacity.

Untungnya, yang pertama ini mudah diselesaikan dengan tambahan kepada peraturan CSS pengundian kami:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Penambahan harta latar belakang membetulkan masalah khusus pertama dengan Internet Explorer. Kita mesti menetapkan warna latar belakang elemen jika kita mahu menukar kelegapannya dalam IE, atau teks akan dipaparkan dengan tepi bergerigi. Perhatikan bahawa penetapan latar belakang kepada telus tidak akan berfungsi: ia mesti ditetapkan pada warna tertentu.

Masalah kedua adalah sedikit lebih rumit jika anda mahu fail CSS anda sah. IE tidak akan membiarkan anda menukar gaya.alpha.Opacity kecuali ia diisytiharkan dalam helaian gaya terlebih dahulu. Sekarang, jika anda tidak keberatan menghalang helaian gaya anda daripada diluluskan oleh Validator W3C, mudah untuk menyelesaikan masalah ini dengan menambahkan perisytiharan lain:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Penyelesaian yang lebih baik daripada memasukkan maklumat gaya khusus IE ke dalam lembaran gaya global anda adalah dengan menggunakan JavaScript untuk menambah perisytiharan itu ke atribut gaya PollingMessage Div dalam IE sahaja. Itulah kaedah setalpha yang dipanggil dalam pencapaian init. Inilah kod untuk kaedah itu:

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Kod ini, yang hanya dijalankan di Internet Explorer, menggunakan array Document.stylesheets untuk meleleh melalui setiap helaian gaya yang dikaitkan dengan halaman semasa. Ia mengakses peraturan dalam setiap helaian gaya menggunakan harta Peraturan, dan mendapati gaya yang kami inginkan dengan melihat harta sel terpilih. Sebaik sahaja ia mempunyai gaya yang betul dalam pelbagai peraturan, ia memberikan sifat penapis nilai yang diperlukan untuk mengubah kelegapan.

Opacity in Opera?

Malangnya, pada masa penulisan, walaupun versi terbaru Opera (versi 8.5) tidak menyokong kelegapan CSS, jadi animasi seperti itu tidak berfungsi dalam penyemak imbas itu. Walau bagaimanapun, ciri ini dirancang untuk Opera Versi 9.

menjalankan animasi

Kod untuk animasi pemprosesan terdiri daripada lima kaedah: tiga yang pertama mengawal animasi "pemprosesan ...", manakala dua lagi mengawal animasi "selesai". Tiga kaedah yang mengawal animasi "pemprosesan ..." adalah:

StartProc, yang menetapkan "pemprosesan ..." animasi dan jadual berulang panggilan ke DOPROC dengan setInterval
DOPROC, yang memantau sifat kelas ini dan menetapkan bingkai semasa "pemprosesan ..." animasi yang sesuai
stopproc, yang menandakan bahawa animasi "pemprosesan ..." harus berhenti

Dua yang mengawal animasi "selesai" adalah:

startdone menetapkan animasi "selesai" dan jadual berulang panggilan ke Dodone dengan setInterval

• Dodone menetapkan bingkai semasa animasi "selesai" dan menamatkan animasi setelah selesai
Memulakannya

menetapkan animasi dan memulakannya adalah pekerjaan untuk kaedah StartProc:

Selepas menetapkan harta Proc ke Proc (pemprosesan), kod ini memanggil kaedah setDisplay, yang menetapkan warna dan kandungan div pollingMessage. Kami akan melihat dengan lebih dekat di SetDisplay seterusnya.

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Setelah kod menetapkan warna dan kandungan div PollingMessage, ia memulakan kelegapan div ke 100 (sepenuhnya legap) dan memanggil paparan untuk membuat tetapan ini berkuatkuasa.

Akhirnya, kaedah ini memanggil setInterval untuk menjadualkan langkah seterusnya proses animasi. Perhatikan bahawa, seperti dengan setTimeout, panggilan setInterval mengembalikan ID selang. Kami menyimpannya di harta procinterval supaya kami dapat menghentikan proses kemudian.

kedua -dua animasi "pemprosesan ..." dan "selesai" berkongsi kaedah setDisplay:

Oleh kerana satu -satunya perbezaan di antara "pemprosesan ..." dan "dilakukan" keadaan div pemungutan yang div adalah warna dan teksnya, masuk akal untuk menggunakan fungsi umum ini untuk bertukar -tukar antara kedua -dua negeri div pollingmessage. Warna -warna dikawal dengan memberikan kelas ke Div PollingMessage, jadi kami perlu menambah peraturan kelas CSS untuk kelas yang selesai dan pemprosesan ke lembaran gaya kami:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

menjadikannya berhenti

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Menghentikan animasi dengan lancar memerlukan beberapa masa tertentu. Kami tidak mahu animasi berhenti tiba -tiba tepat di tengah -tengah nadi. Kami mahu menghentikannya dalam rehat semulajadi, apabila "pemprosesan ..." kelegapan imej turun ke sifar.

Jadi kaedah StopPROC untuk menghentikan animasi sebenarnya tidak menghentikannya - ia hanya menetapkan bendera untuk memberitahu proses animasi bahawa sudah tiba masanya untuk berhenti apabila ia mencapai titik yang mudah. Ini banyak seperti panggilan telefon yang diterima oleh banyak pengaturcara pada penghujung hari dari isteri dan suami yang mengingatkan mereka untuk pulang ke rumah ketika mereka sampai ke titik berhenti logik dalam kod mereka.

Oleh kerana tindakan yang sangat sedikit berlaku di sini, kaedahnya agak pendek:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Kaedah ini perlu membezakan antara dua jenis berhenti: permintaan yang berjaya diselesaikan (selesai) dan permintaan dari pengguna untuk menghentikan permohonan (abort).

Kaedah DOPROC menggunakan bendera ini untuk mengetahui sama ada untuk memaparkan mesej "Selesai", atau hanya untuk berhenti.

menjalankan animasi dengan dopproc

Kaedah DOPROC, yang dipanggil pada selang 90 milisaat, mengubah kelegapan div pemungutan untuk menghasilkan kesan berdenyut animasi pemprosesan. Inilah kod:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Kaedah ini mati mudah - tujuan utamanya adalah untuk mengurangkan kelegapan div pengundian sebanyak 10% setiap kali ia dipanggil.

Yang pertama jika pernyataan melihat untuk melihat apakah div telah pudar sepenuhnya. Sekiranya ia ada, dan animasi masih sepatutnya berjalan, ia menetapkan semula kelegapan kepada 100 (sepenuhnya legap). Melaksanakan kod ini setiap 90 milisaat menghasilkan kesan yang lancar di mana pungutan pungutan memudar, muncul semula, dan memudar lagi - kesan berdenyut biasa yang menunjukkan bahawa aplikasi itu sibuk melakukan sesuatu.

Jika animasi tidak sepatutnya terus berjalan, kami menghentikan animasi dengan memanggil ClearInterval, maka, jika harta Proc dilakukan, kami mencetuskan animasi "selesai" dengan panggilan untuk startdone.

Memulakan animasi "Selesai" dengan Startdone

Kaedah Startdone berfungsi dengan tujuan yang sama untuk animasi "Selesai" bahawa kaedah StartProc berfungsi untuk animasi "pemprosesan ...". Ia kelihatan sangat mirip dengan StartProc juga:

Kali ini, kita lulus benar kepada setDisplay, yang akan mengubah teks menjadi "dilakukan" dan warna ke hijau.

Example 2.1. ajax.js (excerpt)  <br>
  <br>
function Ajax() {  <br>
  this.req = null;  <br>
  this.url = null;  <br>
  this.method = 'GET';  <br>
  this.async = true;  <br>
  this.status = null;  <br>
  this.statusText = '';  <br>
  this.postData = null;  <br>
  this.readyState = null;  <br>
  this.responseText = null;  <br>
  this.responseXML = null;  <br>
  this.handleResp = null;  <br>
  this.responseFormat = 'text', // 'text', 'xml', or 'object'  <br>
  this.mimeType = null;  <br>
}

Kami kemudian menyediakan panggilan ke Dodone dengan setInterval, yang sebenarnya melakukan fadeout.

The Final Fade

Kod untuk Dodone jauh lebih mudah daripada kod untuk DOPROC. Ia tidak perlu memproses secara berterusan sehingga diberitahu untuk berhenti, seperti DoProc. Ia hanya terus mengurangkan kelegapan div pengundian sebanyak 10% sehingga ia mencapai sifar, kemudian berhenti sendiri. Perkara yang cukup mudah:

Example 2.2. ajax.js (excerpt)  <br>
  <br>
this.init = function() {  <br>
  if (!this.req) {  <br>
    try {  <br>
      // Try to create object for Firefox, Safari, IE7, etc.  <br>
      this.req = new XMLHttpRequest();  <br>
    }  <br>
    catch (e) {  <br>
      try {  <br>
        // Try to create object for later versions of IE.  <br>
        this.req = new ActiveXObject('MSXML2.XMLHTTP');  <br>
      }  <br>
      catch (e) {  <br>
        try {  <br>
          // Try to create object for early versions of IE.  <br>
          this.req = new ActiveXObject('Microsoft.XMLHTTP');  <br>
        }  <br>
        catch (e) {  <br>
          // Could not create an XMLHttpRequest object.  <br>
          return false;  <br>
        }  <br>
      }  <br>
    }  <br>
  }  <br>
  return this.req;  <br>
};

Rajah 3.9. Permohonan dengan penunjuk status berdenyut
Akhirnya, kami bersedia untuk menguji kod ini dalam penyemak imbas kami. Buka appmonitor2.html Di penyemak imbas anda, klik butang Mula, dan anda harus melihat pemprosesan berdenyut ... mesej berhampiran sudut kanan atas viewport penyemak imbas, seperti yang ditunjukkan dalam Rajah 3.9.

Berhati -hati dengan selang tinjauan!

Sekarang kita mempunyai animasi yang berjalan di halaman, kita perlu berhati -hati bahawa kita tidak memulakan animasi lagi sebelum yang sebelumnya berhenti. Atas sebab ini, sangat disyorkan bahawa anda tidak menetapkan poll_interval kepada apa -apa kurang dari dua saat.

Styling the Monitor

Sekarang bahawa kami telah mendapat aplikasi kami dan berjalan, mari kita gunakan CSS untuk menjadikannya kelihatan baik. Kami perlu menambah markup berikut untuk mencapai susun atur yang dikehendaki:

function HelloWorld() {  <br>
  this.message = 'Hello, world!';  <br>
  this.sayMessage = function() {  <br>
    window.alert(this.message);  <br>
  };  <br>
}

Seperti yang anda lihat, kami telah menambah tiga div dari mana kami boleh menggantung gaya kami, dan garis rehat untuk membersihkan mesej status aplikasi dan animasi yang terapung. CSS yang lengkap untuk halaman ini adalah seperti berikut; Antara muka gaya ditunjukkan dalam Rajah 3.10:

var hw = new HelloWorld();  <br>
hw.sayMessage();  <br>
hw.message = 'Goodbye';  <br>
hw.sayMessage();

Rajah 3.10. Monitor aplikasi yang lengkap

Ringkasan

Aplikasi kerja pertama kami menunjukkan bagaimana Ajax boleh digunakan untuk membuat pelbagai permintaan ke pelayan tanpa pengguna yang pernah meninggalkan halaman yang dimuatkan sekarang. Ia juga memberikan gambaran yang agak realistik tentang jenis kerumitan yang perlu kita hadapi ketika melakukan pelbagai tugas secara tidak segerak. Contoh yang baik dari kerumitan ini adalah penggunaan setTimeout kami untuk masa permintaan XMLHTTPREQUEST. Contoh ini memberikan peluang yang baik untuk meneroka beberapa masalah biasa yang akan anda hadapi semasa anda membangunkan aplikasi Ajax, seperti kehilangan skop dan waktu tamat sambungan, dan menyediakan penyelesaian praktikal untuk membantu anda menangani mereka.

Itu untuk petikan ini dari

Bina Aplikasi Web AJAX anda sendiri - Jangan lupa, anda boleh memuat turun artikel ini dalam format .pdf. Buku ini mempunyai lapan bab secara keseluruhan, dan pada akhirnya, pembaca akan membina banyak aplikasi web berfungsi sepenuhnya termasuk permainan catur dalam talian yang banyak pemain boleh bermain dalam masa nyata - jadual kandungan buku mempunyai butiran lengkap.

Soalan Lazim (Soalan Lazim) Mengenai Membina Aplikasi Web Ajax

Apakah komponen utama Ajax dalam pembangunan web? Komponen utama AJAX termasuk HTML (atau XHTML) dan CSS untuk menyampaikan maklumat, Model Objek Dokumen (DOM) untuk paparan dan interaksi yang dinamik dengan data, XML untuk membawa data, XSLT untuk memanipulasi data, Pengalaman pengguna di laman web? Ia membolehkan laman web untuk berkomunikasi dengan pelayan di latar belakang, tanpa memerlukan tambah nilai halaman penuh untuk setiap permintaan. Ini bermakna pengguna boleh terus berinteraksi dengan laman web sementara pelayan sedang memproses permintaan, yang membawa kepada pengalaman pengguna yang lebih lancar dan lebih lancar.

Apakah peranan objek XMLHTTPREQUEST dalam AJAX? Ia menyediakan cara untuk bertukar data dengan pelayan dan mengemas kini bahagian halaman web tanpa memuatkan keseluruhan halaman. Ia digunakan untuk menghantar permintaan http atau https terus ke pelayan web dan memuatkan data tindak balas pelayan terus ke skrip. teks. Json, khususnya, sering digunakan dalam Ajax kerana mudah untuk bekerja di JavaScript dan boleh menjadi lebih efisien daripada XML. Ini termasuk aplikasi seperti hasil carian hidup, medan bentuk automatik, peta interaktif, dan kemas kini kandungan dinamik. Suapan media sosial, pelanggan e-mel, dan tapak e-dagang sering menggunakan Ajax untuk memberikan pengalaman pengguna yang lancar dan interaktif. Ini termasuk isu -isu dengan keserasian penyemak imbas, kesukaran dengan debugging dan ujian, dan cabaran dengan pengoptimuman enjin carian (SEO) sebagai enjin carian mungkin berjuang untuk mengindeks kandungan Ajax. Di samping itu, kerana Ajax bergantung kepada JavaScript, pengguna yang telah melumpuhkan JavaScript dalam penyemak imbas mereka tidak akan dapat menggunakan ciri-ciri berasaskan AJAX. Ini bermakna membina laman web teras anda dengan HTML, kemudian meningkatkannya dengan fungsi AJAX untuk pengguna yang telah diaktifkan oleh JavaScript. Bagi SEO, pertimbangkan untuk menggunakan penyampaian sisi pelayan untuk menyampaikan halaman yang diberikan sepenuhnya ke enjin carian, sementara masih memberikan pengalaman yang cepat, yang didorong oleh AJAX untuk pengguna. Adalah penting untuk mengesahkan dan membersihkan semua data sebelum memprosesnya, dan menggunakan kaedah yang selamat untuk menghantar data, seperti HTTPS. Selain itu, kerana Ajax boleh mendedahkan lebih banyak kerja dalaman aplikasi anda ke sisi klien, penting untuk memastikan operasi sensitif dilindungi di sisi pelayan. Rangka kerja ini sering memberikan abstraksi mereka sendiri untuk membuat permintaan AJAX, tetapi anda juga boleh menggunakan objek XMLHTTPREQUEST asli atau perpustakaan lain seperti jQuery atau axios.

Bagaimanakah saya boleh debug aplikasi Ajax?

Debugging Aplikasi Ajax boleh menjadi lebih kompleks daripada menyahpepijat aplikasi web tradisional kerana sifat asynchronous Ajax. Walau bagaimanapun, kebanyakan pelayar moden menyediakan alat pemaju yang membolehkan anda memeriksa permintaan dan respons AJAX, memantau aktiviti rangkaian, dan melangkah melalui kod JavaScript. Di samping itu, banyak perpustakaan dan kerangka JavaScript menyediakan alat dan kaedah untuk mengendalikan kesilapan dan pengecualian Ajax.

Atas ialah kandungan terperinci Bina Aplikasi Web Ajax anda sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!