Mobile Jquery(IV)jquery mobile with 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