jQuery Ajax Features

Working with Ajax Features

  jQuery  Ajax Features jQuery allows Ajax requests to be made from a page: Allows parts of a page to be updated Cross-Browser support Simple API GET and POST supported Load JSON,XML,HTML or even scripts   varxmlHttp=null; if{window.XMLHttpReques{{ //If IE7,Mozilla,Safari,and so on:Use native object. xmlHttp=new XMLHttpRequest{}; } Else { If{window.ActiveXObject}{ //_ _ _ otherwise,use the ActiveX control for IES.x and IE6. xmlHttp=new ActiveXObject{‘MSXML2.XMLHTTP.3.0’};  

 jQuery Ajax Functions

jQuery provides several functions that can be used to send and receive data: $(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 jQuery Ajax functions work with REST APIs,Web Services and more   Using load() $(selector).load(url,data,callback) allows HTML content to be loaded from a server and added into a DOM object: $(document).ready(function(){ $(‘#HelpButton’).click(function(){ $(‘#MyDiv’).load(‘HelpDetails.html’); }); });   Using load() With a Selector A selector can be added after the URL to filter the content that is returned from calling load(): $(‘#MyDiv’).load(‘HelpDetails.html#MainTOC’);   Passing Data using load() Data can be passed to the server using load(url,data):   $(‘#MyDiv’).load(‘GetCustomers.apsx’, {PageSize:25});   Using a Call-back Function with load() Load() can be passed a call-back function: $(‘#OutputDiv’).load(‘Not Found.html’, Function(response,status,xhr}{ If(status==”error”){ Alert(xhr.statusText); } }); <script.type”text/javascript”> $(document).ready(function(){ $(‘#HelpButton’).click(function(){ $(‘#OutputDiv’).load(‘NotFound.html[, Function(response,status,xhr){ If(statuys==”error”){ Alert(Error:’+xhr.status.Text); } }); }); </script>   Using get() $.get(url,data,callback,datatype)can retrieve data from a server: $.get(‘HelpDetails.html’,function9data){ ${#OutputDiv’).html(data); }); <script type=”text/javascript”> $(document).ready(function(){ $(#MyButton’).click{function(){ $.get(;../HelpDetails.html’,function(data){ $(#OutputDiv’).html(data); }); $.get(‘../Customer}son,aspx”,(id:5},function(data){ Alert(‘ID:’+data.ID+’ ‘+ Data.FirstName+’ ‘+data.LastName); },’json’); }); }); </script> script type=”text/javascript”> $(document).ready(function(){ $(#MyButton’).click{function(){ $.getJSON(‘../CustomerJson.aspx’,{id:5}, function(data){ alert(‘ID:’+data.ID+’   ‘+ data.FirstName+’   ‘+data.LastName); }); }); }); </script>   Using Post() $.post(url,data,callback,datatype)can post data to a server and retrieve results $.post(‘GetCustomers.aspx’,{PageSize:15}, Function(data){ $(‘#OutputDiv’).html(data); } );   Using post() to Call a WCF Service Post() can also be used to interact with an Ajax-enabled WCF service: $.post(‘CustomerService.svc/GetCustomers’, Null,function(data){ Var cust=data.d[o}; Alert (cust.FirstName+’   ‘+ Cust.LastName); },  ‘json’); script type=”text/javascript”> $(document).ready(function(){ $(#MyButton’).click{function(){ $.post(‘../GetCustomers.aspx’,{PageSize:15}, Function(data){ $(‘#OutputDiv’).html(data); }); }); }); </script>   <script type=”text/javascript”> $(document).ready(function(){ $(#MyButton’).click{function(){ $.post(‘../CustomerService.svc/GetCustomers’,null, Var cust=data.d[o]; ${‘#OutputDiv’).html(cust.FirstName+’ ‘+cust.LastName },’json’); }); }); }); </script>  

Ajax()Functions

  The Ajax() function provides extra control over making Ajax calls to a server Configure using JSON properties: Content type Data Data type Error Success Type(GET or POST)   Using the Ajax() Function The Ajax() function is configured by assigning values to JSON properties: $.ajax({ url:’../CustomerSerivce.svc/InserCustomer’, data:customer, 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); } <script type=’text/javascript”> $(document).ready{function{}{ ${‘#MyButton’}.click{function{}{ Var customer=’cust=’+ ]SON.stringify{{ FirstName:${‘#FirstNameTB’}.val{}, LastName:${‘#lastNameTB’}.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}; } }};   jQueryAjaxGet Src Com.nareshit.jquert.servlet WeatherServlet.java JRE SystemLibrary Java EE 5 Libraires Reference Libraries

• Commons-beanutils-1.8.1jar
• Commons-collections-3.2.1jar
• Commons-lang-2.5.jar
• Commons-lagging-1.1.1.jar
• Ezmorph-1.06.jar
• Json-lib-2.2.3-jdkl15,jar

Lib WebRoot META-INF Script WEB-INF Lib Web.xml Index.html