AJAX Sample

Posted: November 22, 2010 in Uncategorized
Tags: , , , ,
1. JQuery – AJAX
 
jQuery.ajaxSetup( options ) – A set of key/value pairs that configure the default Ajax request. All options are optional.

Ex:
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”,
data: myData
});

Sets the defaults for Ajax requests to the url “/xmlhttp/”, disables global handlers and uses POST instead of GET. The above Ajax request then sends some data without having to set anything else.

Note: Global callback functions should be set with their respective global Ajax event handler methods-.ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather than within the settings object for $.ajaxSetup().

Show a loading message before AJAX request starts

Ex:
$(“#loading”).ajaxStart(function(){
$(this).text(‘Triggered ajaxStart handler.’);
//$(this).show();
});

2. Microsoft AJAX Toolkit Sample
 
<div id=”OverlayContent”>
Content will be shown here!
</div>

<div class=”data”>
<div class=”bums clearfix”>
<div class=”bum”>
<a href=”#” class=”bumoverlay” data-bumid=”556119″>
<img src=”default_large.jpg”/>
</a>
</div>
<div class=”bum”>
<a href=”#” class=”bumoverlay” data-bumid=”556119″>
<img src=”default_large.jpg”/>
</a>
</div>
</div>
<div class=”lists clearfix”>
<div class=”list”>
<a href=”#” class=”listoverlay” data-listid=”2″ data-uid=”10″>
<img src=”med_9745314cb3f92d6460abfdb895c865d0.jpg”/>
</a>
</div>
<div class=”list”>
<a href=”#” class=”listoverlay” data-listid=”3″ data-uid=”10″>
<img src=”med_9745314cb3f92d6460abfdb895c865d0.jpg”/>
</a>
</div>
</div>
</div>

<script>
var OverlayControl = function() { }

OverlayControl.prototype = {
Key : ‘MediaContent’,
ShowbumOverlay : function(e, element) {
var aid = element.getAttributeNode(‘data-bumid’).value;
var r = new Sys.Net.WebRequest();
r.set_url(‘/Modules/abc.asmx/GetData?’);
r.set_body(String.format(‘contentkey={0}&queryparams={1}’, e.Key, ‘bum;’ + aid));
r.set_httpVerb(‘POST’);
r.set_userContext(this);
r.add_completed(e.ResponseHandler);
r.invoke();
},
ShowlistOverlay : function(e, element) {
//alert(this.childNodes[0].getAttributeNode(‘data-uid’).value);
var listid = element.getAttributeNode(‘data-listid’).value;
var uid = element.getAttributeNode(‘data-uid’).value;
var r = new Sys.Net.WebRequest();
r.set_url(‘/Modules/abc.asmx/GetData?’);
r.set_body(String.format(‘contentkey={0}&queryparams={1}’, e.Key, ‘list;’ + listid + “;” + uid));
r.set_httpVerb(‘POST’);
r.set_userContext(this);
r.add_completed(e.ResponseHandler);
r.invoke();
},
HideOverlay : function(e, element) {
var target = $(‘#OverlayContent’);
target[0].innerHTML = “Content will be shown here!”;
},
ResponseHandler: function(executer, args) {
var ele = executer.get_webRequest().get_userContext();
//try
//{
if (executer.get_responseAvailable())
{
var result = executer.get_xml();
var target = $(‘#OverlayContent’);
if (document.all)
target[0].innerHTML = result.documentElement.firstChild.text;
else // Firefox  
target[0].innerHTML = result.documentElement.firstChild.textContent;
}
//}
//finally {
// userContext._requestingData = false;
//}
}
};

var overlayCtrl = new OverlayControl();

// Attach event (mouseover, mouseout) & event handler to every bum <a> tag
var bums = $(‘.bumoverlay’);
for(i=0;i <>
var currentbum = bums[i];
$addHandler(currentbum , “mouseover”,
// javascript closures implementation in for-loops – http://www.mennovanslooten.nl/blog/post/62
function(overlayCtrl, currentbum ) {
return function() {
overlayCtrl.ShowbumOverlay.apply(currentbum , [overlayCtrl, currentbum ]);
}
}(overlayCtrl, currentbum )
);
$addHandler(currentbum , “mouseout”,
function(overlayCtrl, currentbum ) {
return function() {
overlayCtrl.HideOverlay.apply(currentbum , [overlayCtrl, currentbum ]);
}
}(overlayCtrl, currentbum )
);
}

// Attach event (mouseover, mouseout) & event handler to every list <a> tag
var lists = $(‘.listoverlay’);
for(i=0;i <>
var currentlist = lists[i];
$addHandler(currentlist, “mouseover”,
function(overlayCtrl, currentlist) {
return function() {
overlayCtrl.ShowlistOverlay.apply(currentlist, [overlayCtrl, currentlist]);
}
}(overlayCtrl, currentlist)
);
$addHandler(currentlist, “mouseout”,
function(overlayCtrl, currentlist) {
return function() {
overlayCtrl.HideOverlay.apply(currentlist, [overlayCtrl, currentlist]);
}
}(overlayCtrl, currentlist)
);
}
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s