Java/j2Ee Discussions

[andhrawatch007]

[quote name='Java01' timestamp='1372801547' post='1303912875']
ooree nee eshaloooo ....... eee bomma lu endhi ... eee questions endhi ..... deshani brashtu patisthunavu kadhraa nayanaaa.....
[/quote]

[chinni005]

aaa line lo vochi ajax chaduvkondamma...!

[chinni005]

[img]http://www.codeproject.com/KB/ajax/AjaxTutorial/AJAX1.jpg[/img]

[chinni005]

There are many books and articles out there explaining the 5 Ws (Who, What, Where, When, Why) of Ajax, but I will explain to you in my own simple way. So what is Ajax? The term AJAX (Asynchronous JavaScript and XML) has been around for three years created by Jesse James Garrett in 2005. The technologies that make Ajax work, however, have been around for almost a decade. Ajax makes it possible to update a page without a refresh. Using Ajax, we can refresh a particular DOM object without refreshing the full page.
[b] Background of Ajax[/b]

In Jesse Garrett’s original article that coined the term, it was AJAX. The “X” in AJAX really stands forXMLHttpRequest though, and not XML. Jesse later conceded that Ajax should be a word and not an acronym and updated his article to reflect his change in heart. So “Ajax” is the correct casing. As its name implies, Ajax relies primarily on two technologies to work: JavaScript and the XMLHttpRequest. Standardization of the browser DOM (Document Object Model) and DHTML also play an important part in Ajax’s success, but for the purposes of our discussion we won't examine these technologies in depth.
[b] How Ajax Works[/b]

At the heart of Ajax is the ability to communicate with a Web server asynchronously without taking away the user’s ability to interact with the page. The XMLHttpRequest is what makes this possible. Ajax makes it possible to update a page without a refresh. By Ajax, we can refresh a particular DOM object without refreshing the full page. Let's see now what actually happens when a user submits a request:
[img]http://www.codeproject.com/KB/ajax/AjaxTutorial/AJAX2.JPG[/img][list]
[*]Web browser requests for the content of just the part of the page that it needs.
[*]Web server analyzes the received request and builds up an XML message which is then sent back to the Web browser.
[*]After the Web browser receives the XML message, it parses the message in order to update the content of that part of the page.
[/list]
AJAX uses JavaScript language through HTTP protocol to send/receive XML messages asynchronously to/from Web server. Asynchronously means that data is not sent in a sequence.

[chinni005]

[b] Common Steps that AJAX Application Follows[/b]

The figure below describes the structure of HTML pages and a sequence of actions in Ajax Web application:
[img]http://www.codeproject.com/KB/ajax/AjaxTutorial/AJAX2.jpg[/img][list]
[*]The JavaScript function handEvent() will be invoked when an event occurred on the HTML element.
[*]In the handEvent() method, an instance of XMLHttpRequest object is created.
[*]The XMLHttpRequest object organizes an XML message within about the status of the HTML page, and then sends it to the Web server.
[*]After sending the request, the XMLHttpRequest object listens to the message from the Web server.
[*]The XMLHttpRequest object parses the message returned from the Web server and updates it into the DOM object.
[/list]
[b] Let's See How Ajax Works in the Code[/b]

Let’s start to put these ideas together in some code examples.
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
form id="form1" runat="server"

div
input type="text" id="lblTime"

br
input type="button" id="btnGetTime" value="Get Time" onclick="GetTime();"

div
form[list]
[*]From the above code, our DOM object is (input type="text" id="lblTime") which we have to refresh without refreshing the whole page. This will be done when we press the event of a button, i.e. onclick.
[*]In this code, our handEvent() is GetTime() from the above Figure-2 if you take a look at it.
[/list]
Let's see now how we create an XmlHttpRequest object and make Ajax work for us.
The basic implementation of the XMLHttpRequest in JavaScript looks like this:
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
[color=blue]var[/color] xmlHttpRequest;

[color=blue]function[/color] GetTime()
{
[color=#008000][i]//[/i][/color][color=#008000][i]create XMLHttpRequest object
[/i][/color] xmlHttpRequest = (window.XMLHttpRequest) ?
[color=blue]new[/color] XMLHttpRequest() : [color=blue]new[/color] ActiveXObject([color=purple]"[/color][color=purple]Msxml2.XMLHTTP"[/color]);

[color=#008000][i]//[/i][/color][color=#008000][i]If the browser doesn't support Ajax, exit now
[/i][/color] [color=blue]if[/color] (xmlHttpRequest == [color=blue]null[/color])
[color=blue]return[/color];

[color=#008000][i]//[/i][/color][color=#008000][i]Initiate the XMLHttpRequest object
[/i][/color] xmlHttpRequest.open([color=purple]"[/color][color=purple]GET"[/color], [color=purple]"[/color][color=purple]Time.aspx"[/color], [color=blue]true[/color]);

[color=#008000][i]//[/i][/color][color=#008000][i]Setup the callback function
[/i][/color] xmlHttpRequest.onreadystatechange = StateChange;

[color=#008000][i]//[/i][/color][color=#008000][i]Send the Ajax request to the server with the GET data
[/i][/color] xmlHttpRequest.send([color=blue]null[/color]);
}
[color=blue]function[/color] StateChange()
{
[color=blue]if[/color](xmlHttpRequest.readyState == [color=navy]4[/color])
{
document.getElementById([color=purple]'[/color][color=purple]lblTime'[/color]).value = xmlHttpRequest.responseText;
}
}[list]
[*] [size=4]
Now from the above Figure-2 handEvent() i.e. GetTime() creates an XMLHttpRequest object inside it like this:[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
//create XMLHttpRequest object
xmlHttpRequest = (window.XMLHttpRequest) ?
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
[*] [size=4]
If the browser does not support Ajax, it will return false.[/size]
[*] [size=4]
Next we open our connection to the server with our newly created XMLHttpRequest object. Here the[i]Time.aspx[/i] page is the page from which we will get XML message that is stored on the Web server.[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
//Initiate the XMLHttpRequest object
xmlHttpRequest.open("GET", "Time.aspx", true);
[*] [size=4]
You often hear the term “callback” replace the term “postback” when you work with Ajax. That’s because Ajax uses a “callback” function to catch the server’s response when it is done processing your Ajax request. We establish a reference to that callback function like this. Here StateChange is a function where we update or set a new value to our DOM object, i.e "lblTime".[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
//Setup the callback function
xmlHttpRequest.onreadystatechange = StateChange; [size=4]
Let's have a look at our callback function:[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
[color=blue]function[/color] StateChange()
{
[color=blue]if[/color](xmlHttpRequest.readyState == [color=navy]4[/color])
{
document.getElementById([color=purple]'[/color][color=purple]lblTime'[/color]).value = xmlHttpRequest.responseText;
}
} [size=4]
onreadystatechange will fire multiple times during an Ajax request, so we must evaluate theXMLHttpRequest’s “readyState” property to determine when the server response is complete which is 4. Now if readyState is 4, we can update the DOM object with the response message we get from the Web server.[/size]
[*] [size=4]
As the request method we are sending is "GET" (remember it is case sensitive), there is no need to send any extra information to the server.[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
//Send the Ajax request to the server with the GET data
xmlHttpRequest.send(null); [size=4]
In [i]Time.aspx.cs[/i] on Page_Load event, write a simple response like this which is our response message:[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1#"]Copy Code[/url][/right][/size][/color]
Response.Write( DateTime.Now.Hour + [color=purple]"[/color][color=purple]:"[/color] + DateTime.Now.Minute +
[color=purple]"[/color][color=purple]:"[/color] + DateTime.Now.Second ); [size=4]
That’s it. That’s Ajax. Really.[/size]
[/list]
[b] Key Points to be Remembered in Ajax[/b]

There are three key points in creating an Ajax application, which are also applicable to the above Tutorial:[list]
[*]Use XMLHttpRequest object to send XML message to the Web server
[*]Create a service that runs on Web server to respond to request
[*]Parse XMLHttpRequest object, then update to DOM object of the HTML page on client-side
[*]
[/list]

[chinni005]

src: http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1

[ZuniorVentiyar]

AJAX anteee Dishwasher eee kdhaaa???? ... doller shop lo chusaaaa .... dollar ki oka bottle anukuntaaa

[quote name='Chinni_' timestamp='1372802005' post='1303912904']
aaa line lo vochi ajax chaduvkondamma...!
[/quote]

[chinni005]

[quote name='Java01' timestamp='1372801547' post='1303912875']
ooree nee eshaloooo ....... eee bomma lu endhi ... eee questions endhi ..... deshani brashtu patisthunavu kadhraa nayanaaa.....
[/quote]
[size=4] [/size]

[chinni005]

[quote name='Java01' timestamp='1372802125' post='1303912909']
AJAX anteee Dishwasher eee kdhaaa???? ... doller shop lo chusaaaa .... dollar ki oka bottle anukuntaaa
[/quote]
[size=4] [/size]

[ZuniorVentiyar]

annayaa nuvvu sooper aheee .....

[quote name='Chinni_' timestamp='1372802105' post='1303912908']
src: [url="http://www.codeproject.com/Articles/31155/Ajax-Tutorial-for-Beginners-Part-1"]http://www.codeproje...eginners-Part-1[/url]


[/quote]

[ZuniorVentiyar]

[quote name='Chinni_' timestamp='1372802150' post='1303912914']

[/quote]

[chinni005]

ajax with xml and Json... chaduvkondamma..


[img]http://www.codeproject.com/KB/ajax/AjaxTutorial2/AjaxII2.JPG[/img]
[b] Introduction[/b]

In my first article [b]"Ajax Tutorial for Beginners: Part 1"[/b] which you can read [url="http://www.codeproject.com/KB/ajax/AjaxTutorial.aspx"]here[/url], I discussed Ajax, how it works, and how to create an XMLHttpRequest object. Now let us play some more with Ajax. In this article, I will be explaining XML and JSON (JavaScript Object Notation). The purpose of explaining both XML and JSON technology is not to compare one to the other, but to distribute the knowledge of both, as I feel confident in saying many beginners are aware of XML but not JSON.
If you are hearing this word, "JSON," for the first time, please do not worry about it as it is more simple than XML and also simple to use in JavaScript.
I will not describe: What is JSON? How is it formed? When was it started? bla bla bla... All I will say to you guys is that it is a lightweight data-interchange format, which is easy to read and write. Now let's be more practical.
[b] Learn to Convert any XML File into JSON[/b]

Let's quickly have a look into the following XML file.
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
[color=blue]<[/color] [color=#800000]weatherdetails[/color][color=blue]>[/color]

[color=blue]<[/color] [color=#800000]weatherreport[/color] [color=red]city[/color][color=blue]="[/color][color=blue]Mumbai"[/color] [color=red]weather[/color][color=blue]="[/color][color=blue]32"[/color] [color=blue]>[/color][color=blue]<[/color][color=blue]/[/color][color=#800000]weatherreport[/color][color=blue]>[/color]
[color=blue]<[/color] [color=#800000]weatherreport[/color] [color=red]city[/color][color=blue]="[/color][color=blue]Delhi"[/color] [color=red]weather[/color][color=blue]="[/color][color=blue]28"[/color] [color=blue]>[/color][color=blue]<[/color][color=blue]/[/color][color=#800000]weatherreport[/color][color=blue]>[/color]

[color=blue]<[/color] [color=#800000]weatherreport[/color] [color=red]city[/color][color=blue]="[/color][color=blue]Chennai"[/color] [color=red]weather[/color][color=blue]="[/color][color=blue]34"[/color] [color=blue]>[/color][color=blue]<[/color][color=blue]/[/color][color=#800000]weatherreport[/color][color=blue]>[/color]
[color=blue]<[/color] [color=#800000]weatherreport[/color] [color=red]city[/color][color=blue]="[/color][color=blue]Kolkata"[/color] [color=red]weather[/color][color=blue]="[/color][color=blue]26"[/color] [color=blue]>[/color][color=blue]<[/color][color=blue]/[/color][color=#800000]weatherreport[/color][color=blue]>[/color]

[color=blue]<[/color] [color=blue]/[/color][color=#800000]weatherdetails[/color][color=blue]>[/color]
This XML file gives weather details of the four major cities in India. Let's learn some basic things about how to convert this XML file into JSON. XML JSON < xx>yyy< /xx> { "xx":"yyy" }
See that above code < xx> is a tag which has the following value yyy. When converted to JSON this becomes { "xx" : "yyy" }. Let us take the above XML file and try to convert it now:
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
XML: < weatherdetails>yyy< /weatherdetails>
[b]Note:[/b] I have replaced the inside part of < weatherdetails> to yyy for the time being.
JSON: From the conversion table, JSON will be:
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
{ "weatherdetails" : "yyy" },
Isn't it simple? Yes.
Ok, now what if we have attributes inside the tag? Let us take another scenario. XML JSON < xx yy='nn'>< /xx> { "xx": {"yy":"nn"} }
See the above code <xx> is a tag which has an attribute yy='nn', when we convert this into JSON it becomes { "xx" : {"yy":"nn"}}. Let's take the above XML file and try to convert now:
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
XML: < weatherreport city="Mumbai" weather="32" >< /weatherreport><br>
JSON: from the conversion table, JSON will be { "weatherreport" : {"city":"Mumbai",
"weather":"32"} }
Now what if we have an array of the same tags. If this is the case, we have to use an array and place all the tags inside []. Like here in the XML file, there are four weatherreport tags, so we have to place all its attributes in an array. Let's see how.
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
{ "weatherreport" :
[
{"city": "Mumbai", "weather": "32" },
{"city": "Delhi", "weather": "28" },
{"city": "Chennai", "weather": "34" },
{"city": "Kolkata", "weather": "26" }
]
}
Now in the first scenario, I have replaced all weatherreport tags to yyy, let's replace it with the above JSON code to get our final JSON output.
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
{ "weatherdetails":
{
"weatherreport":
[
{"city": "Mumbai", "weather": "32" },
{"city": "Delhi", "weather": "28" },
{"city": "Chennai", "weather": "34" },
{"city": "Kolkata", "weather": "26" }
]
}
}
Yes that's it, we have converted an XML file into JSON. Now let's use this XML and JSON file into Ajax together.
[b] How Can we Use Ajax with XML Response and with JSON[/b]

In the code, I have explained that the response coming from the web server depends upon user selection, i.e. whether the user will select XML type or JSON. In this example, the user will type any one of the major cities in a textbox which will return the weather report of that city. You can add as many details as you want, right now I have only added weather temperature in degrees Celsius.
Ok let's start our weather report example in Ajax. See the below figure-1.
[img]http://www.codeproject.com/KB/ajax/AjaxTutorial2/Ajaxii2.jpg[/img][list]
[*]Web browser requests the content of just the part of the page that it needs to refresh.
[*]Web server analyzes the received request and builds up an XML message or JSON depend upon the user selection, which is then sent back to the web browser.
[*]After the web browser receives the XML/JSON message, it parses the message in order to update the content of that part of the page.
[/list]
Ok, let's start building some front end for the user.
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
[color=blue]<[/color] [color=#800000]form[/color] [color=red]id[/color][color=blue]="[/color][color=blue]form1"[/color] [color=red]runat[/color][color=blue]="[/color][color=blue]server"[/color][color=blue]>[/color]

[color=blue]<[/color] [color=#800000]div[/color][color=blue]>[/color]
[color=blue]<[/color] [color=#800000]h3[/color][color=blue]>[/color]Small Ajax Application using XML & JSON to see the Weather
of a particular city [color=blue]<[/color] [color=blue]/[/color][color=#800000]h3[/color][color=blue]>[/color][color=blue]<[/color] [color=#800000]br[/color] [color=blue]/[/color][color=blue]>[/color]
[color=blue]<[/color] [color=#800000]h5[/color][color=blue]>[/color]( At present weather details is limited to four major cities
of India i.e. mumbai, delhi, chennai & kolkata )[color=blue]<[/color][color=blue]/[/color][color=#800000]h5[/color][color=blue]>[/color]

[color=blue]<[/color] [color=#800000]br[/color] [color=blue]/[/color][color=blue]>[/color]
Choose Type here :
[color=blue]<[/color] [color=#800000]asp:DropDownList[/color] [color=red]runat[/color][color=blue]="[/color][color=blue]server"[/color] [color=red]ID[/color][color=blue]="[/color][color=blue]ddlType"[/color] [color=blue]>[/color]
[color=blue]<[/color] [color=#800000]asp:ListItem[/color] [color=red]Value[/color][color=blue]="[/color][color=blue]XML"[/color] [color=red]Selected[/color][color=blue]="[/color][color=blue]True"[/color] [color=blue]>[/color]XML
[color=blue]<[/color] [color=blue]/[/color][color=#800000]asp:ListItem[/color][color=blue]>[/color]

[color=blue]<[/color] [color=#800000]asp:ListItem[/color] [color=red]Value[/color][color=blue]="[/color][color=blue]JSON"[/color][color=blue]>[/color]JSON[color=blue]<[/color] [color=blue]/[/color][color=#800000]asp:ListItem[/color][color=blue]>[/color]
[color=blue]<[/color] [color=blue]/[/color][color=#800000]asp:DropDownList[/color][color=blue]>[/color]
[color=blue]<[/color] [color=#800000]br[/color] [color=blue]/[/color][color=blue]>[/color][color=blue]<[/color] [color=#800000]br[/color] [color=blue]/[/color][color=blue]>[/color]

Type the city here: [color=blue]<[/color] [color=#800000]input[/color] [color=red]type[/color][color=blue]="[/color][color=blue]text"[/color] [color=red]id[/color][color=blue]="[/color][color=blue]txtCity"[/color]
[color=red]onkeyup[/color][color=blue]="[/color][color=blue]FetchWeather(this.value)"[/color] [color=blue]/[/color][color=blue]>[/color]
[color=blue]<[/color] [color=#800000]br[/color] [color=blue]/[/color][color=blue]>[/color]

[color=blue]<[/color] [color=#800000]asp:Label[/color] [color=red]runat[/color][color=blue]="[/color][color=blue]server"[/color] [color=red]ID[/color][color=blue]="[/color][color=blue]lblWeather"[/color] [color=blue]/[/color][color=blue]>[/color]
[color=blue]<[/color] [color=blue]/[/color][color=#800000]div[/color][color=blue]>[/color]
[color=blue]<[/color] [color=blue]/[/color][color=#800000]form[/color][color=blue]>[/color]
[img]http://www.codeproject.com/KB/ajax/AjaxTutorial2/CodeImage1.jpg[/img][list]
[*]User will select the type of the response he/she wants from the web server.
[*]User will type the city he/she wants to see the weather report.
[*]Here in our textbox we have fired an event 'onkeyup' which will call the FetchWeather() function.
[/list]
Now let's have a look to our Ajax FetchWeather function which we have to write in the JavaScript part.
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
[color=blue]var[/color] xmlHttpRequest;
[color=blue]var[/color] type;
[color=blue]var[/color] _City;
[color=blue]function[/color] FetchWeather(city)
{
_City = city.toLowerCase();

xmlHttpRequest = (window.XMLHttpRequest) ? [color=blue]new[/color] XMLHttpRequest() :
[color=blue]new[/color] ActiveXObject([color=purple]"[/color][color=purple]Msxml2.XMLHTTP"[/color]);

[color=blue]if[/color] (xmlHttpRequest == [color=blue]null[/color])
[color=blue]return[/color];

[color=blue]var[/color] ddlType = document.getElementById([color=purple]'[/color][color=purple]ddlType'[/color]);
type = ddlType.options[ddlType.selectedIndex].text;

xmlHttpRequest.open([color=purple]"[/color][color=purple]GET"[/color],
[color=purple]"[/color][color=purple]FetchWeather.aspx?city="[/color]+city+[color=purple]"[/color][color=purple]&type="[/color]+type, [color=blue]true[/color]);
[color=blue]if[/color](type==[color=purple]'[/color][color=purple]XML'[/color])
xmlHttpRequest.onreadystatechange = StateChangeForXML;
[color=blue]else[/color] [color=blue]if[/color](type==[color=purple]'[/color][color=purple]JSON'[/color])
xmlHttpRequest.onreadystatechange = StateChangeForJSON;

xmlHttpRequest.send([color=blue]null[/color]);
}
[color=blue]function[/color] StateChangeForXML()
{
[color=blue]if[/color](xmlHttpRequest.readyState == [color=navy]4[/color] && xmlHttpRequest.status == [color=navy]200[/color])
{
document.getElementById(
[color=purple]'[/color][color=purple]<%= lblWeather.ClientID %>'[/color]).innerHTML =
xmlHttpRequest.responseText;
document.getElementById([color=purple]'[/color][color=purple]txtCity'[/color]).focus();
}
}
[color=blue]function[/color] StateChangeForJSON()
{
[color=blue]if[/color](xmlHttpRequest.readyState == [color=navy]4[/color] && xmlHttpRequest.status == [color=navy]200[/color])
{
[color=blue]var[/color] json = eval([color=purple]'[/color][color=purple]('[/color]+ xmlHttpRequest.responseText +[color=purple]'[/color][color=purple])'[/color]);
[color=blue]for[/color]([color=blue]var[/color] i=0; i < json.weatherdetails.weatherreport.length; i++)
{
[color=blue]if[/color](
json.weatherdetails.weatherreport[i].city.toLowerCase() ==
_City)
{
document.getElementById(
[color=purple]'[/color][color=purple]< %= lblWeather.ClientID %>'[/color]).innerHTML =
[color=purple]'[/color][color=purple]< br>Weather Report using JSON< br>

'[/color]+json.weatherdetails.weatherreport[i].weather+
[color=purple]'[/color][color=purple]< sup>o< /sup> C <
img src="/KB/ajax/AjaxTutorial2/weathericon.JPG"
alt="weather" />'[/color];
document.getElementById([color=purple]'[/color][color=purple]txtCity'[/color]).focus();
}
}
}
}
I will explain the above code in small parts in a sequential manner.[list]
[*] [size=4]
From the above code, we first create a XMLHttpRequest object:[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
xmlHttpRequest = (window.XMLHttpRequest) ? [color=blue]new[/color] XMLHttpRequest() :
[color=blue]new[/color] ActiveXObject([color=purple]"[/color][color=purple]Msxml2.XMLHTTP"[/color]);
[*] [size=4]
If the browser does not support Ajax, it will return false.[/size]
[*] [size=4]
Next we open our connection to the web server with our newly created XMLHttpRequest object. Here the[i]FetchWeather.aspx[/i] page is the page from where we will get the XML/JSON response (pending on the user's selection). I am passing the city name and type in the form of querystring to the[i]FetchWeather.aspx[/i] page.[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
xmlHttpRequest.open([color=purple]"[/color][color=purple]GET"[/color], [color=purple]"[/color][color=purple]FetchWeather.aspx?city="[/color]+city+[color=purple]"[/color][color=purple]&type="[/color]+type, [color=blue]true[/color]);
[*] [size=4]
Depending on the type, the XMLHttpRequest object will decide which function to be calledonreadystatechange.[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
[color=blue]if[/color](type==[color=purple]'[/color][color=purple]XML'[/color])
xmlHttpRequest.onreadystatechange = StateChangeForXML;
[color=blue]else[/color] [color=blue]if[/color](type==[color=purple]'[/color][color=purple]JSON'[/color])
xmlHttpRequest.onreadystatechange = StateChangeForJSON;
[/list]
Let's have a look at our callback functions:
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
function StateChangeForXML()
{
[color=blue]if[/color](xmlHttpRequest.readyState == [color=navy]4[/color] && xmlHttpRequest.status == [color=navy]200[/color])
{
document.getElementById([color=purple]'[/color][color=purple]<%= lblWeather.ClientID %>'[/color]).innerHTML =
xmlHttpRequest.responseText;
document.getElementById([color=purple]'[/color][color=purple]txtCity'[/color]).focus();
}
}
function StateChangeForJSON()
{
[color=blue]if[/color](xmlHttpRequest.readyState == [color=navy]4[/color] && xmlHttpRequest.status == [color=navy]200[/color])
{
[color=blue]var[/color] json = eval([color=purple]'[/color][color=purple]('[/color]+ xmlHttpRequest.responseText +[color=purple]'[/color][color=purple])'[/color]);
[color=blue]for[/color]([color=blue]var[/color] i=0; i < json.weatherdetails.weatherreport.length; i++)
{
[color=blue]if[/color](
json.weatherdetails.weatherreport[i].city.toLowerCase() ==
_City)
{
document.getElementById(
[color=purple]'[/color][color=purple]< %= lblWeather.ClientID %>'[/color]).innerHTML =
[color=purple]'[/color][color=purple]< br>Weather Report using JSON< br>

'[/color]+json.weatherdetails.weatherreport[i].weather+
[color=purple]'[/color][color=purple]< sup>o< /sup> C <
img src="/KB/ajax/AjaxTutorial2/weathericon.JPG" alt="weather" />'[/color];
document.getElementById([color=purple]'[/color][color=purple]txtCity'[/color]).focus();
}
}
}
}[list]
[*] [size=4]
xmlHttpRequest.status property retrieves the HTTP status code of the request. This property is a read-only property with no default value.[/size]
[*] [size=4]
Ok let's go in details for JSON function, i.e. StateChangeForJSON.[/size] [size=4]
Whatever text response coming from the Web Server is converted into an object with the help of the JSON eval procedure. Once we get the object, we can retrieve any data from it.[/size]
[*] [size=4]
As the request method we are sending is "GET" (remember it's case sensitive), there is no need to send any extra information to the server.[/size]
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
[color=#008000][i]//[/i][/color][color=#008000][i]Send the Ajax request to the server with the GET data
[/i][/color]xmlHttpRequest.send([color=blue]null[/color]);
[/list]
In [i]FetchWeather.aspx.cs[/i] the on Page_Load event writes the following code (which is our XML/JSON response message depending on type user selected):
[color=#005782][size=2][right][img]http://www.codeproject.com/images/minus.gif[/img] Collapse | [url="http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2#"]Copy Code[/url][/right][/size][/color]
[color=blue]if[/color] ( type == [color=purple]"[/color][color=purple]XML"[/color] )
{
nodeList = doc.SelectNodes( [color=purple]"[/color][color=purple]weatherdetails/weatherreport"[/color] );
[color=blue]foreach[/color] ( XmlNode node [color=blue]in[/color] nodeList )
{
list2Ret.Add( [color=blue]new[/color] KeyValuePair<[color=blue]string[/color], [color=blue]string[/color]>(
node.Attributes[[color=purple]"[/color][color=purple]city"[/color]].InnerText.ToLower(),
node.Attributes[[color=purple]"[/color][color=purple]weather"[/color]].InnerText ) );
}
[color=blue]for[/color] ( [color=blue]int[/color] i = [color=navy]0[/color]; i < list2Ret.Count; i++ )
{
[color=blue]if[/color] ( list2Ret[i].Key == city.ToLower() )
Response.Write([color=purple]"[/color][color=purple]< br>Weather Report using XML < br>
"[/color]+ list2Ret[i].Value + [color=purple]"[/color][color=purple]< sup>o< /sup> C"[/color]+ weatherIcon );
}
}
[color=blue]else[/color] [color=blue]if[/color] ( type == [color=purple]"[/color][color=purple]JSON"[/color] )
{
[color=blue]string[/color] toJSON = byLibrary.byComponent.XmlToJSON( doc );
Response.Write( toJSON );
}[list]
[*]In the XML type, we will send the weather of a given city which the user has typed in the TextBox. It's quite simple as I have explained in my first article which you can read from [url="http://www.codeproject.com/KB/ajax/AjaxTutorial.aspx"]here[/url].
[*]I have used a [i]byLibrary.dll[/i] in which there is a class named byComponent which has a method to convert XML to JSON directly which takes one parameter of XmlDocument.
[/list] Output with XML [img]http://www.codeproject.com/KB/ajax/AjaxTutorial2/CodeImage2.jpg[/img] Output with JSON [img]http://www.codeproject.com/KB/ajax/AjaxTutorial2/CodeImage3.jpg[/img]


Src: http://www.codeproject.com/Articles/31271/Ajax-Tutorial-for-Beginners-with-XML-JSON-Part-2

[chinni005]

[quote name='Java01' timestamp='1372802160' post='1303912916']
annayaa nuvvu sooper aheee .....
[/quote]
[size=4] [/size]

[chinni005]

[quote name='HAPPYNESS' timestamp='1372799761' post='1303912801']
emi avvadu .....Hash map memory ekkuva avtundi ..Array list fixed
[/quote]
[size=4] [/size][size=4] [/size]

[king420]

[quote name='Chinni_' timestamp='1372802150' post='1303912914']

[/quote]
long week end mundu chadavalannaa nee alochana nee aavesam chuste muchatestondi [img]http://www.desigifs.com/sites/default/files/2013/1s62j.gif?1370668637[/img]