Berikut ini adalah contoh variabel PHP yang dapat dibaca di AJAX:
var waktubooking='<?php echo date("Y-m-d H:i:s")?>';
Sedangkan sebaliknya, kita dapat mengirimkan query string ke halaman PHP sehingga PHP dapat me-GET variabel tersebut.
[ add comment ] | permalink |
( 0 / 0 )Dalam mengembangkan web, AJAX sering digunakan oleh para web developer untuk membuat halaman webnya lebih dinamis dan lebih cepat aksesnya. Metode getElementById sering digunakan untuk mengirimkan query string, yang dapat di GET oleh PHP. Yang menjadi persoalan sekarang, apakah kita dapat mengirimkan query string berupa variabel array? Jika kita perlu menampilkan data dari suatu tabel, dan kita perlu mengupdate tampilan tersebut sesuai dengan data yang dipilih user. Maka diperlukan sebuah looping untuk membaca isi seluruh tabel. Apakah kita bisa mengirimkan semua nilai tersebut? Satu object akan mempunyai nama lebih dari satu, sesuai dengan jumlah record yang ada di dalam tabel. Berikut ini adalah contoh script AJAXnya:
function ajaxComponent(total){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser cannot support AJAX!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
if (ajaxDisplay.style.display == 'none') {
ajaxDisplay.style.display = 'block';
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
else
{
var ajaxDisplay = document.getElementById('ajaxDiv');
if (ajaxDisplay.style.display == 'none') {
ajaxDisplay.style.display = 'block';
}
ajaxDisplay.innerHTML = "<img src=images/ajaxload.gif>";
}
}
//gathers all the variables
var tglcheckin=document.getElementById('tglcheckin').value;
var tglcheckout=document.getElementById('tglcheckout').value;
var idhotel=document.getElementById('idhotel').value;
var queryString = "?informasi=" + informasi;
for(j=0;j<=total-1;j++) {
queryString+= "&elemen" + j + "=" + document.getElementById('elemen'+j).value;
}
ajaxRequest.open("GET", "update_ajax.php" + queryString, true);
ajaxRequest.send(null);
}
[ add comment ] | permalink |
( 0 / 0 )Berikut ini adalah contoh aplikasi AJAX. Function di bawah ini dapat ditrigger melalui event Java Script, diantaranya yang cukup populer adalah event onClick. Akan ada pengecekan status object XMLHttpRequest. Jika property readyState sudah sama dengan 4, maka hasil output akan ditampilkan, menimpa sebagian halaman web yang sudah kita set sebelumnya. Jika tidak, kita dapat menampilkan tulisan 'Loading' ataupun menampilkan gambar animasi loading screen, saat AJAX bekerja.
Metode getElementById sangat bermanfaat untuk mengirimkan query string ke server untuk selanjutnya diproses secara server side. Pengiriman query string semacam ini sangat berguna dalam updating database kita. Sebagai contoh, kita dapat mengirimkan code untuk mengakses database. Dan saat kita menggunakan metode getElementById, kita tidak perlu menggunakan form untuk definisi tiap objectnya. Berikut adalah contoh scriptnya.
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
if (ajaxDisplay.style.display == 'none') {
ajaxDisplay.style.display = 'block';
}
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
else
{
var ajaxDisplay = document.getElementById('ajaxDiv');
if (ajaxDisplay.style.display == 'none') {
ajaxDisplay.style.display = 'block';
}
ajaxDisplay.innerHTML = "<img src=images/ajaxload.gif>";
}
}
//gathers all the variables
var komentar=document.getElementById('komentar').value;
var queryString = "?komentar=" + komentar;
ajaxRequest.open("GET", "halaman_ajax.php" + queryString, true);
ajaxRequest.send(null);
[ add comment ] | permalink |
( 0 / 0 )Teknologi AJAX yang memungkinkan terjadinya komunikasi dengan server tanpa harus meload ulang halaman web, dimungkinkan dengan adanya object XMLHttpRequest. Pada beberapa browser, sebelum kita dapat menggunakan object ini, kita perlu cek apakah browser client support AJAX atau tidak. Hal ini dapat dengan mudah dilakukan dengan mengeksekusi script sebagai berikut:
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser cannot support AJAX!");
return false;
}
}
}
Perintah di atas dapat kita sisipkan sebelum kita menjalankan aplikasi AJAX.
[ add comment ] | permalink |
( 0 / 0 )Advantages:
* Broadens a student's knowledge to concepts outside of the ordinary classroom
* More variety in the topics available to teach at school
* Allows risky experiments to be done outside of school environment
* Connects classrooms globally
* Real-time visual data exchange
Disadvantages:
* Cost of hardware/software
* Time Difference
Social/Ethical Issues
Authenticity
Teleconferencing would actually decrease the issue with authenticity. Since both sides would have real-time feeds of each other, neither side would have to question if the person they are communicating with is who they think it is.
Equality of Access
Teleconferencing is not available to everybody, since not every school may have the funds to purchase or to set up teleconferences, so there is not really equality of access.
Globalization and Cultural Diversity
As long as the two locations have the necessary pieces of hardware and software, they will be able to hold teleconferences with each other and share ideas at real-time. Schools from all around the globe can hold teleconferences with each other, which can lead to the students from different countries learning about the cultures and customs of another country, helping to increase cultural diversity.
[ add comment ] | permalink |
( 0 / 0 )
Calendar
