Parth H. Dave's Blogger: Ajax

ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh.

Ajax is “the method of exchanging data with a server, and updating parts of a web page - without reloading the entire page.”

Let's have a look at Ajax,

Animation.aspx

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Control Toolkit</title>
<style type="text/css">
.panelClass {
background-color: lime;
width: 300px;
}
</style>
<script type="text/javascript">
function pageLoad()
{
var ae = $find("ae");
var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
ae.set_OnClick(animation);
ae.OnClick();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ae" runat="server"> </asp:ScriptManager>
<div>
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server"> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
<br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
<br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
<br /> </asp:Panel>
<input type="button" id="Button1" runat="server" value="Launch Animation" />
<cc1:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Button1"> </cc1:AnimationExtender>
</div>
</form>
</body>
</html>

Guys, Please download Ajax Control Toolkit if you don't have already.

Keep exploring. If you have any doubt, please feel free to ask me.

First,We create one .Txt file which contains names of different countries.

Country.txt File:

[  
    {  
        "display": "India",  
    },   
    {  
        "display": "China",  
    },   
    {  
        "display": "USA",  
    },   
    {  
        "display": "UK",  
    },   
    {  
        "display": "Canada",  
    },   
    {  
        "display": "Japan",  
    },   
    {  
        "display": "Russia",  
    },   
]  

In the second step, Reads the data from file and display it to the webpage. Use XMLHttpRequest to read the text file, and use fetchData () to display the array.

JsonHttpXmlReqbyAjax.html

<!DOCTYPE html>  
<html>  
<body>  
<div id="maindiv"></div>  
<script>  
var xmlhttp = new XMLHttpRequest();  
var url = "Country.txt";  
xmlhttp.onreadystatechange = function()  
{  
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  
   {  
         var myarray = JSON.parse(xmlhttp.responseText);  
         fetchData(myarray);  
   }  
}  
xmlhttp.open("GET", url, true);  
xmlhttp.send();  
function fetchData(arr)  
{  
         var out = "";  
         var i;  
          for(i = 0; i < arr.length; i++)  
         {  
               out += arr[i].display + '<br>';  
         }  
         document.getElementById("maindiv").innerHTML = out;  
}  
</script>  
</body>  
</html>  

After completing all these steps, you will get following output.

India

China

USA

Canada

Japan

Russia

Enjoy Coding...!!!

Parth H. Dave's Blogger

Monday, March 13, 2017

Create an Animation Using Ajax

Saturday, January 14, 2017

JSON (JavaScript Object Notation) HTTP Request by Ajax to Show Data on Webpage