Hey Guys. Was really bored and was learning AJAX for the past few days. Im just gonna whip up a small tutorial for those future web developers who are willing to use the next generation AJAX!
Basically AJAX was made popular after 2005 when Google developed its first AJAX application. You may not know it but when you type in Google there are suggestions at the bottom. This is done whenever you release the key you just pressed. Basically google has given you the ability to see the possibilities of what you have given it so far. All this is done Asynchronously. With the help of Javascript and a Server-Side scripting language (PHP, ASP etc.)
Now, this is just something to prove that AJAX was ALWAYS there. Just not used. Also client-side and server-side programming creates a hell lot of fun and ease in your websites for yourself, your server and most importantly, your users.
Requirements
Understand how to use a Server-Side Language (PHP, ASP etc...)
Little or NO Javascript knowledge (I had NONE whatsoever)
A brain that can think and do things without always needing a tutorial
To understand there is always more than 1 way.
Getting Started ~ Understanding
Now. Here is how AJAX works or can be made to work in simple terms.
1) You do something to activate a JavaScript function or similar
2) JavaScript may do a little processing here and there than send the data off for Server side processing
3) JavaScript receives the data and applys it
4) All without refreshing the page
Getting Started ~ Browser Support
There is just 1 thing about AJAX. Not every browser supports it. When I say not every browser supports AJAX i mean not every browser supports XMLHTTPObject or XMLHTTP in all. Thus we have to either find an alternative or just redirect them to a non-java-script page or something between those lines.
Now that you are done reading. Lets make our first AJAX Application (With a provided demo)
So, now that you have understood AJAX and what it truly is. Its time to get started
. Lets design our AJAX Program. I decided to teach you something really cool but i decided you wouldn't learn from it. So lets make a simple text box in which you enter a few letters, send to PHP, get the ammount of letters and display it underneath in HTML. Yes, I know this can be done completely in Javascript but I need something.
Step 1: The TextBox
Make an HTML page on your desktop or webserver (recommended) and add in a text box with the id of theTextBox. Dont know how? Than you need to brush up on your HTML skills or learn it.
So this is what we have so far
Step 1/half: Browser Compatability And The Dog
Eh. Do I ever hate this step. We have to spend an extra 5 minutes learning Browser Compatibility. Okay so say you have a friend, who has a friend, who has another friend, who has a dog. This dog is using Internet Explorer 4. I don't think Internet Explorer 4 had XMLHTTP or AJAX ability so we need to make sure that the dog doesn't get blurred or gets a misguided web-page. So we have to tell him to upgrade his browser or just dump him at google (Dont do that, people/dogs dont like it lol).
Okay. Now to do the above you have to use JavaScript. We will check if its supported or if there is an alternative. If not we can redirect or dump. If it is supported we will set one variable for BOTH ways.
So in our next function when we actually do the processing we will call this function which will return the appropriate Type!
This is what we have so far
Step 2: Getting the Data and Sending it for processing
Okay Now we will get the data EACH time they release a pressed key. To do that change your input to the following:
Now we told HTML, that when they release a key execute the function "doFunction()"! so the do function will send the data to the PHP script which will echo out the result. So lets create the javascript function that will handle the request aka doFunction().
Wow how easy was that ? The comments do explain alot. Well guess what your not done. Obviously! Time for some PHP server-side coding. Make a new file by the name of numchar.php as you specified in httpObject.open. So what do we have to do ? Basically get the data sent throught the url and then process how many characters it has and then echo it out. After that we will recieve it and then change the numofchar to the number echoed by making the function changeFunction(). So lets get started (php):
Well that was fun Okay now for the javascript function to change the the data. back in our HTML page lets add the javascript function changeFunction();
Okay now lemme explain the above. First lets start with READYSTATES.
ReadyState - Discription
0 - Not even started processing
1 - Request has started and has been set-up
2 - Sent
3 - Waiting for a result
4 - Complete
So that should explain the 4. Oh and remember the processing request ? We added it there because there wouldnt really be a different from adding there and here! Now for changing the ID.
Well, for our element in HTML we gave them an ID. Now this ID is used in CSS and in Javascript. So we got the Element numofchar which was a simple paragraph and we changed its value to what we got as a response which is in httpObject.responseText.
Step 3: Putting it All Together
This is what you should have for the HTML file or PHP file.
And for the PHP Part
Well Done. If someone could please get us a Demo that would be nice
I will be making more tutorials soon
Note: THERE ARE GRAMMAR ERRORS AND A FEW OTHER ONES. PLEASE COMMENT IT BELOW
~becool
Credits: Me:blush:
About AJAX
AJAX Stands for:
Asynchronous
JavaScript
And
XML
Asynchronous
JavaScript
And
XML
Basically AJAX was made popular after 2005 when Google developed its first AJAX application. You may not know it but when you type in Google there are suggestions at the bottom. This is done whenever you release the key you just pressed. Basically google has given you the ability to see the possibilities of what you have given it so far. All this is done Asynchronously. With the help of Javascript and a Server-Side scripting language (PHP, ASP etc.)
Now, this is just something to prove that AJAX was ALWAYS there. Just not used. Also client-side and server-side programming creates a hell lot of fun and ease in your websites for yourself, your server and most importantly, your users.
Requirements
Understand how to use a Server-Side Language (PHP, ASP etc...)
Little or NO Javascript knowledge (I had NONE whatsoever)
A brain that can think and do things without always needing a tutorial
To understand there is always more than 1 way.
Getting Started ~ Understanding
Now. Here is how AJAX works or can be made to work in simple terms.
1) You do something to activate a JavaScript function or similar
2) JavaScript may do a little processing here and there than send the data off for Server side processing
3) JavaScript receives the data and applys it
4) All without refreshing the page
Getting Started ~ Browser Support
There is just 1 thing about AJAX. Not every browser supports it. When I say not every browser supports AJAX i mean not every browser supports XMLHTTPObject or XMLHTTP in all. Thus we have to either find an alternative or just redirect them to a non-java-script page or something between those lines.
Now that you are done reading. Lets make our first AJAX Application (With a provided demo)
So, now that you have understood AJAX and what it truly is. Its time to get started
. Lets design our AJAX Program. I decided to teach you something really cool but i decided you wouldn't learn from it. So lets make a simple text box in which you enter a few letters, send to PHP, get the ammount of letters and display it underneath in HTML. Yes, I know this can be done completely in Javascript but I need something.Step 1: The TextBox
Make an HTML page on your desktop or webserver (recommended) and add in a text box with the id of theTextBox. Dont know how? Than you need to brush up on your HTML skills or learn it.
So this is what we have so far
Code:
<html>
<head>
<title> First AJAX Application </title>
</head>
<input type="text" id="theTextBox" onkeyup="doFunction()" /> <!-- This is the texbox -->
<p id="numofchar">A Number Will be Given between the two tags</p>Step 1/half: Browser Compatability And The Dog
Eh. Do I ever hate this step. We have to spend an extra 5 minutes learning Browser Compatibility. Okay so say you have a friend, who has a friend, who has another friend, who has a dog. This dog is using Internet Explorer 4. I don't think Internet Explorer 4 had XMLHTTP or AJAX ability so we need to make sure that the dog doesn't get blurred or gets a misguided web-page. So we have to tell him to upgrade his browser or just dump him at google (Dont do that, people/dogs dont like it lol).
Okay. Now to do the above you have to use JavaScript. We will check if its supported or if there is an alternative. If not we can redirect or dump. If it is supported we will set one variable for BOTH ways.
Code:
<script type="text/javascript">
function getHTTPObject() { // The main Function
if (window.ActiveXObject) // For Internet explorer 5 - 6
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) // For Firefox, Chrome, Opera, Safari etc..,
return new XMLHttpRequest();
else { // There using an unsupported browser
alert("Your browser does not support AJAX."); // Alert Message Telling them That there browser doesnt support Ajax.
window.location = "http://google.ca"; // Redirect to Google lol.
return null; // No Value to return :(
}
}
</script>This is what we have so far
Code:
<html>
<head>
<script type="text/javascript">
function getHTTPObject() { // The main Function
if (window.ActiveXObject) // For Internet explorer 5 - 6
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) // For Firefox, Chrome, Opera, Safari etc..,
return new XMLHttpRequest();
else { // There using an unsupported browser
alert("Your browser does not support AJAX."); // Alert Message Telling them That there browser doesnt support Ajax.
window.location = "http://google.ca"; // Redirect to Google lol.
return null; // No Value to return :(
}
}
</script>
<title> First AJAX Application </title>
</head>
<input type="text" id="theTextBox" onkeyup="doFunction()" /> <!-- This is the texbox -->
<p id="numofchar">A Number Will be Given between the two tags</p>Step 2: Getting the Data and Sending it for processing
Okay Now we will get the data EACH time they release a pressed key. To do that change your input to the following:
Code:
<input type="text" name="theTextBox" onkeyup="doFunction()" /> <!-- This is the texbox -->
Code:
function doFunction() {
ajax = getHTTPObject(); // Get the Object
document.getElementById('numofchar').innerHTML = 'Processing Request'; // Tell them that were processing it. Explained Later.
if (ajax != null) { // If it isnt null, meaning the browser does support AJAX.
ajax.open("GET", "numchar.php?tb=" + document.getElementById('theTextBox').value, true); // Open a GET Request to numchar.php and true to be held asynchronously :)
ajax.send(null); // Send it
ajax.onreadystatechange = changeFunction; // When httpObject is ready for a state change meaning that it has recieved some sort of a response. You can redirect to another function or make one
} // They should have recieved the alert message and have been redirected.
}Wow how easy was that ? The comments do explain alot. Well guess what your not done. Obviously! Time for some PHP server-side coding. Make a new file by the name of numchar.php as you specified in httpObject.open. So what do we have to do ? Basically get the data sent throught the url and then process how many characters it has and then echo it out. After that we will recieve it and then change the numofchar to the number echoed by making the function changeFunction(). So lets get started (php):
Code:
<?php
// Okay now check if they have the get statement
if (isset($_GET['tb'])) {
// You can make this more secure by stripslashing but im lazy
$text = $_GET['tb'];
echo strlen($text);
// Wow DONE :)
}
?>Well that was fun
Okay now for the javascript function to change the the data. back in our HTML page lets add the javascript function changeFunction();
Code:
function changeFunction() {
if (ajax.readyState == 4){ // This will be explained
document.getElementById('numofchar').innerHTML = ajax.responseText; // Change the ID numofchar
}
}ReadyState - Discription
0 - Not even started processing
1 - Request has started and has been set-up
2 - Sent
3 - Waiting for a result
4 - Complete
So that should explain the 4. Oh and remember the processing request ? We added it there because there wouldnt really be a different from adding there and here! Now for changing the ID.
Well, for our element in HTML we gave them an ID. Now this ID is used in CSS and in Javascript. So we got the Element numofchar which was a simple paragraph and we changed its value to what we got as a response which is in httpObject.responseText.
Step 3: Putting it All Together
This is what you should have for the HTML file or PHP file.
Code:
<html>
<head>
<script type="text/javascript">
function getHTTPObject() { // The main Function
if (window.ActiveXObject) // For Internet explorer 5 - 6
return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) // For Firefox, Chrome, Opera, Safari etc..,
return new XMLHttpRequest();
else { // There using an unsupported browser
alert("Your browser does not support AJAX."); // Alert Message Telling them That there browser doesnt support Ajax.
window.location = "http://google.ca"; // Redirect to Google lol.
return null; // No Value to return :(
}
}
function doFunction() {
ajax = getHTTPObject(); // Get the Object
document.getElementById('numofchar').innerHTML = 'Processing Request'; // Tell them that were processing it. Explained Later.
if (ajax != null) { // If it isnt null, meaning the browser does support AJAX.
ajax.open("GET", "numchar.php?tb=" + document.getElementById('theTextBox').value, true); // Open a GET Request to numchar.php and true to be held asynchronously :)
ajax.send(null); // Send it
ajax.onreadystatechange = changeFunction; // When httpObject is ready for a state change meaning that it has recieved some sort of a response. You can redirect to another function or make one
} // They should have recieved the alert message and have been redirected.
}
function changeFunction() {
if (ajax.readyState == 4){ // This will be explained
document.getElementById('numofchar').innerHTML = ajax.responseText; // Change the ID numofchar
}
}
</script>
<title> First AJAX Application </title>
</head>
<input type="text" id="theTextBox" onkeyup="doFunction()" /> <!-- This is the texbox -->
<p id="numofchar">A Number Will be Given between the two tags</p>And for the PHP Part
Code:
<?php
// Okay now check if they have the get statement
if (isset($_GET['tb'])) {
// You can make this more secure by stripslashing but im lazy
$text = $_GET['tb'];
echo strlen($text);
// Wow DONE :)
}
?>Well Done. If someone could please get us a Demo that would be nice
I will be making more tutorials soon
Note: THERE ARE GRAMMAR ERRORS AND A FEW OTHER ONES. PLEASE COMMENT IT BELOW
~becool
Credits: Me:blush:
