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 :
- Lets have a brief look on the output of the project that we are developing which is shown in the image:
- So now first of all download xampp server software and install it in your machine
- 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 :
- After opening XAMPP Control Panel you will have the following xampp window :
- Now click on the start button corresponding to the Apache and Mysql module as shown :
- 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.
- 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>
- Thus after writing the code you will have the following look of ur idex.html file
- 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" } ] }
- So after writing the code you will have the following look of your window :
- 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.
- 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(); }
- So after inserting the code in the script tag you will have the following look of your window :
- 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 :
- 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(); }
- 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 :
- 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>
- So after adding the code in the style tag of the index.html file it will look like as shown in the image :
- Now when you run it on localhost/dynamicmovies url you will get the following window :
- Hence, we have successfully implemented the functionalities of Ajax, Json and Javascript in this project.
That was awesome . Thank you dear Brad 🙂