Load JSON, XML, HTML or even scripts. jQuery AJAX Function. jQuery Ajax
functions work with REST API‟s, Web Services, HTML URL‟s and much more.
Working with Ajax and jQuery Definition: The ability to incorporate data without having to reload the page. Update elements without reloading the page Cross-Browser Support Simple API Load JSON, XML, HTML or even scripts jQuery AJAX Function jQuery Ajax functions work with REST API‟s, Web Services, HTML URL‟s and much more. $(selector).load() Loads HTML data from the server $.get() and $.post() Get raw data from the server $.getJSON() Get/Post and return JSON $.ajax() Provides core functionality
.load() Standard Syntax - $(selector).load(url, data, callback); Allows HTML content to be loaded from a server and added into a DOM object EX. $(document).ready(function () { $(„#helpButton‟).click(function() { $(„#myDiv‟).load(„HelpDetails.html‟); }); }); Loading HTML Content from the Server Load requires html. Filter the results $(„#myDiv‟).load(„HelpDetails.html #MainTOC‟); Find the id=MainTOC in the loading document and only load the information associated with it. Does not happen on server side! Data can be passed to the server using the DATA property EX. $(„#MyDiv‟).load(„GetCustomers.aspx‟, {PageSize:25}); PageSize dictates the number of entries to return
Callback function with load With use of the callback function you are able to monitor for errors and other data that might want to be manipulated EX. $(„#OutputDiv‟).load(„FileNotFound.html‟, Function (response, status, xhr) { If(status == “error”) { Alert(xhr.statusText); }// End if error }// End nested function ); MAKING GET REQUESTS $.get can retrieve data from a server. EX. $.get(„HelpDetails.html‟, function(data) { $(„#OutputDiv‟).html(data); }); Using getJSON Syntax: $.getJSON(url,data,callback); EX. $.getJSON(„CustomerJson.aspx‟, {id:1}, function (data) { Alert(data.FirstName + „ „ + data.LastName); }); JSON object through C#.Net Syntax: $.get(url, data, callback, dataType); Public partial class jQueryAjax_CustomerJson : System.Web.UI.Page { Protected void PageLoad(object sender, EventArgs evt) { Response.ContentType = “application/json”; Var cust = new Customer { ID = int.Parse(Request[“id”]), FirstName = “John”, LastName = “Doe” }// End create object Var ser = new DataContactJsonSerialiezer(typeof(Customer)); ser.WriteObject(Response.OutputStream, cuts); }// End load }// Set class $.get(„../CustomerJson.aspx‟, {id: 5}, function (data) { Alert(data.FirstName); }, „json‟);
Making POST Request Working with services Creating a service from .cs file [ServiceContract] [ServiceBehaviou(IncludeExceptionDetailsInFaults=true)] Public class CustomerService { [OperationContract] Pulbic List GetCustomers() { return new List { new Customer { FirstName = “John”, LastName = “Smith” }, new Customer { FirstName = “Jane”, LastName = “Doe” }; }// End return }// End getCustomers }// End class Using Post to call a specified function $.post(„../file/function‟) File – access the specified file Function – access a function in the specified file To not pass any values when executing request for post set value to NULL. Returning a service from a loading file comes back wrapped a JSON object set as d EX. var cust = data.d[0]; EX. $(document).ready ( Function() { $(„#myButtonID‟).click( function () { $.post(„../CustomerService/GetCustomers‟, null, Function(data) { var cust = data.d[0]; $(„#outDiv‟).html(cust.FirstName + “ “ + cust.LastName); }, „json‟); }); });
Introduction to the ajax() function The ajax() function provides extra control over making Ajax calls to a server
Configure using JSON properties contentType url data dataType error success type(GET or POST) Ajax function is configured by assigning values to JSON properties. EX. $.ajax({ url: „../CustomerService.svc/InsertCustomer‟, data: customer, // json object being found dataType: „json‟, success: function (data, status, xhr) { alert(“Insert status: “ + data.d.status + „\n‟ + data.d.Message); }, Error: function (xhr, status, error) { Alert(„Error occurred: „ + status); } }); Ex. $(document).ready(function () { $(„#myButton‟).click(function () { Var customer = „cust=‟ + JSON.stringify({ First Name: $(„#txtFirstName‟).val(), Last Name: $(„#txtLastName‟).val() }); $.ajax({ url: „../CustomerService.svc/InsertCustomer‟, data: customer, dataType: „json‟, success: function (data, status, xhr) { $(„#OutputDiv‟).html(„Insert Status: ‟ + data.d.Status); }, error: function (xhr, status, error) { alert(„Error occurred: „ + status); } }); }); });
