問題關於jQuery的AJAX代碼

-4

<html> 
<head> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
    </script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('#page1').click(function() { 
      $('#content').load('one.html'); 
      return false; 
     }); 
     $('#page2').click(function() { 
      $('#content').load('two.html'); 
      return false; 
     });  
    }); 
    </script> 
</head> 
<body> 

<a href="#" id="page1">page 1</a> | <a href="#" id="page2">page 2</a> 
<div id="content"> 
</div> 
</body> 
</html>

上面的代碼是從here 問題關於jQuery的AJAX代碼

問題採取了？我只知道一點關於AJAX（異步JavaScript和XML）的一點點，我怎麼能把上面的代碼改爲非Ajax，所以我可以看到Ajax代碼和非Ajax代碼之間的區別？

來源

2013-07-06 user2294256

它在內部使用'ajax'調用.. – Red

查看http://api.jquery.com/load/，以便您更好地瞭解發生了什麼。 –

AJAX代表「異步JavaScript和XML」，意思是從服務器異步檢索數據（頁面加載後）。確實如此 - 這就是爲什麼它被認爲是ajax。我相信它甚至在幕後使用.ajax()。

爲了避免ajax，我建議將兩個文件加載到您網站的容器中，並且只能使用jquery更改它們的可見性。

例如（使用PHP不過你可以使用任何其他服務器端浪）：

HTML：

<div id="content1" style="display:none;"><?php include 'one.html';?></div> 
<div id="content2" style="display:none;"><?php include 'two.html';?></div>

這將ofcourse加載HTML頁面同步的內容。要避免異步調用，您必須將所有數據包含在HTML頁面中。

的jQuery：

$(document).ready(function() { 
     $('#page1').click(function() { 
      $('#content1').show(); 
      $('#content2').hide(); 
     }); 
     $('#page2').click(function() { 
      $('#content2').show(); 
      $('#content1').hide(); 
     });  
    });

我會闡述更多的差異。當您使用AJAX時，您無需將所有數據加載到高級頁面中。以one.html和two.html包含一個非常長的HTML文件爲例。讓我們假設每個500KB。如果您要使用我提供的非AJAX方法，您的用戶必須等到下載完畢後才能看到頁面（1MB下載）。當您在問題中使用代碼時，頁面的加載時間確實很低，因爲您只加載頁面結構而不加載內容。當用戶點擊其中一個按鈕時，您只會加載相關文件 - 這意味着500kb - 您也可以在頁面加載時顯示一個很好的「加載」動畫。實質上，這是主要區別 - 在高級中加載整個數據或在需要時僅加載相關數據。

提示您改善問題中的代碼。在之後，將數據保存在某處，如果用戶再次單擊同一個按鈕，則不必再使用，只需使用保存的副本即可。

來源

2013-07-06 04:32:11

謝謝你的解釋。我試過你寫的代碼。但是，ajax代碼（我放的原始代碼）和非ajax代碼（你給的例子）有什麼區別？速度？我無法分辨。那麼你能解釋更多嗎？謝謝 – user2294256

我已經添加了更詳細的exlanation。希望這可以幫助。 –

問題關於jQuery的AJAX代碼

回答

相關問題