Agustus 20, 2009 • 11:23 pm
(belakangan pengen ngeposting artikel yang gampang mikirnya, hehehe)
Kemarin ada seorang junior yang sedang belajar JQuery. Dia nanya bagaimana caranya meload bagian dari halaman HTML tanpa harus meload bagian-bagian halaman lain. Fungsi ini merupakan salah satu kegunaan dari AJAX di mana kita melakukan HTTP request tanpa harus meload halaman baru.
JQuery sudah menyediakan sebuah method yakni load. Method ini akan melakukan request ke sebuah halaman dan kemudian menginjeksikan responsenya ke dalam DOM elemen tersebut.
Contoh penggunaannya
<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#kotak").load("test5_1.html");
$("#button1").click(function(){
$("#kotak").load("test5_1.html");
return false;
});
$("#button2").click(function(){
$("#kotak").load("test5_2.html");
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="" id="button1">Test 1</a></li>
<li><a href="" id="button2">Test 2</a></li>
</ul>
<div id="kotak"></div>
</body>
</html>
Untuk membuat sebuah tabpage pada HTML dan melakukan load seperti di atas, JQuery UI sudah menyediakan widget yang menarik dan high customable.
Source code dapat diambil di sini. (rename ke zip dan jangan lupa menambahkan script JQuerynya)
Filed under: HTML, Javascript, Snippets, Very Easy, Web Programming, tutorial , Programming, Web Programming, HTML, JavaScript, ajax, JQuery
Baru bikin wrapper yang lumayan enak buat digunain.
/*AJAX Wrapper!*/
/**
* @param method Request method
* @param url Request URL
* @param onLoad Function callback on request complete
* @param onProgress Function callback on request progress
* @param data
*/
function doRequest(method,url,async,onLoad,onProgress,data) {
var xhr;
try{
xhr=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try{
xhr=new ActiveXObject("Msxml2.xhr");
} catch (e) {
try {
xhr=new ActiveXObject("Microsoft.xhr");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
// W3C requests and streaming
xhr.open(method,url,async);
if (method == "POST") /* Set request header on POST */
{
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", data.length);
xhr.setRequestHeader("Connection", "close");
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 3) // interactive mode
onProgress(xhr.responseText);
if (xhr.readyState == 4) // finished
onLoad(xhr.responseText,xhr.status);
}
xhr.send(data); // finally send the request whether it be XDR or XHR
}
Read the rest of this entry »
Filed under: HTML, Javascript, PHP, Web Programming, tutorial , Programming, php, Web Programming, JavaScript, ajax, xml, xhr
Melanjutkan bahasan yang ada di blog gw tentang JSON. Penggunaan JSON sangat mudah karena sudah banyak fungsi bawaan dari berbagai bahasa yang dapat langsung kelakukan encode dan decode format data JSON.
Contoh sebuah kode PHP yang menghasilkan JSON.
//file: test2.php
<?php
$user = array (
"id" => 1,
"username" => "petra",
"fullname" => "Petra Barus"
);
echo json_encode($user);
?>
Jika kode ini ditampilkan secara biasa maka halaman akan menampilkan format JSON dari array $user tersebut
{"id":1,"username":"petra","fullname":"Petra Barus"}
Dengan menggunakan kode pada tulisan sebelumnya
//cut
/* Test AJAXnya */
function testAjax()
{
var url = "test2.php";
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState==4)
{
var user = eval("("+xmlHttp.responseText+")");
alert("ID : " + user.id+"\n" +
"Username : " + user.username +"\n" +
"Fullname : " + user.fullname);
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
Seperti sebelumnya, isi dari atribut XHR responseText akan berisi tampilan dari server scriptnya. Isi ini dapat langsung diubah mejadi objek Javascript dengan menggunakan fungsi eval. Sebenarnya fungsi eval dapat mengeksekusi kode javascript apa pun tidak hanya JSON. Oleh karena itu gunakan hanya untuk kode JSON yang dipercaya.
Kode penuhnya dapat diambil di sini. (rename extension ke zip)
Filed under: HTML, Javascript, PHP, Web Programming , ajax, HTML, json, php, Programming, Web Programming, xml
XML HTTP Request atau sering disingkat XHR adalah sebuah object pada API Javascript yang dapat dipakai untuk melakukan HTTP Request secara asynchronous yakni melakukan HTTP Request tanpa perlu melakukan page loading. Berikut contoh pemakaian XHR
Untuk kode client-sidenya
<html>
<head>
<script type="text/javascript" languange="javascript" src="test1.js"></script>
</head>
<body>
<button id="button1" onclick="testAjax()">Test</button>
</body>
</html>
Pada kode di atas halaman akan mengeksekusi fungsi testAjax setiap kali tombol button1 ditekan.
Read the rest of this entry »
Filed under: HTML, Javascript, PHP, Web Programming, tutorial , ajax, http, kuliah, Programming, Web Programming, xml
Komentar Terakhir