| AJAX 101 |
|
|
| Written by Administrator | |||||
| Friday, 12 December 2008 | |||||
Page 1 of 3 Ajax for beginners(The way I understand it)In action here I've read a few tutorials on Ajax for beginners. I found that firstly a lot of them is the same article copied and pasted. Secondly, these articles are based on a lot of assumptions about the knowledge that the reader posses. I'll assume you know little about HTML, JavaScript and PHP (or any server-side programming langauge). For more information on these languages, you can have a look at WebMonkey.com. Furthermore; I learn by example. Thus the following is an example to use Ajax to update a part of a web page, every 10 seconds by reporting the server time. The other tutorials on the net will show you how to implement a form using Ajax. The important bits will be marked by Notes. These notes will be comments in the code, in HTML, comments starts with a "<!--" and ends with a "-->" and in JavaScript and PHP the comments starts with a "/*" and ends with a "*/". The each set of code will be presented first and the notes will follow after the set of code. All the cod, per file, will be shown, not just extracts. So, lets begin, I'm using 3 "technologies" to implement this Ajax solution; HTML, JavaScript and PHP, each one in it's own file. First the HTML bit: report.html This is the file that will do the displaying of information. <HTML> Note 1: You'll need to include the JavaScript in the header part of the web page. Here I include the JavaScript file (xhr.js) but practically, you can include the actual JavaScript here. Note 2: The JavaScript function name is tod. In this example, I run the function tod when the page is loaded (the first part of the onLoad statement in the BODY tag) - because if I don't do it, the setInterval function will wait 10 seconds before running tod. The next statement (statements are delimited by the ; character) tells your browser to call the tod function (first argument of setInterval) every 10 seconds (second argument of setInterval - in milliseconds). Note 3: Here I use the tag called SPAN which will display the return result from the JavaScript function called tod. Important to note here is the ID of the SPAN tag. This ID will be used by the JavaScript to populate the text (or any HTML) returned by tod. I have found that using DIV, the way I used SPAN here, doesn't "contract" if less lines are returned, thus leaving blank lines on your web page. Click on the next link below this line for page 2. |
|||||
| Last Updated ( Saturday, 13 December 2008 ) | |||||
Google Search
My Commission Junction