AJAX Introduction

AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX.AJAX, short for Asynchronous JavaScript And XML, allows you to load data in the background and display it on your webpage, without refreshing the page. This allows you to create websites with much richer functionality. Popular web applications like Gmail, Outlook Web Access, and Google Maps uses AJAX extensively, to provide you with a more responsive, desktop-like experience.

Using AJAX can be a bit cumbersome, because the various browsers have different implementations to support AJAX. Normally this would force you to write code to respond differently, depending on the browser, but fortunately, jQuery has done this for us, which allows us to write AJAX functionality with as little as a single line of code.

You should be aware of the fact that thre are both advantages and disadvantages to using AJAX on your page though, which means that you should always consider carefully before deciding to use it instead of doing a regular postback to the server. Here's a summary:

Advantages

Your page will be more pleasant to use, when you can update parts of it without a refresh, which causes the browser to flicker and the statusbar to run.

Because you only load the data you need to update the page, instead of refreshing the entire page, you save bandwidth.

Disadvantages

Because the updates are done by JavaScript on the client, the state will not register in the browsers history, making it impossible to use the Back and Forward buttons to navigate between various states of the page.

For the same reason, a specific state can't be bookmarked by the user.

Data loaded through AJAX won't be indexed by any of the major search engines.

People using browsers without JavaScript support, or with JavaScript disabled, will not be able to use the functionality that you provide through AJAX.

Example -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo of introduction to Ajax by PuStudy.Com</title>
    <link href="../includes/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" tabindex="1" onblur="select_topic()" />
</div>
<p id="found" tabindex="2"></p>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
 var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON']; 
$('#search').typeahead({source: subjects})
</script>
<script>
	function select_topic(){
	 var search_term = document.getElementById("search").value;
	 var xhr;
	 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
	 var data = "search_string=" + search_term;
	 xhr.open("POST", "introductory-demo.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
	 xhr.onreadystatechange = return_data;
	function return_data() {
	 if (xhr.readyState === 4) {
      if (xhr.status === 200) {
       //alert(xhr.responseText);	   
	   document.getElementById("found").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
	}
	}
 </script>
</body>
</html>