背景：之前已寫過兩篇有關Ajax的隨筆，這一篇是單獨針對在頁面加載完成的Ajax操作。比如說打開學生列表頁面，先加載頁面，然后以Ajax的方式，從數據庫中檢索相應的學生信息，給瀏覽者更好的體驗。
簡單版本：document加載完成之后，調用ajax刷新當前頁面，修改pLoad的顯示文本。
前台代碼如下：
1 <body> 2 <div> 3 <p id="pLoad">Ajax之前的結果</p> 4 </div> 5 </body> 6 </html> 7 <script> 8 $(function () { 9 $.ajax({ 10 type: "POST", 11 url: "/PageLoad/Test?City=北京&Name=SharpL&Age=18", 12 cache: false, 13 data: null, 14 success: function (result) { 15 if (result) { 16 $("#pLoad").text("ajax之后的結果為 " + result.Message + "\n"); 17 } 18 } 19 }) 20 }); 21 </script>
如代碼所示，在加載完成之后，ajax調用PageLoad控制器下的Test動作方法，后台代碼如下：
1 public ActionResult Test() 2 { 3 var actionResult = default(JsonResult); 4 var stu = new STU(); 5 this.UpdateModel(stu); 6 var tmp = string.Format("{0}{1}歲，來自{2}", stu.Name, stu.Age, stu.City); 7 actionResult = new JsonResult() 8 { 9 Data = new { Message = tmp } 10 }; 11 Thread.Sleep(5000); 12 return actionResult; 13 }
根據前台傳遞過來的學生信息，返回一個字符串給ajax，注意Thread.Sleep(5000)，使當前的進程休息5秒，使ajax的效果更加明顯，效果圖如下：
剛剛加載完Document之后：
5秒鍾之后：
補充：以$.post()的方式發起Ajax請求，參考鏈接：AJAX請求 $.post方法的使用
等價的AJax代碼1：
1 $.post("/TestAjax/Test", { City: '北京', Name: 'Sharp', Age: 23 }, function (result) { 2 if (result) { 3 $("#pDisplay").text("返回信息為 " + result.Message + "\n" + "隨機數為" + result.RandomNum); 4 } 5 });
等價的Ajax代碼2：
1 $.post("/TestAjax/Test?City=北京&Name=SharpL&Age=45", "", function (result) { 2 if (result) { 3 $("#pDisplay").text("返回信息為 " + result.Message + "\n" + "隨機數為" + result.RandomNum); 4 } 5 });