$.ajax(properties)
$.ajax() returns the XMLHttpRequest that it createsSupported datatypes are (see dataType option):
"xml": Returns a XML document that can be processed via jQuery.
"html": Returns HTML as plain text, included script tags are evaluated.
"script": Evaluates the response as Javascript and returns it as plain text.
"json": Evaluates the response as JSON and returns a Javascript Object
$.ajax() takes one argument, an object of key/value pairs, that are used to initalize and handle the request.Example
Sends an xml document as data to the server. By setting the processData option to false, the automatic conversion of data to strings is prevented.
jQuery Code
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
$get and $find ASP.NET AJAX Shortcut Functions
If we go through Asp.Net Ajax Component then we must getting $get and $find JavaScript shortcut functions.
$get can be used as shorthand for the document.getElementById and element.getElementById functions.
Syntax
$get("id","element")
id=>Id of the document element to find.
element=>The parent element to search.The default is the document
element.
If we go through $get function then we will find out
function get(id, element)
{
// validation code that was removed
if (!element) return document.getElementById(id);
if (element.getElementById) return element.getElementById(id);
// manual DOM walk that was removed ...
}
Following an example that change the color of the bellow text.
Example1
<div id="div">We can change the color of the text by clicking the buttons</div>
function changeColor(color)
{
// fetch the div
var div = $get('div');
// set the color to the provided value
div.style.color = color;
}
Example2
<asp:Label ID="label" runat="server" Text="We can change the color of the text by clicking the buttons" />
function changeColor(color)
{
// fetch the div
var div = $get('<%= this.label.ClientID %>');
// set the color to the provided value
div.style.color = color;
}
Example3
<span id="ctl00_ContentPlaceHolder1_label">Some sample text. You can change the color of the text by clicking the buttons</span>
function changeColor(color)
{
// fetch the div
var div = $get('ctl00_ContentPlaceHolder1_label');
// set the color to the provided value
div.style.color = color;
}
$find
The $find shortcut function allows you to look up an ASP.NET AJAX client side Component by it's ID.
Syntax
Arguments
id =>A string that contains the ID of the component to find.
parent=>(Optional) The component or element that contains the component to find.
Return Value
A Component object that contains the component with the specified ID, if found; otherwise, null.
<%-- The behavior for this extender can be fetched using the following syntax:
var behavior = $find('rce1ID');
--%>
<ajaxToolkit:ResizableControlExtender ID="rce1ID" runat="server" ... />
<%--
The behavior for this extender can be fetched using the following syntax:
var behavior = $find('rceBehaviorID');
--%>
<ajaxToolkit:ResizableControlExtender ID="rce2ID" BehaviorID="rceBehaviorID" runat="server" ... />
Here is the JavaScript the ASP.NET AJAX runtime injects into the page to initialize these components. Notice the value of the id attribute in the JSON:
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function()
{
$create(
AjaxControlToolkit.ResizableControlBehavior,
{
"ClientStateFieldID":"rce1ID_ClientState",
"HandleCssClass":"handleImage",
"id"":"rce1ID"
},
null, null, $get("pnl"));
});
Sys.Application.add_init(function()
{
$create(
AjaxControlToolkit.ResizableControlBehavior,
{
"ClientStateFieldID":"rce2ID_ClientState",
"HandleCssClass":"handleImage",
"id":"rceBehaviorID"
},
null, null, $get("pnl"));
});
// -->
</script>
No comments:
Post a Comment