在現代網頁開發中，JavaScript和Ajax技術無疑是最常使用的兩種技術。JavaScript作為一種客戶端編程語言，可以讓網頁變得更加生動、有趣，而Ajax則是一種實現異步更新頁面內容的技術，它可以讓用戶無需刷新頁面就能獲取最新的數據。下面我們就來詳細了解一下JavaScript和Ajax的使用方法和常見示例。

JavaScript的主要作用是為網頁添加交互效果和動態變化。比如，我們可以利用JavaScript實現表單驗證、菜單下拉框、輪播圖、動態排序等功能。以表單驗證為例：

<form>
<input type="text" id="username" placeholder="請輸入用戶名">
<input type="password" id="password" placeholder="請輸入密碼">
<button type="submit" onclick="checkForm()">登錄</button>
</form>
<script>
function checkForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
alert("用戶名和密碼不能為空！");
return false;
} else {
return true;
}
}
</script>

這是一個簡單的表單驗證示例，當用戶點擊登錄按鈕時，JavaScript會檢查用戶名和密碼是否為空。如果為空，則彈出提示框，防止用戶提交空表單。如果不為空，則允許用戶提交表單。

Ajax技術則可以實現網頁上的異步更新，減少頁面刷新的次數，從而提高用戶體驗。比如，我們可以利用Ajax技術實現實時搜索、自動完成、分頁加載等功能。以實時搜索為例：

<input type="text" id="keyword">
<ul id="result"></ul>
<script>
var xhr = new XMLHttpRequest();
document.getElementById("keyword").addEventListener("input", function() {
var keyword = this.value;
xhr.abort();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
var html = "";
for (var i = 0; i < data.length; i++) {
html += "<li>" + data[i] + "</li>";
}
document.getElementById("result").innerHTML = html;
}
};
xhr.send();
});
</script>

這是一個簡單的實時搜索示例，當用戶在文本框中輸入關鍵字時，JavaScript會利用Ajax技術向服務器發送請求，獲取匹配的搜索結果。服務器返回的數據是一個JSON格式的字符串，JavaScript通過JSON.parse()方法將其轉換成數組，然后使用循環遍歷數組構建搜索結果列表，并將其顯示在頁面上。由于Ajax技術不需要刷新頁面即可獲取最新數據，因此用戶可以在不離開當前頁面的情況下不斷地搜索，極大地提高了使用效率。

綜上所述，JavaScript和Ajax技術是現代網頁開發中不可或缺的兩種技術，其應用場景十分廣泛，可以為網頁添加豐富的交互效果和動態更新內容。熟練掌握JavaScript和Ajax的使用方法，將會成為一位優秀的網頁開發者。