Ajax adalah alat utama dalam pengembangan aplikasi web modern. Ini memungkinkan Anda untuk mengirim dan menerima data secara tidak sinkron ke server dan kemudian menguraikannya di JavaScript. Ajax adalah singkatan dari JavaScript Asynchronous dan XML (Asynchronous JavaScript dan XML).
Nama spesifikasi inti AJAX diwarisi dari objek JavaScript yang digunakan untuk membuat dan memulai permintaan: xmlhttprequest. Ada dua tingkat spesifikasi ini. Semua browser arus utama mengimplementasikan level pertama, yang mewakili tingkat fungsionalitas dasar. Level kedua memperluas spesifikasi awal, menggabungkan acara tambahan dan beberapa fitur untuk membuatnya lebih mudah untuk berkolaborasi dengan elemen formulir, dan mendukung beberapa spesifikasi terkait.
1. Ajax dimulai
Kunci Ajax terletak pada objek XMLHTTPREQUEST, dan cara untuk memahami objek ini adalah dengan melihat contoh. Kode berikut menunjukkan penggunaan sederhana dari objek XMLHTTPREQUEST:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title></head><body><div> <button>apples</button> <button>cherries</button> <button>bananas</button></div><div id="target"> Press a button</div><script type="application/javascript"> var Tombol = Document.GetElementsByTagname ("Tombol"); untuk (var i = 0; i <tombol } // Script akan memanggil fungsi ini untuk menanggapi fungsi klik tombol Kontrol Tombol StandebuttonPress (e) {// Buat objek XMLHTTPREQuest baru var httpRequest = xmlhttpRequest () baru; // Tetapkan event handler untuk acara OnReadyStateChange httpRequest.onReadyStateChange = handleresponse; // Gunakan metode terbuka untuk menentukan metode HTTP dan URL untuk meminta (yaitu, beri tahu objek HTTPRequest apa yang ingin Anda lakukan) httprequest.open ("dapatkan", e.target.innerhtml+". Html"); // Tidak ada data yang dikirim ke server di sini, sehingga metode Kirim tidak memiliki parameter yang tersedia httpRequest.send (); } // Memproses respons // Setelah skrip memanggil metode Kirim, browser akan mengirim permintaan ke server di latar belakang. Karena permintaan diproses di latar belakang, Ajax bergantung pada acara untuk menginformasikan kemajuan permintaan. function handleresponse (e) {// Ketika peristiwa OnReadyStateChange dipicu, browser akan meneruskan objek acara ke fungsi penangan yang ditentukan, dan properti target akan diatur ke xmlhttpRequest yang terkait dengan (e.target.readystate == xmlhtttttpRequest.done if (e.target.readystate == xmlhtttttpRequest.done if (e.target.readystate == xmlhttttprequest.done & e.pepertate. document.getElementById ("target"). innerHtml = e.target.Responsetext; // Tampilkan konten dokumen yang diminta}} </script> </body> </html>Tiga dokumentasi tambahan sangat sederhana:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> apel </iteme> <tyle> img {float: kiri; padding: 2px; margin: 5px; border: medium double black; latar belakang-warna: lightgrey; Lebar: 100px; Tinggi: 100px;} </style> </head> <body> <p> <img src = "../ img/show-page/img_apples.jpg"/> halaman untuk apel. </p> </body> </html>Efeknya ditunjukkan pada gambar di bawah ini:
Saat pengguna mengklik setiap tombol buah, browser mengeksekusi secara tidak sinkron dan mengambil dokumen yang diminta, sedangkan dokumen utama tidak dimuat ulang. Ini adalah perilaku AJAX yang khas.
2. Menggunakan Acara Ajax
Setelah membuat dan menjelajahi contoh sederhana, Anda dapat mulai menggali fitur yang didukung oleh objek XMLHTTPREQUEST dan cara menggunakannya dalam permintaan Anda. Titik awal adalah peristiwa tambahan yang ditentukan dalam spesifikasi tingkat kedua:
Sebagian besar acara ini dipicu pada titik waktu tertentu selama permintaan. Kedua acara tersebut adalah pengecualian, ReadyStateChange dan Progress, yang dapat dipicu beberapa kali untuk memberikan pembaruan kemajuan.
Ketika acara ini dijadwalkan, browser menggunakan objek acara reguler untuk acara ReadyStateChange dan objek Progresevent untuk acara lain. Objek ProgressEvent mendefinisikan semua anggota objek acara dan menambahkan anggota yang dijelaskan dalam gambar berikut:
Kode berikut menunjukkan cara menggunakan acara ini:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Contoh </iteme> <tyle> tabel {margin: 10px; border-collapse: collapse; float: left;} div {margin: 10px;} td, th {padding: 4px;} </tyle> </head> <body> <div> <button> apel </button> <button> CHYRIES </button> <button> Pisang </button> </Div> <TABLE ID = "Acara"> <button> type = "Application/JavaScript"> var Tombol = document.geteLementsByTagname ("tombol"); untuk (var i = 0; i <tombol } var httpRequest; Function stallebuttonpress (e) {cleareventDetails (); httpRequest = xmlhttpRequest () baru; httprequest.onreadystatechange = handleresponse; httpRequest.onError = handleError; httpRequest.onload = handleLoad ;; httpRequest.onloadEnd = handleLoadend; httprequest.onloadStart = handleLoadStart ;; httpRequest.onprogress = handleprogress; httprequest.open ("get", e.target.innerHtml+". html"); httpRequest.send (); } function handleresponse (e) {displayEventDetails ("readyState ("+httpRequest.readystate+")") if (e.target.readyState == xmlHttpRequest.done && e.target.status == 200) {document.getelementById.done && e.target.status == 200) {document.getelementByid.done. " }} Fungsi handleError (e) {displayEventDetails ("error", e);} function handleload (e) {displayEventDetails ("load", e);} function handleloadend (e) {displayEventDetails ("loadEnd", e);} function handleloadEnd (e) {e) {"loadEnd", e);} function (e) {e) {e) {"loadEnd (e); {e) {e) {e) {e) {e) {e), e); handleLoadStart (e) {displayEventDetails ("loadStart", e);} fungsi handleprogress (e) {displayEventDetails ("progress", e);} function cleareVentDetails () {document.getElementById ("event"). innerhtml =) "<tr> <t th> event </t> <th> lengthcomputable </th> <th> dimuat </t> <th> total </t>"; } function displayEventDetails (eventName, e) {if (e) {document.geteLementById ("event"). innerHtml+= "<tr> <td>"+eventName+"</td> <td>"+e.lengthComputable+"</td> <td>"+e.Loaded+E. e.total+"</td> </tr>"; } else {document.getElementById ("events"). innerHtml+= "<tr> <td>"+eventName+"</td> <td> na </td> <td> na </td> <td> na </td> <td> na </td> </td>; }} </script> </body> </html>Ini adalah variasi dari contoh sebelumnya, mendaftarkan penangan untuk beberapa acara dan membuat catatan untuk setiap acara yang diproses dalam elemen tabel. Dari gambar berikut, Anda dapat melihat bagaimana browser Firefox memicu peristiwa ini.
3. Tangani kesalahan
Dua jenis kesalahan harus diperhatikan saat menggunakan AJAX. Perbedaan di antara mereka berasal dari perspektif yang berbeda.
Jenis kesalahan pertama adalah masalah yang terlihat dari perspektif objek XMLHTTPREQUEST: Beberapa faktor mencegah permintaan dari dikirim ke server. Misalnya, DNS tidak dapat menyelesaikan nama host, permintaan koneksi ditolak, atau URL tidak valid.
Jenis masalah kedua adalah masalah yang dilihat dari perspektif aplikasi, bukan objek XmlHttpRequest. Mereka terjadi ketika permintaan berhasil dikirim ke server, yang menerima permintaan, memproses dan menghasilkan respons, tetapi responsnya tidak menunjukkan apa yang Anda harapkan. Misalnya, jika URL yang diminta tidak ada, masalah semacam ini terjadi.
Ada tiga cara untuk mengatasi kesalahan ini, seperti yang ditunjukkan dalam kode berikut:
3.1 Penanganan Kesalahan Pengaturan
Jenis masalah pertama yang perlu ditangani adalah memberikan data yang salah ke objek XMLHTTPRESQUEST, seperti URL yang salah. Mereka sangat rentan terjadi ketika menghasilkan URL berdasarkan input pengguna. Untuk mensimulasikan masalah semacam ini, dokumen di atas memiliki tombol yang menambahkan tag buruk URL (URL yang salah). Menekan tombol ini akan memanggil metode terbuka dalam bentuk berikut:
httprequest.open ("get", "http: //")
Ini adalah kesalahan yang mencegah permintaan dari dieksekusi, dan kesalahan dilemparkan ketika peristiwa seperti ini terjadi pada objek XMLHTTPREQUEST. Ini berarti bahwa Pernyataan Cobalah ... Tangkap diperlukan untuk mengelilingi kode yang menetapkan permintaan, seperti ini:
Coba {... httprequest.open ("get", "http: //") ... httprequest.send (); } catch (error) {displayErrormSg ("coba/catch", error.message)}Klausa tangkapan memberi Anda kesempatan untuk pulih dari kesalahan. Anda dapat memilih untuk meminta nilai pengguna, atau kembali ke URL default, atau cukup membuang permintaan. Dalam contoh ini, fungsi DisplayErrormSG dipanggil untuk menampilkan pesan kesalahan.
3.2 Kesalahan Permintaan Pemrosesan
Jenis kesalahan kedua terjadi ketika permintaan telah dihasilkan tetapi ada kesalahan lain. Untuk mensimulasikan jenis masalah ini, tombol berlabel host buruk (kesalahan host) ditambahkan dalam contoh. Ketika tombol ini ditekan, metode terbuka akan dipanggil untuk mengakses URL yang tidak tersedia:
httprequest.open ("get", http: //www.ycdoitt.com/nopage.html)Ada dua masalah dengan URL ini. Masalah pertama adalah bahwa nama host tidak dapat diselesaikan oleh DNS, sehingga browser tidak dapat menghasilkan koneksi server. Masalah ini tahu bahwa objek XMLHTTPRequest hanya menjadi jelas ketika mulai menghasilkan permintaan, sehingga menandakan kesalahan dalam dua cara. Jika Anda mendaftarkan pendengar untuk acara kesalahan, browser akan mengirim objek acara ke pendengar Anda. Berikut adalah fungsi yang digunakan dalam contoh:
Function HandleError (e) {displayErrormSg ("ERROR EVENT", httpRequest.Status + httpRequest.statustext); }Ketika kesalahan tersebut terjadi, tingkat informasi yang dapat diperoleh dari objek XmlHttpRequest tergantung pada browser. Sayangnya, dalam kebanyakan kasus, status dengan nilai 0 dan nilai statustext kosong akan diperoleh.
Masalah kedua adalah bahwa URL dan permintaan yang dihasilkan memiliki sumber yang berbeda, yang tidak diizinkan secara default. Anda biasanya hanya dapat mengirim permintaan AJAX ke URL asal-kata yang memuat skrip. Ketika browser melaporkan masalah ini, kesalahan dapat dilemparkan atau peristiwa kesalahan dapat dipicu. Browser yang berbeda menanganinya secara berbeda. Browser yang berbeda juga memeriksa sumber pada titik waktu yang berbeda, yang berarti bahwa browser mungkin tidak selalu terlihat menyoroti masalah yang sama. Berbagi sumber daya lintas asal dapat digunakan untuk memotong pembatasan homolog.
3.3 Menangani Kesalahan Aplikasi
Jenis kesalahan terakhir terjadi ketika permintaan berhasil selesai (dari perspektif objek XMLHTTPREQUEST), tetapi tidak mengembalikan data yang Anda inginkan. Untuk membuat masalah seperti itu, tambahkan tombol dengan label mentimun pada contoh di atas. Menekan tombol ini akan menghasilkan URL permintaan yang mirip dengan tombol apel, ceri, dan pisang, tetapi dokumen Cucumber.html tidak ada di server.
Tidak ada kesalahan dalam proses ini sendiri (karena permintaan telah selesai), dan perlu untuk menentukan apa yang terjadi berdasarkan atribut status. Saat meminta dokumen yang ada, kode status 404 akan diperoleh, yang berarti bahwa server tidak dapat menemukan dokumen yang diminta. Anda dapat melihat bagaimana contoh menangani kode status selain 200 (artinya ok):
if (httpRequest.Status == 200) {target.innerHtml = httprequest.Responsetext; } else {document.getElementById ("statusMsg"). innerHtml = "status:" + httprequest.status + "" + httprequest.statustext; }Dalam contoh ini, nilai -nilai status dan statustext hanya ditampilkan. Dalam aplikasi nyata, pemulihan perlu dilakukan dengan cara yang bermanfaat dan bermakna (seperti menampilkan konten alternatif atau peringatan pengguna bahwa ada masalah, tergantung pada mana yang lebih cocok untuk aplikasi).
4. Dapatkan dan atur header
Menggunakan objek XMLHTTPREQUEST, Anda dapat mengatur header permintaan yang dikirim ke server dan header dalam respons server.
4.1 Timpa metode HTTP untuk permintaan
Biasanya tidak perlu menambah atau memodifikasi header dalam permintaan AJAX. Browser tahu apa yang harus dikirim, dan server tahu bagaimana merespons. Namun, ada beberapa pengecualian. Yang pertama adalah header X-HTTP-Method-override.
Standar HTTP sering digunakan untuk meminta dan mengirimkan dokumen HTML di Internet, dan mendefinisikan banyak metode. Kebanyakan orang tahu tentang GET dan POST karena mereka adalah yang paling banyak digunakan. Namun, ada metode lain (termasuk put dan hapus) yang digunakan untuk memberi makna pada URL yang diminta ke server, dan penggunaan ini sedang meningkat. Misalnya, jika Anda ingin melihat catatan pengguna, Anda dapat menghasilkan permintaan seperti itu:
httprequest.open ("get", "http: // myserver/records/freeman/adam");Hanya metode HTTP dan URL yang diminta ditampilkan di sini. Agar permintaan ini berfungsi dengan lancar, sisi server harus dapat memahami permintaan dengan aplikasi dan mengubahnya menjadi bagian data yang sesuai untuk dikirim kembali ke server. Jika Anda ingin menghapus data, Anda dapat menulisnya seperti ini:
httprequest.open (" delete ", "http: // myserver/records/freeman/adam");Kuncinya di sini adalah untuk mengekspresikan apa yang Anda ingin server lakukan melalui HTTP, daripada menyandikannya ke dalam URL dalam beberapa cara.
Masalah dengan menggunakan metode HTTP dengan cara ini adalah bahwa banyak teknologi web utama hanya mendukung dan memposting, dan banyak firewall hanya memungkinkan permintaan mendapatkan dan memposting untuk lulus. Ada pendekatan idiomatik untuk menghindari batasan ini, yaitu untuk menggunakan header X-HTTP-Method-override untuk menentukan metode HTTP yang ingin Anda gunakan, tetapi formulir tersebut dipasarkan dan mengirimkan permintaan pos. Demonstrasi kode adalah sebagai berikut:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> contoh </iteme> </adept> <body> <div> <button> apel </button> <button> target </button> </Tombol </Tombol </Tombol </Tombol </Div> <Button> Target = Tombol/Tombol </Tombol </Tombol </Tombol </Button </Div> </Div ID = "Target" document.getElementsbyTagname ("tombol"); untuk (var i = 0; i <tombol } var httpRequest; function stallebuttonpress (e) {httpRequest = new xmlhttpRequest (); httprequest.onreadystatechange = handleresponse; httprequest.open ("get", e.target.innerHtml+". html"); httpRequest.setRequestheader ("x-http-method-override", "delete"); httpRequest.send (); } function handleError (e) {displayErrormSg ("ERROR EVENT", httpRequest.Status+httpRequest.statustext); } function handleresponse () {if (httpRequest.readystate == 4 && httprequest.status == 200) {document.geteLementById ("target"). innerHtml = httpRequest.Responsetext; }} </script> </body> </html>Dalam contoh ini, metode SetRequestHeader pada objek XMLHTTPREQUEST digunakan untuk menunjukkan bahwa permintaan ingin diproses dalam bentuk metode HTTP Delete. Harap dicatat bahwa saya mengatur header ini hanya setelah memanggil metode terbuka. Jika Anda mencoba menggunakan metode SetRequestHeader sebelum metode terbuka, objek XMLHTTPREQUEST melakukan kesalahan.
PS: Timpa HTTP memerlukan kerangka aplikasi web sisi server untuk memahami konvensi X-HTTP-Method-override, dan aplikasi sisi server Anda harus diatur untuk menemukan dan memahami metode HTTP yang kurang.
4.2 Nonaktifkan caching konten
Header berguna kedua yang dapat ditambahkan ke permintaan AJAX adalah kontrol cache, yang sangat berguna saat menulis dan men-debug skrip. Beberapa konten cache browser yang diperoleh melalui permintaan AJAX dan tidak akan memintanya lagi selama sesi penelusuran. Untuk contoh sebelumnya, itu berarti bahwa perubahan pada apel.html, ceries.html dan pisang.html tidak akan segera tercermin di browser. Kode berikut menunjukkan cara mengatur header untuk menghindari ini:
httpRequest = xmlhttpRequest () baru; httprequest.onreadystatechange = handleresponse; httprequest.open ("get", e.target.innerHtml+". html"); httprequest.setRequestheader ("cache-control", "no-cache"); httpRequest.send ();Cara untuk mengatur header sama seperti pada contoh sebelumnya, tetapi kali ini headernya adalah cache-control, dan nilai yang diinginkan tidak ada cache. Setelah menempatkan pernyataan ini, jika konten yang diminta melalui perubahan AJAX, itu akan tercermin pada saat dokumen diminta.
4.3 Baca header respons
Header HTTP yang dikirim oleh server saat menanggapi permintaan AJAX dapat dibaca melalui metode GetResponseader dan GetAllResponseaders. Dalam kebanyakan kasus, Anda tidak perlu peduli tentang apa yang ada di header, karena mereka adalah bagian dari transaksi interaktif antara browser dan server. Kode berikut menunjukkan cara menggunakan properti ini:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta content = "width = device-width, user-scalable = no" name = "viewport" /> <meta name = "author" content = "ye chaoluka" /<viewport "<meta name =" content "content" content = "ye chaoluka" / /<viewport "<meta name =" deskripsi "content" content = "ye chaoluka" / /<meta name = "develing" content "content =" ye chaoluka " / /<meta name =" DRIPLE "DRIPLE" DRIPLE " href = "../ img/ycdoit.ico" type = "image/x-icon" rel = "ikon shortcut"/> <tyle> #allheaders, #cheader {border: medium solid black; padding: 2px; margin: 2px;} </style> </adep <Buttle> pisang </button> </div> <div id = "cheader"> </div> <div id = "allHeaders"> </div> <div id = "target"> tekan tombol </div> <script> var tombol = document.getElementsbyTagname ("tombol"); untuk (var i = 0; i <tombol } var httpRequest; function stallebuttonpress (e) {httpRequest = new xmlhttpRequest (); httprequest.onreadystatechange = handleresponse; httprequest.open ("get", e.target.innerHtml+". html"); httprequest.setRequestheader ("cache-control", "no-cache"); httpRequest.send (); } function handleresponse () {if (httprequest.readystate == 2) {document.getElementById ("allheaders"). innerHtml = httprequest.getallResponseaders (); document.geteLementById ("cheader"). innerHtml = httpRequest.getResponseHeader ("tipe konten"); } else if (httprequest.readystate == 4 && httpRequest.status == 200) {document.geteLementById ("target"). innerHtml = httproquest.responsetext; }} </script> </body> </html>Rendering adalah sebagai berikut:
Menurut angka ini, kita dapat melihat bahwa perangkat lunak server web yang dijalankan server pengembangan adalah Intellij Idea 15.0.4, dan terakhir kali dokumen apel.html dimodifikasi adalah 27 Juni (tetapi tangkapan layar adalah 5 Juli).