Tutorialspoint

JSON with Ajax Example

<html>
   <head>
      <meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type">
		
      <script type = "application/javascript">
         function loadJSON(){
            var data_file = "http://www.tutorialspoint.com/json/data.json";
            var http_request = new XMLHttpRequest();
            try{
               // Opera 8.0+, Firefox, Chrome, Safari
               http_request = new XMLHttpRequest();
            }catch (e){
               // Internet Explorer Browsers
               try{
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");
					
               }catch (e) {
				
                  try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
					
               }
            }
			
            http_request.onreadystatechange = function(){
			
               if (http_request.readyState == 4  ){
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(http_request.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").innerHTML = jsonObj.name;
                  document.getElementById("Country").innerHTML = jsonObj.country;
               }
            }
			
            http_request.open("GET", data_file, true);
            http_request.send();
         }
		
      </script>
	
      <title>tutorialspoint.com JSON</title>
   </head>
	
   <body>
      <h1>Cricketer Details</h1>
		
      <table class = "src">
         <tr><th>Name</th><th>Country</th></tr>
         <tr><td><div id = "Name">Sachin</div></td>
         <td><div id = "Country">India</div></td></tr>
      </table>

      <div class = "central">
         <button type = "button" onclick = "loadJSON()">Update Details </button>
      </div>
		
   </body>
		
</html>

JSON array object

<html>
   <head>
      <title>Creation of array object in javascript using JSON</title>
		
      <script language = "javascript" >

         document.writeln("<h2>JSON array object</h2>");

         var books = { "Pascal" : [ 
            { "Name"  : "Pascal Made Simple", "price" : 700 },
            { "Name"  : "Guide to Pascal", "price" : 400 }],  
				
            "Scala"  : [
               { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
               { "Name"  : "Scala in Depth", "price" : 1300 }]    
         }    

         var i = 0
         document.writeln("<table border = '2'><tr>");
			
         for(i = 0;i<books.Pascal.length;i++){	
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Pascal[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Pascal[i].price +"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }

         for(i = 0;i<books.Scala.length;i++){
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Scala[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Scala[i].price+"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }
			
         document.writeln("</tr></table>");

      </script>

   </head>
	
   <body>
   </body>
	
</html>

JSON object Creation

<html>
   <head>
      <title>Creating Object JSON with JavaScript</title>
	
      <script language = "javascript" >

         var JSONObj = { "name" : "tutorialspoint.com", "year"  : 2005 };
		
         document.write("<h1>JSON with JavaScript example</h1>");
         document.write("<br>");
         document.write("<h3>Website Name = "+JSONObj.name+"</h3>");  
         document.write("<h3>Year = "+JSONObj.year+"</h3>");  

      </script>
		
   </head>
	
   <body>
   </body>
	
</html>

JSON Creating Array Objects with JavaScript

<html>
   <head>
      <title>Creation of array object in javascript using JSON</title>
		
      <script language = "javascript" >

         document.writeln("<h2>JSON array object</h2>");

         var books = { "Pascal" : [ 
            { "Name"  : "Pascal Made Simple", "price" : 700 },
            { "Name"  : "Guide to Pascal", "price" : 400 }],  
				
            "Scala"  : [
               { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
               { "Name"  : "Scala in Depth", "price" : 1300 }]    
         }    

         var i = 0
         document.writeln("<table border = '2'><tr>");
			
         for(i = 0;i<books.Pascal.length;i++){	
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Pascal[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Pascal[i].price +"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }

         for(i = 0;i<books.Scala.length;i++){
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Scala[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Scala[i].price+"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }
			
         document.writeln("</tr></table>");

      </script>

   </head>
	
   <body>
   </body>
	
</html>

JSON Creating Array Objects

<html>
   <head>
      <title>Creation of array object in javascript using JSON</title>
		
      <script language = "javascript" >

         document.writeln("<h2>JSON array object</h2>");

         var books = { "Pascal" : [ 
            { "Name"  : "Pascal Made Simple", "price" : 700 },
            { "Name"  : "Guide to Pascal", "price" : 400 }],  
				
            "Scala"  : [
               { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
               { "Name"  : "Scala in Depth", "price" : 1300 }]    
         }    

         var i = 0
         document.writeln("<table border = '2'><tr>");
			
         for(i = 0;i<books.Pascal.length;i++){	
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Pascal[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Pascal[i].price +"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }

         for(i = 0;i<books.Scala.length;i++){
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Scala[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Scala[i].price+"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }
			
         document.writeln("</tr></table>");

      </script>

   </head>
	
   <body>
   </body>
	
</html>

JSON with JavaScript Example

<html>
   <head>
      <title>JSON example</title>
		
      <script language = "javascript" >
  
         var object1 = { "language" : "Java", "author"  : "herbert schildt" };
         document.write("<h1>JSON with JavaScript example</h1>");
         document.write("<br>");
         document.write("<h3>Language = " + object1.language+"</h3>");  
         document.write("<h3>Author = " + object1.author+"</h3>");   

         var object2 = { "language" : "C++", "author"  : "E-Balagurusamy" };
         document.write("<br>");
         document.write("<h3>Language = " + object2.language+"</h3>");  
         document.write("<h3>Author = " + object2.author+"</h3>");   
  
         document.write("<hr />");
         document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author);
         document.write("<hr />");
  
      </script>
		
   </head>
	
   <body>
   </body>
	
</html>

Java Script Date Display

<!DOCTYPE html>
<html>
   <head>
      <title>Web Page Design</title>
      <script>
         document.writeln(new Date().toISOString().slice(0, 19).replace('T', ' '));

      </script>
   </head>
   <body>
      <br>Current Date is displayed above...
   </body>
</html>

JavaScript TypedArray.toString() function

<html>
   <head>
      <title>JavaScript Example</title>
   </head>
   <body>
      <script type="text/javascript">
         var typedArray = new Int32Array([111, 56, 62, 40, 75, 36, 617, 2, 139, 827 ]);
         var result = typedArray.toString();
         document.write("Contents of the typed array: "+result);
      </script>
   </body>
</html>

JavaScript TypedArray.subarray() function

<html>
   <head>
      <title>JavaScript Example</title>
   </head>
   <body>
      <script type="text/javascript">
         var typedArray = new Int32Array([111, 56, 62, 40, 75, 36, 617, 2, 139, 827 ]);
         var result = typedArray.subarray(3, 7);
         document.write("Contents of the typed array: "+result);
      </script>
   </body>
</html>

JavaScript TypedArray.values() function

<html>
   <head>
      <title>JavaScript Example</title>
   </head>
   <body>
      <script type="text/javascript">
         var typedArray = new Int32Array([11, 5, 13, 4, 15, 3, 17, 2, 19, 8 ]);
         var iterator = typedArray.values();
         document.write("Contents of the typed array: ");
         for(i=0; i<typedArray.length; i++){
            document.writeln(iterator.next().value);
         }  
      </script>
   </body>
</html>

1 2 3 4 5 6 7 ... 86 Next
Advertisements
Loading...