This tutorial continues my tutorial on innerHTML. In this tutorial, instead of using a function that will directly update the page, we are going to use ajax techniques to update the page. By using Ajax, you can call out to any piece of PHP (or other web language like ASP) code, rather than just be able to use javascript.
First, we start with our base form again, including our onclick event:
Next we’ll add in the function. I’ll explain what each bit of what we are doing is in the comments of the code.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<p id="namehere"></p>
<input name="name" id="name"><br>
<input name="Submit" id="Submit" value="Submit"
onclick="javascript:changename()" type="button"></body>
</html>
Now, we also need another file, called ajaxtest.php. All this PHP script will do is get the name sent to it and then echo it.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<script type="text/javascript">
function changename()
{
//Declare the variable that will hold the XMLHttp Object.
var ajaxobject;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
ajaxobject=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
ajaxobject=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
//The browser doesn’t support Ajax.
alert("Your browser does not support Ajax!");
}
//Here we store a function in the onreadystatechange property. This makes it automatically set off when the readystate changes.
ajaxobject.onreadystatechange=function()
{
if(ajaxobject.readyState==4)
//Here, we test if the readystate is 4, which means it is finished.
{
//Here is where we flow on from the last tutorial. We update the page by changing the innerHTML to the HTML that is sent back from the ajax request.
document.getElementById('namehere').innerHTML = ajaxobject.responseText;
}
}
//Here is where the Ajax request sends out to an external page. You can also use POST, however you must add some more code.
ajaxobject.open("GET","ajaxtest.php?name="+document.getElementById('name').value,true);
//This is normally used to send extra data, like when doing a POST instead of GET.
ajaxobject.send(null);
}
</script>
<p id="namehere"></p>
<input name="name" id="name"><br>
<input name="Submit" id="Submit" value="Submit"
onclick="javascript:changename()" type="button"></body>
</html>
Congratulations, you have created an Ajax page. By putting your name in the text box and pressing submit it should show up without reloading the page, just like in the innerHTML tutorial. Remember though, that we have used PHP code rather than pure javascript though. In this respect, we could do things like call out to a database to get information, where as with the pure javascript solution, this is an unreasonable thing to do.Code:<?php
echo "Hello, ", $_GET['name'];
?>
A live demo will be available on my CodeCall subdomain.
If this was helpful, please +rep!
Interested in participating in community events?
Want to harness your programming skill and turn it into absolute prowess?
Come join our programming events!
Very nicely done, +rep!
good work
ill +rep you when i can
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
www.amrosama.com | the unholy methods of javascriptCode:eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
Ajax is one of the most popular "buzz" words out there today,
it's good to finally see some code using this technique
+rec![]()
Good job, +rep
thank you for your time in writing this ..very helpful
There are currently 1 users browsing this thread. (0 members and 1 guests)
Bookmarks