<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div>www.dbjr.com.cn</div>
</body>
</html>
<script type="text/javascript">
//js代碼放到這里
</script>

二、問題舉例

<script type="text/javascript">
function test(value){ //定義一個function
 error = false; //定義一個測試變量
 $.ajax({ //ajax異步請求
 type: "POST", //傳值方式post
 url: "test.php", //異步請求的文件
 data: "name="+value, //異步請求的參數(shù)
 success: function(msg){ //請求成功的回調(diào)函數(shù)
 if($.trim(msg) == '1'){
 error = true; //返回值為1，把error變成true
 }
 }
 });
 alert(error); //打印一下error的內(nèi)容，在這里你知道它會彈出什么嗎？
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

代碼中的alert(error);不管msg返回什么，都只會彈出false，按javascript的執(zhí)行原理，一般情況下都是順序執(zhí)行的，那為什么這個error的值沒有被改變呢？原因就在于異步請求是有一個時間差的，為了驗證這個時間差，在舉個例子，可以讓你清楚的看到，這個時間差。

三、驗證ajax異步請求的時間差

<script type="text/javascript">
function test(value){
 error = false;
 $.ajax({
 type: "POST",
 url: "test.php",
 data: "name="+value,
 success: function(msg){
 if($.trim(msg) == '1'){
 error = true;
 alert(error); //在這里打印一下error
 }
 }
 });
 alert(error); //在這里打印一下error
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

當你刷新頁面后，問題就很清楚，它首先彈出的是false,然后彈出了true，二次彈出之間的時間差，就是ajax異步請求的時間差。從表面上看，這段js代碼的執(zhí)行順序是這樣的上--下--中，其實不是這樣的，代碼執(zhí)行的順序還是上--中--下。為什么會先執(zhí)行下面的代碼呢？那是因為ajax異步請求，需要時間，而js并沒有去等待，所以在這里有一個時間差。

四、解決方法

1. 把實際要操作的動作放到回調(diào)函數(shù)中，逃避這個時間差

<script type="text/javascript">
function test(value){
 $.ajax({
 type: "POST",
 url: "test.php",
 data: "name="+value,
 success: function(msg){
 $("div").remove(); //實際要操作的動作
 }
 });
}
test("good");
</script>

前面幾個例子，是為了舉例，真正寫代碼，不會那樣寫，哈哈。

2. 進行同步請求

<script type="text/javascript">
function test(value){
 error = false;
 $.ajax({
 type: "POST",
 url: "test.php",
 async: false, //進行同步請求，默認是true的
 data: "name="+value,
 success: function(msg){
 if($.trim(msg) == '1'){
 error = true;
 alert(error); //彈一下error
 }
 }
 });
 alert(error); //在彈一下error
 if(error == true){
 $("div").remove();
 }
}
test("good");
</script>

當你刷新頁面時，這里是彈出二個true,為什么會這樣呢？加了async:false后，就會有一個等待的過程，也就是說ajax不執(zhí)行完，不執(zhí)行下面的代碼。用這個方法有個問題，如果等待的時間過長，用戶體驗很不好的。

更多關(guān)于jQuery ajax相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: