In this article I would like to tell about technologies such as ajax.
As a rule I stick to this philosophy – better to see once than to hear 100 times, so basically will practice rather than theory.

At first I will say that ajax is just a technology for exchanging data between the client and the server uses a programming language based on javascript.

This technology allows the HTTP protocol asynchronous, which in turn gives us the opportunity to exchange data without reloading the page.

Ajax tutorial

Jquery ajax tutorial

In that it works this way: we take something (whether the contents of the tag h1) and pass it to the server (eg Apache) through a special object XMLhttpRequest.

The server processes the data (for example script in PHP) and returns the client-side result of their treatment. Further the client script (eg JS) can do anything, for example, insert a new content in the same tag H1.
All told basic idea of technology is written, now proceed to its implementation.
For a basis we take JS freymovrk Jquery, PHP framework Codeigniter.

So, we start by creating an html page, in Codeigniter they are called views. Our html page is called sample_view.php.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Sample ajax tutorial</title>
        <link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="<?php echo base_url();?>js/admin.js"></script>
      </head>
    <body>
        <div id="text">
            <h1 class="h1"></h1>
            <h2 class="h2"></h2>
        </div>
    </body>
</html>

Everything here is extremely simple. The main thing what to know is the fact that the code framework Jquery better connect the first among all the js scripts. Also we have created a fairly simple layout consisting of several div tags and headers.

Just to show you the code which displays the styles for our page, it has name as you can see style.css

#text{

position: relative;

margin: auto;

padding-top: 10%;

width:60%;

background-color: #eeeddd;

}

#caption{

position: absolute;

top:20px;

width: 100%;

padding-top: 2%;

text-align: center;

background-color: gray;

}

.h1{

text-align: center;

font-size: xx-large;

font-weight: bold;

font-family: Gill, Helvetica, sans-serif;

}

.h2{

text-align: right;

padding-right: 10%;

padding-top: 10%;

font-family: Gill, Helvetica, sans-serif;

}

There is nothing to us interested so you can just take and copy. After all, we are not designers)

Well here we are getting to the most interesting, namely the client script, the name of which I gave very angry – admin.js

$(document).ready(function(){
        setInterval(function(){

         $.ajax({
                type: "POST",
                url: "index.php/sample/update/",
                dataType: "json",
                  beforeSend: function(){
                         $("#text").val('');
	                  $(".h1").hide();
                         $(".h2").hide();
		    }
	           success: function(mes){
  	                  $(".h1").text(mes.text);
       	           $(".h2").text(mes.author);
                         $(".h1").fadeIn(3000);
                         $(".h2").fadeIn(3000);
	                  $(".h1").fadeOut(1000);
       	           $(".h2").fadeOut(1000);
	           }
        });
},5000);
        });

I tried to make the most simple example, what would you till now in this technology.

Thus, our script will work as soon as the page is loaded. And it will run ajax request with an interval of 5000ms. This provides us a function setInterval. Coming attribute ajax request we indicate request type, address of the server on which the script will be executed processing data sent by us (url), the type of data returned by the server (dataType). Further there are 2 functions beforeSend and succes, first is performed before shipment, and second is performed after successful receipt of a response from the server (200 ok). Methods val, hide, text, fadeIn and fadeOut I think speak for themselves.

We still have to work server side. So start with the controller, its name sample.

<?php

class Sample extends Controller {

        function  __construct() {

		parent::Controller();
	}

	function index()
	{
		$this->load->view('sample_view');
	}
         function update()
	{
            $data = $this->sample_model->get_data();
            if(isset($data)){
                foreach ($data as $key => $list){
                $d['text'] = $list['text'];
                $d['id'] = $list['id'];
                $d['author'] = $list['author'];
                }
            echo json_encode($d);
            }
            else{ 

                echo "false";
            }
}
}
?>

Here the method index () loads our html page. And all processing of data is transferred in the method update (). In the variable $ data, we load data from database into an array, and then through the loop forming a new one. The function of json_encode we translate our array in the type of JSON. And in the end send it back to the client side.

Well finally show you the code of our model, its responsibilities is to work with databases (sample_model.php)

	<?php
class Sample_model extends Model{
    //put your code here
    function Sample_model(){
        parent::Model();
    }

    function get_data(){
            $this->db->select('*');
            $this->db->order_by('id', 'random');
            $this->db->limit(1);
            $query = $this->db->get('sample');
            foreach ($query->result_array() as $row) {
                $temp[$row['id']] = array(
                    'id' => $row['id'],
                    'text' => $row['text'],
                    'author' => $row['author']
                );
             }
            $query->free_result();
            return $temp;
    }
}
?>

I think that all people understand easily.

Source code - Jquery ajax tutorial
Demo(please wait 7-10 seconds when page load)- Jquery ajax sample

I think next time to show a more complex example and reveal more of the theory. I want to ask about what you would be interested in reading. So who are interested send questions and suggestions in the comments to this article. And if you enjoyed this article put a link to it on your personal blog or anywhere else. Thank you!