test/ajax.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test: Ajax</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <script src="../example/lib/zepto.min.js"></script>
  <script src="../example/lib/zepto.touch.min.js"></script>

  <script src="../dist/vconsole.min.js"></script>
  
</head>
<body ontouchstart>
  <div class="page">
    <a onclick="asyncAjax()" href="javascript:;" class="weui_btn weui_btn_default">asyncAjax</a>
    <a onclick="syncAjax()" href="javascript:;" class="weui_btn weui_btn_default">syncAjax</a>
    <a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">postAjax</a>
  </div>
</body>
</html>

<script>

function postAjax() {
  console.info('postAjax() Start');
  $.ajax({
    type: 'POST',
    url: 'success.json',
    data: {
      id: Math.random()
    },
    dataType: 'json',
    success: function(data) {
      console.log('postAjax Response:', data);
    },
    error: function(xhr, type) {
      console.log('postAjax Error:', type);
    }
  });
  console.info('postAjax() End');
}

function asyncAjax() {
  console.info('asyncAjax() Start, response should be logged after End');
  $.ajax({
    type: 'GET',
    url: 'success.json',
    async: true,
    dataType: 'json',
    success: function(data) {
      console.log('asyncAjax Response:', data);
    },
    error: function(xhr, type) {
      console.log('asyncAjax Error:', type);
    }
  });
  console.info('asyncAjax() End');
}

function syncAjax() {
  console.info('syncAjax() Start, response should be logged before End');
  $.ajax({
    type: 'GET',
    url: 'success.json',
    async: false,
    dataType: 'json',
    success: function(data) {
      console.log('syncAjax Response:', data);
    },
    error: function(xhr, type) {
      console.log('syncAjax Error:', type);
    }
  });
  console.info('syncAjax() End');
}

</script>