HTML 5 TutorialsCreate a simple project using Ajax , Json & JavaScript

Create a simple project using Ajax , Json & JavaScript

In this session today we will be creating a project using the functionalities of AJAX, JSON and JavaScript.
So in this project we will create a normal drop down box from which selecting an item will display its details and information.

  • So to get the hand’s on experience on the project , follow the steps given below :

  1. Lets have a brief look on the output of the project that we are developing which is shown in the image:
  2. 1

  3. So now first of all download xampp server software and install it in your machine
  4. After installing the xampp server just open your XAMPP control panel from start menu -> All Program -> XAMPP -> XAMPP control menu as shown in the image below :
  5. 2

  6. After opening XAMPP Control Panel you will have the following xampp window :
  7. 3

  8. Now click on the start button corresponding to the Apache and Mysql module as shown :
  9. 4

  10. Now go to the folder htdocs from the start menu -> All Program -> XAMPP -> XAMPP htdocs folder.In this folder create new folder for our project.Let’s name it as dynamicmovies.
  11. 5

  12. Now in your dynamicmovies folder create a file called as index.html and write the following code in it that is given below :
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Movies</title>
    
    	<style>
    
    
    	</style>
    
    	<script>
    
    
    	</script>
    </head>
    <body>
    <div id="container">
    <h1>My Favorite Movies</h1>
    	<div id="movie_title"></div>
    	<br />
    	<div id="movie_info"></div>
    </div>
    </body onload="getMovieTitles()">
    </html>
    
  13. Thus after writing the code you will have the following look of ur idex.html file
  14. 6

  15. Now create another file in dynamicmovies folder and name it as strong>movies.json and write the following code in it:
    {
        "movies": [
            {
                "title": "The Godfather",
                "year": "1972",
                "genre": "Drama",
                "director": "Francis Ford Copolla"
            },
            {
                "title": "Superbad",
                "year": "2007",
                "genre": "Comedy",
                "director": "Greg Mottola"
            },
            {
                "title": "The Departed",
                "year": "2006",
                "genre": "Drama",
                "director": "Martin Scorsese"
            },
            {
                "title": "Saving Private Ryan",
                "year": "1998",
                "genre": "Action",
                "director": "Steven Spielberg"
            },
            {
                "title": "The Expendables",
                "year": "2010",
                "genre": "Action",
                "director": "Sylvester Stallone"
            }
        ]
    }
    
  16. So after writing the code you will have the following look of your window :
  17. 7

  18. Now if we want to view the title in the drop down list then we have to add the code in the script tag of the index.html file.
  19. So now open your index.html file and add the following code in its script tag :
    function getMovieTitles(){
    	var xmlhttp;
    	if (window.XMLHttpRequest){
    		xmlhttp = new XMLHttpRequest();
    	} else {
      		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      	}
    	xmlhttp.onreadystatechange = function(){
      		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        		var jsondata = JSON.parse(xmlhttp.responseText); //retrieve result as an JavaScript object
       			var movies = jsondata.movies;
    			var output='<form>';
    			output+='<select id="movie_select" onchange="movieSelect()" >';
       			for (var i=0; i < movies.length; i++){
        			output +='<option value="'+i+'">'+movies[i].title+'</option>';
       			}
    			output+='</select>';
    			output+='</form>';
       			document.getElementById("movie_title").innerHTML=output;
        	}
      	}
    	xmlhttp.open("GET","movies.json",true);
    	xmlhttp.send();
    }
    
  20. So after inserting the code in the script tag you will have the following look of your window :
  21. 8

  22. Now if you want to see the output then through your web browser go to the following url localhost/dynamicmovies/ and you will have the following screen :
  23. 9

  24. Now suppose we have to print some other data in it then we have to add some more functions in the script tag of index.html file which is as follows:
    function movieSelect(){
    	var selectBox = document.getElementById("movie_select");
    	var movieIndex = selectBox.options[selectBox.selectedIndex].value;
    	getMovieInfo(movieIndex);
    }
    function getMovieInfo(i){
    	var xmlhttp;
    	if (window.XMLHttpRequest){
    		xmlhttp = new XMLHttpRequest();
    	} else {
      		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      	}
    	xmlhttp.onreadystatechange = function(){
      		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        		var jsondata = JSON.parse(xmlhttp.responseText); //retrieve result as an JavaScript object
       			var movies = jsondata.movies;
    			var output='';
       			output+= '<li>Year: '+movies[i].year+'</li>';
    			output+= '<li>Genre: '+movies[i].genre+'</li>';
    			output+= '<li>Director: '+movies[i].director+'</li>';
       			document.getElementById("movie_info").innerHTML=output;
        	}
      	}
    	xmlhttp.open("GET","movies.json",true);
    	xmlhttp.send();
    }
    
  25. Now suppose if you run the index.html file inside the localhost/dynamicmovies and after it you select the movie from the drop down list you will get the details of the movie that we added :
  26. 11

  27. So now if we want to add some styling in it then we have to add the following code in the style tag of the index.html file :
    <style>
    h1{text-align:center;}
    h4{margin:0;padding:5px;background:#f4f4f4;}
    li{list-style:none;padding-left:5px;}
    #container{width:600px;margin:80px auto;overflow:hidden;border:1px #666 dashed;padding:15px;min-height:200px;}
    </style>
    
  28. So after adding the code in the style tag of the index.html file it will look like as shown in the image :
  29. 12

  30. Now when you run it on localhost/dynamicmovies url you will get the following window :
  31. 13

  32. Hence, we have successfully implemented the functionalities of Ajax, Json and Javascript in this project.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -