Mari belajar tentang AJAX.
Kali ini saya ingin memperkenalkan tentang sebuah framework ajax bernama anaa
Disini sitenya http://www.scriptol.com/ajax/anaa/
Dalam framework ini terdapat beberapa API yang dapat kita gunakan untuk mempermudah penerapan AJAX pada website yang kita buat....
AACreate, AARead, AALoadXML, AALoadHTML, AAWrite dll
Langsung saja saya berikan demonya, untuk pertama AARead saja dulu....
Demo : http://agoesdoubleb.i-bego.com/arsip/an ... /index.php
Perhatikan ketika menu di tekan, isi tampilan utama akan secara otomatis berubah tanpa merubah URL dari website....
AARead berfungsi untuk membaca sebuah dokumen pada server....
Sediakan sebuah file bernama index.php
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Anaa, demo of get from plain text</title>
<script src="anaa.js" type="text/javascript"></script>
<script language="JavaScript">
function storing(data, element)
{
element.innerHTML = data;
}
function loadContent(url, element)
{
AARead(url, storing, element);
}
</script>
</head>
<body bgcolor="#FFFFCC">
<p><a href="index.php">Home</a> |
<a href="#" onclick="loadContent('profile.php',document.getElementById('dvMain'));">Profile</a> |
<a href="#" onclick="loadContent('contact.php',document.getElementById('dvMain'));">Contact</a> |
<a href="#" onclick="loadContent('help.php',document.getElementById('dvMain'));">Help</a></p>
<div id="dvMain" style="width:300px; height:200px; border:solid #000 thin;">Home</div>
</body>
</html>
anaa.js (file ini dapat di download dari link yang saya sertakan diatas)
- Code: Select all
/**
AnAA - Ajax Framework
Version 1.8
www.anaa.eu
(c) 2007-2009 Sandrine Takis and Denis Sureau.
Free under the GNU GPL 2.0 Licence.
*/
var AACaching = false;
function AACreate()
{
var request = false;
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (err2) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (err3) {
try {
request = new XMLHttpRequest();
}
catch (err1)
{
request = false;
}
}
}
return request;
}
/**
AA Read
Load a file, text or XML
*/
function AARead(url, fun, element)
{
var xhr = AACreate();
var ext = url.substr(url.length - 3);
var isXML = (ext == "xml");
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
var content;
if(isXML)
content = xhr.responseXML;
else
content = xhr.responseText;
fun(content, element);
}
}
};
if(AACaching == false)
url = url + "?nocache=" + Math.random();
xhr.open("GET", url , true);
xhr.send(null);
}
/**
Read an XML file with any extension
*/
function AALoadXML(url, fun, element)
{
var xhr = AACreate();
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
fun(xhr.responseXML, element);
}
};
xhr.open("GET", url , true);
xhr.send(null);
}
/**
AAWrite
url: the script
data: the string to pass to the script
it is a list of pairs x=y separated by &
*/
function AAWrite(url, data, fun)
{
var xhr = AACreate();
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
if(fun != null) fun(xhr.responseText);
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
}
function AAGetBody(content)
{
var x = content.indexOf("<body");
if(x == -1) return "";
x = content.indexOf(">", x);
if(x == -1) return "";
var y = content.lastIndexOf("</body>");
if(y == -1) return "";
return content.slice(x + 1, y);
}
function AAPutHTML(content, target)
{
target.innerHTML = AAGetBody(content);
}
/**
Loads a HTML page
Put the content of the body tag into the current page.
Arguments:
url of the other HTML page to load
id of the tag that has to hold the content
*/
function AALoadHTML(url, fun, storage, param)
{
var xhr = AACreate();
xhr.onreadystatechange=function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
storage = document.getElementById(storage);
storage.innerHTML = AAGetBody(xhr.responseText);
fun(storage, param);
}
}
};
if(AACaching == false)
url = url + "?nocache=" + Math.random();
xhr.open("GET", url , true);
xhr.send(null);
}
/**
Send a HEAD request,
call a function with the value
*/
function AAHead(url, key, fun, element)
{
var xhr = AACreate();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
var value;
if (xhr.status == 200)
{
value = xhr.getResponseHeader(key);
}
else
{
if(xhr.status==404)
value = url + " doesn't exist!";
else
value = "Error, status is " + xhr.status;
}
fun(value, element);
}
}
xhr.open("HEAD", url, true);
xhr.send(null);
}
profile.php, contact.php dan help.php
- Code: Select all
Isikan sesuai dengan apa yang ingin di tampilkan
Semoga bermanfaat dan Semoga juga bisa membuat tutorial selanjutnya tentang anaa...
Wassalamualaikum wr, wb...
------------------------------------------
Original Post : http://agoesdoubleb.i-bego.com/?p=285
keren om tutorialnya.. nambah referensi nih...
News
Site map
SitemapIndex
RSS Feed