AJAX和JSON是兩個在前端開發中經常使用的技術。AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，通過異步方式與服務器交換數據的技術。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于前后端之間的數據傳輸和存儲。

AJAX和JSON的主要區別在于它們的作用和使用方式。AJAX主要用于前端與服務器之間的數據交互，允許在不刷新整個頁面的情況下，通過異步加載數據，更新頁面內容。而JSON則主要用于數據的傳輸和存儲，它使用簡潔的語法來描述復雜的數據結構，方便解析和處理。

例如，如果我們在一個網頁上想要顯示當前天氣情況，可以通過AJAX從服務器獲取最新的天氣數據，然后使用JSON格式進行傳輸和解析。下面是一個使用AJAX和JSON的簡單示例：

function getWeather(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var response = JSON.parse(xhr.responseText);
document.getElementById("weather").innerHTML = "當前天氣：" + response.weather;
}
};
xhr.open("GET", "weather_api.php", true);
xhr.send();
}

上述代碼中，通過AJAX發送一個GET請求到服務器的weather_api.php頁面獲取天氣數據。當服務器返回響應時，使用JSON.parse函數將返回的JSON字符串解析為JavaScript對象，然后將數據顯示在ID為“weather”的HTML元素中。

總結來說，AJAX主要用于前端與服務器之間的數據交互，通過異步加載數據更新頁面內容，而JSON則主要用于數據的傳輸和存儲，使用簡潔的語法方便解析和處理。

除了用于數據交互和傳輸，AJAX和JSON還可以結合使用，實現更復雜的功能和效果。例如，可以使用AJAX從服務器獲取JSON數據，然后通過JavaScript動態地將數據渲染到網頁上。下面是一個使用AJAX和JSON的實例：

function getBooks(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var books = JSON.parse(xhr.responseText);
var bookList = "";
for(var i = 0; i< books.length; i++){
bookList += "<li>" + books[i].title + "</li>";
}
document.getElementById("book-list").innerHTML = bookList;
}
};
xhr.open("GET", "books_api.php", true);
xhr.send();
}

上述代碼中，通過AJAX發送一個GET請求到服務器的books_api.php頁面獲取書籍數據，服務器返回的數據是一個包含多本書信息的JSON數組。將數組解析為JavaScript對象后，通過循環將每本書的標題顯示在一個HTML列表中（ID為“book-list”的元素）。

綜上所述，AJAX和JSON在前端開發中各有不同的作用和使用方式。AJAX用于前端與服務器的數據交互，而JSON用于數據的傳輸和存儲。它們可以結合使用，實現更靈活和豐富的功能和效果。