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.