Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Ajax innerHTML

innerhtml innerHTML ajax

  • Please log in to reply
5 replies to this topic

#1 Termana

Termana

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 971 posts

Posted 23 September 2009 - 03:51 AM

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:

<!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>


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.


<!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>


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.


<?php
echo "Hello, ", $_GET['name'];
?>


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.
A live demo will be available on my CodeCall subdomain.

If this was helpful, please +rep!
  • 3

Interested in participating in community events?
Want to harness your programming skill and turn it into absolute prowess?
Come join our programming events!


#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 23 September 2009 - 04:29 AM

Very nicely done, +rep!
  • 0

#3 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 23 September 2009 - 05:18 AM

good work
ill +rep you when i can
  • 0
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"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#4 debtboy

debtboy

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 499 posts

Posted 23 September 2009 - 08:45 AM

Ajax is one of the most popular "buzz" words out there today,
it's good to finally see some code using this technique
+rec :)
  • 0

#5 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 25 September 2009 - 05:04 AM

Good job, +rep
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#6 reddem0n

reddem0n

    CC Newcomer

  • Just Joined
  • PipPip
  • 10 posts

Posted 29 September 2009 - 11:47 AM

thank you for your time in writing this ..very helpful
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download