今天我們來分享一下JavaScript中使用AJAX的實例教程。AJAX即異步JavaScript和XML（Asynchronous JavaScript and XML），它是一種在不重新加載整個頁面的情況下，使網(wǎng)頁與服務(wù)器動態(tài)交換數(shù)據(jù)的技術(shù)。

下面我們來舉個例子，比如我們要在網(wǎng)頁中獲取一個文本文件的內(nèi)容并顯示在頁面上。我們可以通過以下代碼實現(xiàn)：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "filename.txt", true);
xhttp.send();

這段代碼首先創(chuàng)建一個XMLHttpRequest對象，設(shè)置回調(diào)函數(shù)，然后通過open方法設(shè)置HTTP請求的參數(shù)，指定請求方式為“GET”，請求路徑為“filename.txt”，最后通過send方法發(fā)送HTTP請求。

接著，我們來看一個實現(xiàn)動態(tài)分頁的例子。假設(shè)我們有一個名為“page.php”的后臺程序，根據(jù)傳遞的參數(shù)返回相應(yīng)頁數(shù)的數(shù)據(jù)，我們可以用以下代碼實現(xiàn)動態(tài)分頁：

function loadPage(pageNum) {  
var xhr = new XMLHttpRequest();  
xhr.onreadystatechange = function() {  
if (xhr.readyState == 4 && xhr.status == 200) {  
document.getElementById("content").innerHTML = xhr.responseText;  
}  
};  
xhr.open("GET", "page.php?page=" + pageNum, true);  
xhr.send();  
}

這段代碼定義了一個名為“l(fā)oadPage”的函數(shù)，用來根據(jù)傳遞的參數(shù)加載相應(yīng)的頁數(shù)內(nèi)容。首先，我們創(chuàng)建一個XMLHttpRequest對象，通過設(shè)置回調(diào)函數(shù)監(jiān)聽請求狀態(tài)，并通過open方法設(shè)置請求方式、請求路徑和是否異步。最后，我們發(fā)送HTTP請求，根據(jù)后臺程序返回的數(shù)據(jù)更新頁面內(nèi)容。

最后，再看一個實現(xiàn)跨域請求的例子，假設(shè)我們要從http://www.example.com獲取數(shù)據(jù)，而該站點不支持CORS（跨域資源共享），我們可以通過JSONP（JSON with Padding）技術(shù)實現(xiàn)跨域請求，示例代碼如下：

function loadData() {  
var script = document.createElement("script");  
script.src = "http://www.example.com/data.php?callback=showData";  
document.body.appendChild(script);  
}  
function showData(data) {  
document.getElementById("result").innerHTML = data;  
}

這段代碼定義了兩個函數(shù)，一個是名為“l(fā)oadData”的函數(shù)，用來創(chuàng)建一個script標(biāo)簽，指定請求路徑和回調(diào)函數(shù)名稱，將該標(biāo)簽添加到頁面中，觸發(fā)請求。另一個是名為“showData”的回調(diào)函數(shù)，用來處理后臺程序返回的數(shù)據(jù)。需要注意的是，JSONP技術(shù)只支持GET請求。

以上就是本文的AJAX實例教程，通過以上示例，我們可以看到AJAX技術(shù)可以幫助我們實現(xiàn)網(wǎng)站的動態(tài)交互、異步加載和跨域請求等功能，希望對大家有所幫助。