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