CTS presentation on AJAX

Asynchronous Java Script And XML


1. Asynchronous
2. Javasript
3. XML (Not in literal sense) (Could be tags)




Why? AJAX??


- Lots of data running back and forth.
- Instant feedback for actions from database.
- Not asking server to get the whole page.
Example: some calculation that took long time on a given page and you need to refresh a small component on a page
It would refresh and goes over the same query for that small piece of code.




Microsoft solution inplace of AJAX was ActiveX control
-======-
ASP.NET Examples below.




Asyncronous
- Communication - XML Http Request


Javascript
- Client side processing
- DHTML
Change all the properties of HTML on the fly.


XML
- Data Exchange format.




Script Manager
- Brings the thousands of lines of code to the programming, Its like a container
- In code add where ever but always should be before Update Panel.


Update Panel
- To Ajaxify the exisiting buttons tables or other controls
- After adding

<?xml:namespace prefix = asp /><asp:updatepanel id="panel1update" runat="server"> </asp:updatepanel>

-Add the

 <contenttemplate> </contenttemplate>

tag right after update panel


Question: What if there was object that was outside the scope of <scriptmanager>because of the asthetic reasons?</scriptmanager>
A: Use

<trigger> </trigger>

tag

<triggers></triggers>

 <asp:asyncpostbacktrigger controlid="Button1"></asp:asyncpostbacktrigger>

// CAN HAVE AS MANY AS NEED BE

Update Progress
-


Timer
- Shows the time used.








DEMONSTRATION
---------------------------
Client side
============

var xmlHttp;


function PrepareRequest()
{
Request("PrimativeAjax.aspx?data=a");
}


funtion Request(url)
{
xmlHtp = null;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
isIE = true;
return new ActiveXObject("Microsoft.XMLHTTP");
}
}




function doCompletion() {
if (completeField.value == "") {
clearTable();
} else {
var url = "autocomplete?action=complete&id=" +
escape(completeField.value);
var req = initRequest();
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
parseMessages(req.responseXML);
} else if (req.status == 204){
clearTable();
}
}
};
req.open("GET", url, true);
req.send(null);
}
}
fucntion ReloadPage(data){
if(data != null)
{
document.getElementById("textbox1").innerText = data;
}








==========
Server Side
==========
if(
Response.Write(Time.Now().ToString());
httpContext.Current.ApplicationInstance.Complete(); // this is for sending the 200 code to the requesting client.