Pengenalan XMLHTTPREQUEST Object

Latihan 1 (pengenalan XMLHTTPREQUEST Object)
Perhatian : Menjalankan Ajax harus di server/localhost

<h1>Praktek Ajax Pertama The XMLHttpRequest Object</h1>
<p>mengenal XML XMLHttpRequest Object.</p>
<p>disini akan tertulis kata-kata,..</p>
<!– menarik document dengan syntax loadXMLdoc –>
<button type=”button” onclick=”loadXMLDoc()”>tekan Tombol ..</button>
<p id=”demo”></p>
<!– membuat fungsi loadXMLdoc –>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// untuk browser IE 6 keatas juga variannya
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {
// menarik id demo
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
// membuat file extensi .txt
xmlhttp.open(“GET”, “ajax.txt”, true);
xmlhttp.send();
}
</script>

Latihan 2
Ajax Request dengan Metode Get

<!DOCTYPE html>
<html>
<body>
<h1>Pengenalan AJAX Request Dengan Get</h1>
<button type=”button” onclick=”loadDoc()”>Request Get</button>
<p id=”get_jalan”></p>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“get_jalan”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “pengenalan.asp”, true);
xhttp.send();
}
</script>
</body>
</html>

Latihan 3
Ajax Request dengan Metode Post

 

<!DOCTYPE html>
<html>
<body>
<h1>Ajax Request Dengan Metode POST</h1>
<button type=”button” onclick=”loadDoc()”>Request data Dengan Post</button>
<p id=”coba_post”></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“coba_post”).innerHTML = this.responseText;
}
};
xhttp.open(“POST”, “pengenalan.asp”, true);
// ada tambahan untuk menghilangkan url detail
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
// untuk menghilangkan request permintaan terhadap url, sama sepeerti httacces
xhttp.send(“coba&lname=post”);
}
</script>

Latihan 4
Ajax Response Dan Ajax Event

<h1>Ajax Response & Event</h1>
<p id=”response”></p>
<script>
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xmlDoc = this.responseXML;
txt = “”;
x = xmlDoc.getElementsByTagName(“COMPANY”);
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + “<br>”;
}
document.getElementById(“response”).innerHTML = txt;
}
};
xhttp.open(“GET”, “event.xml”, true);

xhttp.send();
</script>

 

Keterangan :
Untuk isi extensi txt,asp maka dibuat terserah keinginan anda
Untuk file XML maka dibuat sperti format dibawah ini

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CATALOG>

Tugas :
1. Coba digunakan untuk menarik file dengan extensi .doc / .xls / .ppt , apakah bisa ?
2. Coba diubah-ubah syntax diatas sesuai keinginan anda ? apakah masih bisa running normal

sumber : pak afri yudha (Praktek Ajax 1)

Konfigurasi Dasar CodeIgniter

Selamat malam kawan semua, bagaimana kabarnya? semoga baik baik saja yah. Malam ini kita akan ...

Learn more

Cara Daftar Google Adsense Indonesia Agar Cepat Diterima

Google Adsense adalah salah satu program PPC (Pay Per Click) yang paling banyak digemari oleh ...

Learn more
Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *