All that is minimum necessary to know about AJAX!

Ajax stands for Asynchronous Javascript And XML, but the simplest may be called as a "javascript on steroids". A programming language quite complicated for a novice programmer. Ajax was made in 2005's prejma popular by Google but other major webdeveloper.

Mainly Ajax is a programming language but rather an asset in the pursuit of a website.

Ajax makes possible communication with the server without needing to load a new page. As all no more and no less.

And to illustrate a little, when we want to have access to a database or want to send information, would normally need to use an HTML form to make posting information on a server. Then you must click on submit and Sarver expect to answer for then to load a new page with the results. Surely many of you are have done so many times and know the feeling of impatience that you get waiting in front of a slow or overloaded server.

This is where Ajax, allowing open communication with the server without needing to load a new page, thus reducing waiting time.

First things first

We first create an HTML form as follows, and we will call "order.html"

<html>
<body> <form name='myForm'> Name: <input type='text' name='username' /> <br /> Time: <input type='text' name='time' /> </form>
</body>
</html>

Field Name will be completed by the user and the Time will handle Ajax. As you can see there is a submit button on the form above.

Deepening

It is good to mention that not all browsers accept the same javascript code to create an Ajax object but we will make it compatible with most major browsers used by us, namely Internet Explorer, Opera, Firefox and also not really a browser that is used the new but rather used, namely Safari The following script will use the method known as "try and catch". In the free version and explained the script will try a piece of code and if it causes an error will continue to try a new piece. Normally when this happens sriptul not running. We will "try" to create an XMLHttpRequest and every time when we continue to receive a script error.

<html>
<body> <script language="javascript" type="text/javascript"> <!-- //Browser Script function ajaxFunction(){ var ajaxRequest;  // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // If something is wrong alert("Your browser broke!"); return false; } } } } //--> </script> <form name='myForm'> Name: <input type='text' name='username' /> <br /> Time: <input type='text' name='time' /> </form> </body> </html>

Script before I made three attempts to realize an XMLHttpRequest object:

  • ajaxRequest = new XMLHttpRequest();

    This piece is for Opera, Firefox and Safari. If you get an error we will continue with two fragmete script for Internet Explorer.

  • ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  • ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

    If even this passage does not work means that we are dealing with a very old browser that does not support XMLHttpRequest and default or Ajax.

Ajax - XMLHttpRequest Object

Starting as to send information to the server must first write a function that will be able to receive this information. We will treat each side of the script that should be included in our document.

We start with onreadystatechange . This property of XMLHttpRequest, making possible storage function that will process the server response.

// Create a function that will first information sent by the server
ajaxRequest.onreadystatechange = function(){
	//still some script here
}

Another property is readyState. This store is the stage where server response. The answer can can process, downloadable , or be in process of completing. The only value that we address and the fact we are really interested in is why which shows that the operation was completed.

When readyState has the value 4 means that the operation has been completed and will have access to information sent by the server.

// Create a function that will first information sent by the server
ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){
//It provides access to information sent by the server
}
}

When we received the answer we can use responseText, that it will take. We call our form " myform " and we use document.FormName.InputName.value to access the form using javascript

// Create a function that will first information sent by the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}

How to send a server request? very simple

  • Setting script URL address that will be in our application uses Ajax.
  • Use the reference to send information .... a. .... quite logical, I say.

We will create a document which we will call "serverTime.php" . Suppose our file "order.html" is in the same folder as "serverTime.php" We have code:

// Create a function that will first information sent by the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText; } }
ajaxRequest.open("GET", "serverTime.php", true);

And now we add the function of reference:

//Create a function that will first information sent by the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);

Incheiere

If we would have been about scripting fragments butt and do something useful with them. We will do that when a user writes something in the field Name and move the cursor in the field Time it to automatically completes the time server.

Volos we attribute this effect onChange.

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // Variabilele sunt urmatoarele
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
//If something is wrong
alert("Your browser broke!");
return false;
}
}
}
//Create a function that will first information sent by the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "serverTime.php", true);
ajaxRequest.send(null);
}

 

//-->
</script>

<form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
</form>
</body>
</html>

And yet I finished with the most difficult and will continue to write php document, namely "serverTime.php" which he mentioned but that still does not exist.

Scripts can work for each other should be in the same directory.

<?php
echo date("H:i:s");
?>


attitude blog

Feedback
My name is

 

Phone

 

Email

 

URL

 

Project Summary (details, timeline, budget, etc.)

 

Attach File (.doc, .docx, .pdf, .txt, .jpg only)