Lost Password?

Go Back   CodeCall Programming Forum > Software Development > Tutorials
Reload this Page AJAX: Intro
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Unregistered, Check out the Coder Battles in the Announcement and Game forums.

Tutorials Programming Tutorials - Post your tutorials here!

Reply
 
LinkBack Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old 09-23-2007, 10:15 PM
John's Avatar   
John John is offline
Co-Administrator
  
Join Date: Jul 2006
Age: 19
Posts: 3,211
Last Blog:
Passwords
Credits: 842
Rep Power: 20
John has much to be proud ofJohn has much to be proud ofJohn has much to be proud ofJohn has much to be proud ofJohn has much to be proud ofJohn has much to be proud ofJohn has much to be proud ofJohn has much to be proud ofJohn has much to be proud of
Send a message via AIM to John
Default AJAX: Intro
AJAX is one of the newest and post popular technologies. AJAX [Asynchronous JavaScript and XML] allows you to send a request to the server and view the results without having to refresh the page. This enables you to create a more "windows-like" applications. This tutorial will explain the basics of AJAX.

The heart behind AJAX is the JavaScript XMLHttpRequest object. Since all browsers react differently to JavaScript creating a cross browser application can be difficult. The core code I always use is below:

JavaScript Code:
  1. <script type="text/javascript">
  2. function ajax()
  3.   {
  4.   var xmlHttp;
  5.   try
  6.     {
  7.     xmlHttp=new XMLHttpRequest();
  8.     }
  9.   catch (e)
  10.     {
  11.     try
  12.       {
  13.       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  14.       }
  15.     catch (e)
  16.       {
  17.       try
  18.         {
  19.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  20.         }
  21.       catch (e)
  22.         {
  23.         alert("AJAX is not supported by your browser.");
  24.         return false;
  25.         }
  26.       }
  27.     }
  28.   }
  29. </script>

This code works with FireFox, Internet Explorer, Opera, and many more. To send information to a server, I use the open() and send() functions. Open accepts three parameters, the "connection" type (either POST or GET), the file location, and a boolean value which determines whether the connection should be asynchronous. The send() function "sends" the request. The code will look like this:

JavaScript Code:
  1. xmlHttp.open("GET", "ajax.php", true);
  2. xmlHttp.send(null);


Now before you actually submit data to a file you should actually make sure data needs to be submitted, and we do that by making sure the "state" was changed.

Which might look like this:

JavaScript Code:
  1. xmlHttp.onreadystatechange=function()
  2.       {
  3.       if(xmlHttp.readyState==4)
  4.         {
  5.         document.formName.elementName.value=xmlHttp.responseText;
  6.         }
  7.       }
  8.     xmlHttp.open("GET", "ajax.php", true);
  9.     xmlHttp.send(null);
  10.   }


The ready state has five "states": 0, 1, 2, 3, and 4. Ill tell you more about them in future tutorials when they are needed, but for this tutorial all we are concerned with is state four, which means the request is complete. So essentially what the code above does, is - if the request was complete, the web page is going to update the, lets say input box, named elementName inside the form named formName with the response from the server - which is a value echoed plain text. For example if ajax.php had this code:

PHP Code:
echo date('l dS \of F Y h:i:s A'); 
And you had an html file like this:

HTML4Strict Code:
  3. <title>Ajax Time</title>
  4. <script type="text/javascript">
  5. function ajax()
  6.   {
  7.   var xmlHttp;
  8.   try
  9.     {
  10.     xmlHttp=new XMLHttpRequest();
  11.     }
  12.   catch (e)
  13.     {
  14.     try
  15.       {
  16.       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  17.       }
  18.     catch (e)
  19.       {
  20.       try
  21.         {
  22.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  23.         }
  24.       catch (e)
  25.         {
  26.         alert("Ajax is not supported by your browser.");
  27.         return false;
  28.         }
  29.       }
  30.     }
  31.      xmlHttp.onreadystatechange=function()
  32.       {
  33.       if(xmlHttp.readyState==4)
  34.         {
  35.         document.formName.elementName.value=xmlHttp.responseText;
  36.         }
  37.       }
  38.     xmlHttp.open("GET", "ajax.php", true);
  39.     xmlHttp.send(null);
  40.   }
  41. </script>
  42. </head>
  44. <form name="formName">
  45. Anything: <input type="text"
  46. onkeyup="ajax();" name="anything" />
  47. Time: <input type="text" name="elementName" />
  48. </form>
  49. </html>

Assuming you setup everything properly, each time you type something in the "anything" input box the "elementName" input box should update with the current time.
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
|
To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

Chat with other CodeCall members on IRC; connect to irc.codecall.net and join #codecall
Last edited by John; 09-23-2007 at 10:24 PM.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Sponsored Links
  #2 (permalink)  
Old 11-07-2007, 08:52 PM
Crane's Avatar   
Crane Crane is offline
Programming Expert
  
Join Date: Nov 2005
Posts: 399
Credits: 1
Rep Power: 13
Crane is on a distinguished road
Default
Excellent Tutorial. I always thought that AJAX was a new language (a combination of languages) but it doesn't seem so complicated. If you can create an XML document with one language all you need to do is fetch it with JavaScript.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

« Previous Thread | Next Thread »


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Considering Ajax, Part 1: Cut through the hype Ronin JavaScript and CSS 0 12-13-2006 02:36 PM
Myth-Busting AJAX (In)security Jordan AJAX 1 12-03-2006 01:21 PM
AJAX Evolved Jordan JavaScript and CSS 0 09-09-2006 01:12 PM
More AJAX Resources NeedHelp JavaScript and CSS 2 07-13-2006 12:57 PM
Anybody use Ajax? Dan JavaScript and CSS 9 07-05-2006 03:25 PM


All times are GMT -5. The time now is 02:38 AM.

Contact Us - Programming Forum - Archive - Top

CodeCall

Contest Stats

Xav ........ 1097.16
MeTh0Dz|Reb0rn ........ 986.37
morefood2001 ........ 850.04
John ........ 841.93
WingedPanther ........ 684.54
marwex89 ........ 638.26
Brandon W ........ 492.36
chili5 ........ 292.12
Steve.L ........ 188.37
orjan ........ 187.41

Contest Rules

CodeCall Goal

Goal: 100,000 Posts
Complete: 79%

Sponsors

Linux Forums
Electronic Music
Podnet IRC Network

Ads