jQuery Ajax Features

Blog Author


Published Date

5th October, 2020




  • Share this blog :


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>  


  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

About Author


Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills .

Related Blogs

Write For Us