Tutorial AJAX

liverpoolfctv

mintak maaf mod.. myb dah ada kot kat thread nih tp sy tak jumpe.. so sgt kalu tak berkongsi coding kat kawan2 yg ingin belajar ajax...
ok kawan2 nih salah satu contoh apabila admin baru update content(guna backend).. dan dalam masa yg sama kita tgh bukak content(frontend) tersebut, secara langsung content tersebut akan autoupdate.. sebab coding ini guna timer + ajax.. so selamat mcuba..

1. CREATE TABLE ajx_namatable (
   
2.   id tinyint(3) unsigned default NULL,
   
3.   content longtext
   
4. ) TYPE=MyISAM;
   
5. 
   
6. 
   
7. 
   
8. #
   
9. # Dumping data for table 'ajx_namatable'
   
10. #
    
11. 
    
12. INSERT INTO ajx_namatable VALUES("1", "hai ini tutorial ajax.. selamat belajar yea.");

Copy the Code

HttpClient.js

1. function HttpClient() { }
   
2. HttpClient.prototype = {
   
3.   
   
4.   //type GET, POST passed to open
   
5.   requestType:'GET',
   
6.   //when set to true, async calls are made
   
7.   isAsync:false,
   
8. 
   
9.   // where an XMLHttpRequest instance is stored
   
10.   xmlhttp:false,
    
11.   
    
12.   //what is called when a successful async call is made
    
13.   callback:false,
    
14.   
    
15.   // what is called when send is called on XMLHttpRequest
    
16.   // set your own function to onSend to have a custom loading
    
17.   // effect
    
18.   onSend:function() {
    
19.     document.getElementById('HttpClientStatus').style.display='block';
    
20.   },
    
21.   
    
22.   // what is called  when readyState 4 is reached, this is
    
23.   // called before your callback
    
24.   onload:function(){
    
25.      document.getElementById('HttpClientStatus').style.display='none';
    
26.   
    
27.   },
    
28.   
    
29.   
    
30.   
    
31.   // what is called when an http error happens
    
32.   onError:function(error){
    
33.       alert(error);
    
34.   },
    
35.   
    
36.   //ini adalah interval
    
37.   interval:0,
    
38.   timerId : null,
    
39.   
    
40.   //load Data from DB
    
41.   loadData:function(){
    
42.          
    
43.         this.makeRequest('ajaxService.php',null);
    
44.   },
    
45.   
    
46. 
    
47.   // method to initialize an xmlhttpclient
    
48.   init:function(){
    
49.     try{
    
50.         //Mozilla / Safari
    
51.         this.xmlhttp = new XMLHttpRequest();
    
52.     }
    
53.     catch(e)
    
54.     {
    
55.         //IE
    
56.         var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP');
    
57.         var success = false;
    
58.         for(var i=0;i < XMLHTTP_IDS.length && !success; i++ )
    
59.         {
    
60.             try{
    
61.                 this.xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
    
62.                 success=true;
    
63.             }
    
64.             catch(e){}
    
65.         }
    
66.         if(!success){
    
67.           this.onError('Unable to Create XMLHttpRequest.');
    
68.         }
    
69.     }
    
70.   },
    
71.   
    
72.   // method to make a page request
    
73.   // @param string url the page to make the request to
    
74.   // @param string payload What you're sending if this is a POST request
    
75. 
    
76.   makeRequest: function(url,payload)
    
77.   {
    
78.       
    
79.       if(!this.xmlhttp){
    
80.           this.init();
    
81.       }
    
82.       
    
83.       
    
84.       this.xmlhttp.open(this.requestType,url,this.isAsync);
    
85. 
    
86.       // set onreadystatechange here since it will be reset after a
    
87.       // complete call in Mozilla
    
88.       
    
89.       var self = this;
    
90.       
    
91.       this.xmlhttp.onreadystatechange = function(){
    
92.           self._readyStateChangeCallback();
    
93.       }
    
94.       
    
95.       this.xmlhttp.send(payload);
    
96.       
    
97.       if(!this.isAsync){
    
98.         return this.xmlhttp.responseText;
    
99.       }
    
100.       
     
101.   },
     
102.   
     
103.    _readyStateChangeCallback:function()
     
104.    {
     
105.           switch(this.xmlhttp.readyState)
     
106.           {
     
107.               case 2:
     
108.                   this.onSend();
     
109.                   break;
     
110.                   
     
111.               case 4:
     
112.                   this.onload();
     
113.                   if(this.xmlhttp.status==200){
     
114.                     return this.callback(this.xmlhttp.responseText);
     
115.                   }else{
     
116.                     this.onError('Http Error '+this.xmlhttp.status+' - '+this.xmlhttp.statusText);
     
117.                   }
     
118.                   break;
     
119.           }
     
120.       
     
121.       
     
122.    }
     
123.    
     
124. }
     

Copy the Code

index.html

1. <html>
   
2. <head>
   
3. <title>Contoh</title>
   
4. 
   
5. <script type="text/javascript" src="HttpClient.js"></script>
   
6. <script type="text/javascript">
   
7.       var client = new HttpClient();
   
8. 
   
9.       client.isAsync = true;
   
10. 
    
11. 
    
12. 
    
13.       client.callback = function(result)
    
14.       {
    
15.           var content = client.xmlhttp.responseText;
    
16.           document.getElementById('target').innerHTML=content;
    
17.       }
    
18. 
    
19.       function load(){
    
20.         client.loadData();
    
21.       }
    
22.           client.interval=3000;
    
23.           client.timerId = window.setInterval("load()", client.interval);
    
24. 
    
25. 
    
26. </script>
    
27. </head>
    
28. <body >
    
29. 
    
30. <div id="HttpClientStatus" style="position: absolute; width:100px; height:20px;
    
31.         top:5px; right:5px; display:none">Loading ..</div>
    
32. 
    
33. <div id="target" style="width:300px height:300px; border: solid 1px black"></div>
    
34. 
    
35. </body>
    
36. </html>

Copy the Code

mysql_connect.php

1. <?php #mysql_connect.php
   
2. 
   
3. /* Set the database access information
   
4.    constant
   
5. */
   
6. 
   
7.   define ('DB_USER','root');
   
8.   define ('DB_PASSWORD','');
   
9.   define ('DB_HOST','localhost');
   
10.   define ('DB_NAME','ajaxdb');
    
11. 
    
12. /* Make the connection and then select
    
13.    the database.
    
14. */
    
15.   $dbc = mysql_connect(DB_HOST,DB_USER,DB_PASSWORD);
    
16.   mysql_select_db(DB_NAME);
    
17. ?>

Copy the Code

ajaxService.php

1. <?php
   
2. 
   
3.   require_once('mysql_connect.php');
   
4.   $query = " SELECT * FROM ajx_namatable WHERE id=1";
   
5.   $result = mysql_query($query);
   
6.   $row = mysql_fetch_array($result);  //error
   
7. 
   
8. echo "
   
9. <span style='background-color: #C6E1FD'>Home</span>
   
10. <p> </p>
    
11. <p align='center'>".$row[1]."</p>
    
12. ";
    
13. 
    
14. ?>
    

Copy the Code

tutorial ni mengelirukan.macam bermula kat tengah-tengah pages.takde hujung dan takde pangkal.tatau nak insert parameter dan script ni kat mana.tatau nak execute camana.tatau nak create table belah mana.tatau nak kerat database seksyen mana.kalau buleh bagi explanation tu lebih2 sikit,yang melawat thread nih bukannya semua expert pun,contohnya cam aku.terima kasih....

padlie

ye ye.. aku pun berpinar tgk ni...
letih komen lebih sikit boleh?

liverpoolfctv

keke... sori2..
mmula disebabkan aku guna php.. so korang kene install appserv(apache php n mysql) dulu kat c:\
pastikan korang dah create new db yea.. nama db korang letak la ajaxdb..

ok 1st sekali korang nmpk apa yg aku post

code pertama tuh kan.. iaitu memula kita create table dulu cam dalam contoh aku kasik tuh dan sql utk insert value dulu....
CREATE TABLE ajx_namatable (
  id tinyint(3) unsigned default NULL,
  content longtext
)

INSERT INTO ajx_namatable VALUES("1", "hai ini tutorial ajax.. selamat belajar yea.");


pastu korang copy coding satu lagi iaitu bah. HttpClient.js, dan coding index.html, mysql_connect.php dan last sekali copy coding ajaxService.php
bermaksudnya korang ada 4 file(1 javascript, 1 html dan 2 fail php...).
so copy file2 nih letak dalam folder C:\AppServ\www\ajax      <---- folder ajax nih korang create la yea..

pastu run dengan cara bukak ie or mozilla.. then tulis http://localhost/ajax/index.html pastu korang akan nmpk data yg terpapar
"hai ini tutorial ajax.. selamat belajar yea."    dalam masa yg sama korang bukak db then bukak table ajx_namatable then cuba ubah data dalam field
content tuh.. then secara tak langsung page yg korang bukak td.. data yg display kat index.html turut brubah tanpa refresh page..

liverpoolfctv

adeh takdapat nak masuk thread nih sebab takcukup RA.. huhu kalu leh tau apa content utk send sms thru website

Hantar Free SMS melalui Website - [Reading Access 2]

shahnazz

Tak cukup RA? Rasanya tak letak reading acces pun, nanti saya check balik.

Anyway good start on AJAX. AJAX memang canggih.

Maybe liverpool boleh bagi penerangan yang lebih detail.

shahnazz

Tak pun kalau nak buat beginners AJAX try to do a Hello world app, AjJAX style, and work from there. Ni siap ada database and PHP sekali takut confusing.

padlie

Tadi guna javascript ni kat asp.net...
apa yg nak dibuat jd dengan jayanya kalau page tu hanya melibatkan paparan sahaja...

tp kalau isi benda dalam textbox atau klik combobox, terus jadi default view semula... segala-galanya kosong...
camne nak buat yer?

liverpoolfctv

ok ok.. sori.. aku akan bagi start dari awal yea.. ok
lagipun ajax ni bukanla bahasa pgram yg baru dan bukan benda yg baru..
Ajax lebih sebagai method atau teknik.
ok kita pegi tutorial asas dulu.. myb senang utk kita tau secara asas dahulu..

skrin kita nih ada dua inputtext.. bernama username dan time,
apabila kita taip jer kat inputtext username tuh.. berlaku proses pada property onkeydown dimana proses ini memanggil function ajaxFunction()

1. <input type="text" onkeydown="ajaxFunction();" name="username" />

Copy the Code

dan dalam function ajaxFunction tuh sy letak satu coding cam bawah nih,

1. xmlHttp.open("GET","testAjaxClass.php",true);

Copy the Code

fungsinya memanggil file testAjaxClass.php tersebut.

fungsi testAjaxClass.php ini hanya mmpaparkan date.. iaitu mggunakan

1. $today = date("H:i:s");
   
2. 
   
3.   echo $today;

Copy the Code

apabila page testAjaxClass.php dipanggil secara taklangsung
fungsi  xmlHttp.responseText berfungsi.... mende nih untuk mgambil value apa yg dipaparkan pd testAjaxClass.php(echo "$today")

1. document.myForm.time.value=xmlHttp.responseText;

Copy the Code

ok aku bagi full contoh nih,ada 2 fail yg terlibat iaitu

1 - File index.htm

1. <html>
   
2. 
   
3. <body>
   
4. 
   
5. 
   
6. 
   
7. <script type="text/javascript">
   
8. 
   
9. function ajaxFunction()
   
10. 
    
11.   {
    
12. 
    
13.   var xmlHttp;
    
14. 
    
15.   try
    
16. 
    
17.     {
    
18. 
    
19.     // Firefox, Opera 8.0+, Safari
    
20. 
    
21.     xmlHttp=new XMLHttpRequest();
    
22. 
    
23.     }
    
24. 
    
25.   catch (e)
    
26. 
    
27.     {
    
28. 
    
29.     // Internet Explorer
    
30. 
    
31.     try
    
32. 
    
33.       {
    
34. 
    
35.       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    
36. 
    
37.       }
    
38. 
    
39.     catch (e)
    
40. 
    
41.       {
    
42. 
    
43.       try
    
44. 
    
45.         {
    
46. 
    
47.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    
48. 
    
49.         }
    
50. 
    
51.       catch (e)
    
52. 
    
53.         {
    
54. 
    
55.         alert("Your browser does not support AJAX!");
    
56. 
    
57.         return false;
    
58. 
    
59.         }
    
60. 
    
61.       }
    
62. 
    
63.     }
    
64. 
    
65.     xmlHttp.onreadystatechange=function()
    
66. 
    
67.       {
    
68. 
    
69.       if(xmlHttp.readyState==4)
    
70. 
    
71.         {
    
72. 
    
73.         document.myForm.time.value=xmlHttp.responseText;
    
74. 
    
75.         }
    
76. 
    
77.       }
    
78. 
    
79.     xmlHttp.open("GET","testAjaxClass.php",true);
    
80. 
    
81.     xmlHttp.send(null);
    
82. 
    
83.   }
    
84. 
    
85. </script>
    
86. 
    
87. 
    
88. 
    
89. <form name="myForm">
    
90. 
    
91. Name: <input type="text"
    
92. 
    
93. onkeydown="ajaxFunction();" name="username" />
    
94. 
    
95. Time: <input type="text" name="time" size="30"/>
    
96. 
    
97. </form>
    
98. 
    
99. 
    
100. 
     
101. </body>
     
102. 
     
103. </html>

Copy the Code

dan file testAjaxClass.php

1. <?php
   
2. 
   
3. 
   
4. 
   
5.   //date_default_timezone_set('UTC');
   
6. 
   
7.   $today = date("H:i:s");
   
8. 
   
9.   echo $today;
   
10. 
    
11. ?>

Copy the Code

[ Last edited by  liverpoolfctv at 27-3-2007 02:17 PM ]

liverpoolfctv

tp stil guna file php gak,.. hehehe

king_kenny

sori nyampok.. saya bkn orang yg involve dlm hal2 programming ni..
so.. nak tanya la.. pe AJAX tuh?? pe kelebihan die??
klo AJAX FABULOSO.. sy tau la..
hehe...

liverpoolfctv

Originally posted by king_kenny at 27-3-2007 02:40 PM
sori nyampok.. saya bkn orang yg involve dlm hal2 programming ni..
so.. nak tanya la.. pe AJAX tuh?? pe kelebihan die??
klo AJAX FABULOSO.. sy tau la..
hehe...

erks.. susah nk tolong la kalu kes camni hehehee.. takpe nnt bla dah involve progrmming mesti tau punya..

shahnazz

AJAX - Advanced JavaScript and XML

Ia merupakan satu teknik programming yang memboleh web applications bertindak semacam window applications. Maknanya page boleh refresh dengan sendirinya, data update secara spontan tanpa perlu navigate ke web page yang berikutnya, boleh drag/drop items in the web page window etc.

Contoh web pages yang guna AJAX:
mail.google.com
www.meebo.com (this is a really good example)
mail.yahoo.com (yang version baru punya)

liverpoolfctv

yup itu la pengenalan ttg AJAX.. cam aku nih pandai mcoding je.. kekeke.. cam aku pun dah guna ajax setiap system yg aku develop..