jquery mobile ajax

Mobile Jquery(IV)jquery mobile with ajax

CSS and Script import
<link rel="stylesheet" href="../components/jquerymobile/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="../media/styles/common.css" />
<script src="../components/jquery/jquery-1.6.js"></script>
<script src="../components/jquerymobile/jquery.mobile-1.0a4.1.js"></script>

<script>

$(function() {

var serverURL = "http://192.168.1.58";

$("#AjaxTest").click(function() {
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
$("#resultLog").html("Sorry, ajax is not supported!");
return false;
}
}
}
$("#resultLog").html("Great, ajax is supported!");
});

$("#GetAjax").click(function() {
var theId = $.trim($("#theId").val());
$.ajax({
type: "GET",
url: "../service/person/" + theId,
contentType: "application/json",
cache: false,
success: onSuccess
});
});

function onSuccess(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
});
});

function onAllSuccess(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("Error Calling: " + settings.url + "<br />HTPP Code: " + request.status);
});
});

</script>

HTML part codes:
<div data-role="content">
<input type="text" id="theId" name="theId" value="1" />
<button id="AjaxTest">AjaxTest</button>
<button id="GetAjax">GetAjax</button>
<button id="GetAllAjax">GetAllAjax</button>
<button id="AddAjax">AddAjax</button>
<button id="UpdateAjax">UpdateAjax</button>
<button id="RemoveAjax">RemoveAjax</button>
<div id="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