jquery mobile ajax

MobileJquery(IV)jquerymobilewithajax

CSSandScriptimport

<linkrel="stylesheet"href="../components/jquerymobile/jquery.mobile-1.0a4.1.css"/>

<linkrel="stylesheet"href="../media/styles/common.css"/>

<scriptsrc="../components/jquery/jquery-1.6.js"></script>

<scriptsrc="../components/jquerymobile/jquery.mobile-1.0a4.1.js"></script>

<script>

$(function(){

varserverURL="http://192.168.1.58";

$("#AjaxTest").click(function(){

varxmlHttp;

try{

//Firefox,Opera8.0+,Safari

xmlHttp=newXMLHttpRequest();

}catch(e){

//InternetExplorer

try{

xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

}catch(e){

try{

xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

}catch(e){

$("#resultLog").html("Sorry,ajaxisnotsupported!");

returnfalse;

}

}

}

$("#resultLog").html("Great,ajaxissupported!");

});

$("#GetAjax").click(function(){

vartheId=$.trim($("#theId").val());

$.ajax({

type:"GET",

url:"../service/person/"+theId,

contentType:"application/json",

cache:false,

success:onSuccess

});

});

functiononSuccess(data,status)

{

$("#resultLog").html("Result:"+data.personName+"status:"+status);

}

$("#GetAllAjax").click(function(){

$.ajax({

type:"GET",

url:"../service/persons",

cache:false,

contentType:"application/json",

success:onAllSuccess

});

});

functiononAllSuccess(data,status)

{

$("#resultLog").html("Result:"+data.persons[0].age+"status:"+status);

}

$("#AddAjax").click(function(){

$.ajax({

type:"POST",

url:"./../service/person",

data:'{"id":2,"personName":"kiko","personPassword":"111111","gender":"woman","age":29}',

cache:false,

contentType:"application/json"

});

});

$("#UpdateAjax").click(function(){

$.ajax({

type:"PUT",

url:"./../service/person/2",

data:'{"id":2,"personName":"kiko","personPassword":"111111","gender":"woman","age":29}',

cache:false,

contentType:"application/json"

});

});

$("#RemoveAjax").click(function(){

$.ajax({

type:"DELETE",

url:"./../service/person/3",

cache:false,

contentType:"application/json"

});

});

$("#resultLog").ajaxError(function(event,request,settings,exception){

$("#resultLog").html("ErrorCalling:"+settings.url+"<br/>HTPPCode:"+request.status);

});

});

</script>

HTMLpartcodes:

<divdata-role="content">

<inputtype="text"id="theId"name="theId"value="1"/>

<buttonid="AjaxTest">AjaxTest</button>

<buttonid="GetAjax">GetAjax</button>

<buttonid="GetAllAjax">GetAllAjax</button>

<buttonid="AddAjax">AddAjax</button>

<buttonid="UpdateAjax">UpdateAjax</button>

<buttonid="RemoveAjax">RemoveAjax</button>

<divid="resultLog">test</div>

</div>

references:

http://www.coldfusionjedi.com/index.cfm/2011/4/5/Collapsible-content-and-Ajax-loading-with-jQuery-Mobile

http://jquerymobile.com/demos/1.0a4.1/

http://www.giantflyingsaucer.com/blog/?p=1948

http://www.360doc.com/content/10/0815/16/2736180_46234711.shtml#

http://www.w3school.com.cn/ajax/ajax_browsers.asp