實際流程是：整個網頁載入後，會出現一個輸入姓名的欄位
此時可隨便輸入一個名字
按下Send按鈕，驅動ajax，並有loading效果
等待5秒後，下方將出現剛剛輸入的名字
程式流程：透過jQuery的ajax功能與後端Server的PHP程式溝通(此範例使用GET方法）之後，再把結果（echo 指令的output）丟回給前端的瀏覽器，只要這個範例能夠看懂，就等於打通任督二脈(前後端資料能溝通)，之後想在後端查詢資料庫還是做運算等動作，就都沒有問題了~
前端：hello.htm 內容如下
<HTML>
<HEAD>
<style type="text/css">
#loadingImg{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-120px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function (){
$.ajax({
url: 'hello.php',
cache: false,
dataType: 'html',
type:'GET',
data: { name: $('#name').val()},
error: function(xhr) {
alert('Ajax request 發生錯誤');
},
success: function(response) {
$('#msg').html(response);
$('#msg').fadeIn();
}
});
});
$('#clean').click(function(){
$('#msg').html("");
// document.getElementById('msg').innerHTML = "";
});
$("#loadingImg").ajaxStart(function(){
$(this).show();
});
$("#loadingImg").ajaxStop(function(){
$(this).hide();
});
})
</script>
</HEAD>
<BODY>
<div id="loadingImg" style="display:none"><img src="loading.gif"> loading...</div>
<br><br><br>
<div align="center">
Enter your name <br>
<input type="text" id="name"> <br>
<input type="button" value="send" id="btn">
<input type="button" value="reset" id="clean">
<br><br><br>
<div id="msg"> </div>
</div>
</BODY>
</HTML>
後端 hello.php 的程式碼如下
<?php
$myname = $_GET['name'];
sleep(5); //為了製造 ajax loading效果，所以延遲5秒
echo "You input name is $myname <br>";
?>
至於ajax loading 時的BAR或小花旋轉等圖示，網路上有一個 ajaxload圖示庫可以來製作