Belajar Ajax di PHP
mohon maaf sebelumnya baru bisa posting bahasan atau lebih tepatnya tugas kuliah.
disni saya mendapat tugas untuk belajar Ajax. Apa sih AJAX itu???
Menurut Paman wiki AJAX ialah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.
Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.
Tugasnya ialah membuat script sederhana dan menganduk script ajax. yah kata lainya adalah implementasi ajax di bahasa pemograman. Dan kebetulan disini saya menggunakan bahasa pemrograman php (gaya broi. padahal baru tau php).
disni kita akan membuat contoh aplikasi kecil yang mengunakan ajax. yaitu ajax berguna untuk merefresh halaman tapi hanya halaman tertentu tidak semua halaman (kita bicara dalam satu halaman).contoh penggunaan aplikasi ajax yang sering kita jumpai yaitu pada e-mail.
untuk memulainya ada beberapa syarat yaitu
1. kita jangan lupa xamp sudah terinstall dengan baik di komputer kita. Kalu belum ada download disini
2. Browser jagan lupa karena kita akan melihat hasil kerjaan kita pada browser.
3. Kopi buat jangan nagantuk.
nah sekarang kita buat satu persatu filenya (jangan lupa file disave jadi satu folder).
1. buat file test.php (copy dan paste dan save script dibawah ini).
<html>
<head>
<title>AJAX test</title>
<link rel=”stylesheet” href=”http://www.hackorama.com/css/common.css” type=”text/css” title=”default” media=”screen”>
<script type=”text/javascript” src=”ajax.js”></script>
</head>
<body>
<p>
<input id=”testmsg” type=”text” value=”Hello AJAX” disabled=”disabled” readonly=”readonly”>
<button onclick=”talktoServer()”>Click Disini</button>
<div id=”msg_display” style=”{ background: lime; font-weight: bold; }”>Data
Dari Server Lihat disini… </br>
Click Button Ditas..
</div>
</body>
</html>
2. Membuat file ajax.js (biasa copy, paste dan save).
function talktoServer(){
var req = newXMLHttpRequest();
//register the callback handler function
var callbackHandler = getReadyStateHandler(req, updateMsgOnBrowser);
req.onreadystatechange = callbackHandler;
req.open(“POST”, “servertime.php”, true);
req.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
//get the value from the text input element and send it to server
var testmsg = document.getElementById(“testmsg”);
var msg_value = testmsg.value;
req.send(“msg=”+msg_value);
}
// This is the callback functions that gets called
// for the response from the server with the XML data
var lastPing = 0;
function updateMsgOnBrowser(testXML) {
var test = testXML.getElementsByTagName(“test”)[0];
var message = testXML.getElementsByTagName(“message”)[0];
var ip = testXML.getElementsByTagName(“ip”)[0];
var timestamp = test.getAttribute(“timestamp”);
if (timestamp > lastPing) {
lastPing = timestamp;
var ip_value = ip.firstChild.nodeValue;
var message_value = message.firstChild.nodeValue;
var msg_display = document.getElementById(“msg_display”);
msg_display.innerHTML = “Lihat perubahan pada Server Times tamp…” +
“<br> Pesan Dari Server: \”" + message_value + “\”" +
“<br> Server IP: \”" + ip_value + “\”" +
“<br> Server Times tamp: \”"+ timestamp + “\”" +
“<br> Klik Berulang Ulang Button ditas” ;
}
}
//the following two functions are helper infrastructure to
//craete a XMLHTTPRequest and register a listner callback function
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Try ActiveX
try {
xmlreq = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e1) {
// first method failed
try {
xmlreq = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e2) {
// both methods failed
}
}
}
return xmlreq;
}
function getReadyStateHandler(req, responseXmlHandler) {
return function () {
if (req.readyState == 4) {
if (req.status == 200) {
responseXmlHandler(req.responseXML);
} else {
var hellomsg = document.getElementById(“hellomsg”);
hellomsg.innerHTML = “ERROR: “+ req.status;
}
}
}
}
3. Membuat File servertime.php (lagi-lagi copy, paste dan save).
<?
header(‘Content-Type: application/xml’);
$msg = htmlentities(trim(stripslashes($_REQUEST['msg'])));
$ts = time();
$ip = gethostbyname(“hackorama.com”);
print (“<?xml version=\”1.0\”?>”);
print (“<test timestamp=\”$ts\”>”);
print (“<ip>$ip</ip>”);
print (“<message>$msg</message>”);
print (“</test>”);
?>
Setelah semua file jadi kita letakan file kita pada htdocs/xampp.
setalah itu kita jalanin lewat localhost Exp; http://localhost/xampp/ajax/test.php
nah kamu coba-coba dah. klak klik button nya..
Untuk contoh aplikasi yang sudah jadi download disini
semoga bermanfaat.
sumber
Description: Belajar Ajax di PHP
Reviewer: Unknown
Rating: 4.0
ItemReviewed: Belajar Ajax di PHP
Reviewer: Unknown
Rating: 4.0
ItemReviewed: Belajar Ajax di PHP
No comments: