Using Ajax with native JavaScript

Using Ajax with native JavaScript

In this tutorial, I’ll show you how to execute PHP scripts in the web server using Ajax with native JavaScript.

Download source code

This example displays a web page with single button, when clicking on this button; the browser will load the current time from the web server using Ajax.

Using Ajax with native Javascript

1. Structure

/css : contain the CSS files
/js : contain the JavaScript files
/images : contain all images

2. Files


This is the main file, it will be displayed on the first view.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Ajax with native Javascript</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/script.js"></script>

    <div class="container">
        <div class="header">
            <img src="images/BeWebDeveloper.png" />
        </div><!-- header -->
        <h1 class="main_title">Using Ajax with native Javascript</h1>
        <div class="content">
            <span class="button_refresh" onclick="refresh_time()">Refresh time using Ajax</span>
            <div id="time_container">
                <?php echo date('H:i:s'); ?>
        </div><!-- content -->    
        <div class="footer">
            Powered by <a href="#"></a>
        </div><!-- footer -->
    </div><!-- container -->


This PHP file will be executed using Ajax to display the current time.

// sleep for one seconde to see the loader
// display the server time
echo date('H:i:s');


This is the JavaScript file, the core of this tutorial is there.

// refresh_time function
function refresh_time() {
	// initialisation
	var url = 'get_time.php';
	var method = 'POST';
	var params = '';
	var container_id = 'time_container' ;
	var loading_text = '<img src="images/ajax_loader.gif">' ;
	// call ajax function
	ajax (url, method, params, container_id, loading_text) ;

// ajax : basic function for using ajax easily
function ajax (url, method, params, container_id, loading_text) {
    try { // For: chrome, firefox, safari, opera, yandex, ...
    	xhr = new XMLHttpRequest();
    } catch(e) {
	    try{ // for: IE6+
	    	xhr = new ActiveXObject("Microsoft.XMLHTTP");
	    } catch(e1) { // if not supported or disabled
		    alert("Not supported!");
	xhr.onreadystatechange = function() {
								if(xhr.readyState == 4) { // when result is ready
									document.getElementById(container_id).innerHTML = xhr.responseText;
								} else { // waiting for result 
									document.getElementById(container_id).innerHTML = loading_text;
							}, url, true);


This is the CSS file, it contain the design styles

* {
	margin: 0;
	padding: 0;
body {
	padding: 10px;
	background: #eaeaea;
	text-align: center;
	font-family: arial;
	font-size: 12px;
	color: #333333;
.container {
	width: 1000px;
	height: auto;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 10px;
	margin: auto;
	text-align: left;
.header {
	padding: 10px;
.main_title {
	background: #cccccc;
	color: #ffffff;
	padding: 10px;
	font-size: 20px;
	line-height: 20px;
.content {
	padding: 10px;
	min-height: 100px;
	text-align: center;
.footer {
	padding: 10px;
	text-align: right;
.footer a {
	color: #999999;
	text-decoration: none;
.footer a:hover {
	text-decoration: underline;
.button_refresh {
	width: 200px;
	height: 30px;
	display: block;
	text-align: center;
	background: #a3a3a3;
	border: 1px solid #808080;
	color: #ffffff;
	border-radius: 10px;
	cursor: pointer;
	margin: auto;
	font-size: 14px;
	line-height: 30px;
	font-weight: bold;
#time_container {
	text-align: center;
	padding: 20px;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
Ajax, CSS, JavaScript
comments powered by Disqus

Social Profiles

bewebdeveloper on facebook bewebdeveloper on twitter bewebdeveloper on google plus bewebdeveloper on vk bewebdeveloper on youtube bewebdeveloper on tumblr bewebdeveloper rss

Subscribe to our Newsletter




HTML Tutorials
CSS Tutorials