A ajax tutorial for beginners

Posted on December 5, 2007
Filed Under ajax, php, tutorial

What is ajax ?

AJAX is an acronym for Asynchronous JavaScript And XML.

AJAX is not a programming language. but simply a development technique for creating interactive web applications.

A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.

Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.

With AJAX, web applications can send and retrieve data, without reloading the whole web page. This is done by sending HTTP Request to the server, and by modifying only parts of the web page using JavaScript.

AJAX is based on the following open standards:

JavaScript
XML
HTML
CSS

Ajax Example :

Create a file called test.php and put the following codes.

<html>
<head>
<script src=”hint.js”></script>
</head>
<body>
<form>
First Name:<input type=”text” id=”txt1″ onkeyup=”showHint(this.value)”>
</form>
<p>Suggestions: <span id=”txtHint”></span></p>
</body>
</html>

the code of the hint.js look like this

var xmlHttp  //a variable to store xml http objectfunction showHint(str){if (str.length==0){document.getElementById("txtHint").innerHTML=""return}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null){alert ("Browser does not support HTTP Request")return}

var url="test.php"xmlHttp.onreadystatechange=stateChanged  //stateChanged function called on changing the statexmlHttp.open("GET",url,true)  //open the url with the GET methodxmlHttp.send(null)}

function stateChanged(){if (xmlHttp.readyState==4) //state 4 means completed state{document.getElementById("txtHint").innerHTML=xmlHttp.responseText //put the response value inside div}}

function GetXmlHttpObject(){  //function to creat xmlhttp object

var objXMLHttp=nullif (window.XMLHttpRequest{objXMLHttp=new XMLHttpRequest() //for firefox, opera etc}else if (window.ActiveXObject){objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") //for IE}return objXMLHttp}

Now create the file called test.php put the following code:

echo “this is just a simple hint”;

When the user inputs data, a function called “showHint()” is executed. The execution of the function is triggered by the “onkeyup” event. In other words: Each time the user moves his finger away from a keyboard key inside the txt1 field, the function showHint is called and the output “this is just a simple hint” is displayed in that span.

Popularity: 5% [?]

Follow me on twitter at http://twitter.com/roshanbh.

» This blog’s Code and content is stolen - Please help
» 6 free ajax chat applications using PHP
» A php tutorial for beginners
» About Me