在現代網頁開發中，Ajax（Asynchronous JavaScript and XML）是一項不可或缺的技術。它允許網頁通過異步方式與服務器進行通信，獲取數據并動態更新頁面內容，而無需刷新整個頁面。在實際應用中，我們常常需要調用各種類型的數據，例如獲取用戶信息、加載商品列表、實時更新股票行情等。本文將介紹如何使用Ajax調用常用的數據，并通過具體示例詳細說明其實現方法。 對于大部分應用來說，獲取用戶信息是常見的需求。假設我們需要調用一個API來獲取用戶的姓名、年齡和性別信息。使用Ajax可以在后臺調用該API，并將返回的數據展示在網頁上。 首先，我們需要創建一個Ajax請求對象，并指定請求的URL地址和請求類型。我們可以使用`XMLHttpRequest`對象來完成這些操作： ```html

var xhr = new XMLHttpRequest(); // 創建一個Ajax請求對象
xhr.open('GET', 'https://api.example.com/userinfo', true); // 指定請求的URL地址和類型
xhr.send(); // 發送請求

``` 接下來，我們需要監聽請求的狀態變化，以及請求完成后的回調函數。使用`onreadystatechange`和`readyState`屬性可以實現這一功能： ```html

xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) { // 請求完成并成功返回數據
var userInfo = JSON.parse(xhr.responseText); // 解析返回的JSON數據
// 更新網頁上的用戶信息
document.getElementById('name').innerText = userInfo.name;
document.getElementById('age').innerText = userInfo.age;
document.getElementById('gender').innerText = userInfo.gender;
}
};

``` 在上述例子中，我們通過`XMLHttpRequest`對象發送了一個GET請求，并在請求完成后更新了網頁上的用戶信息。需要注意的是，我們根據返回的JSON數據更新了對應的網頁元素，這里我們通過id屬性來獲取需要更新的元素。 除了獲取用戶信息，加載商品列表也是常見的需求。假設我們有一個商品列表的API，我們需要使用Ajax來獲取該API返回的商品列表數據，并將其展示在網頁上。 ```html

var xhr = new XMLHttpRequest(); // 創建一個Ajax請求對象
xhr.open('GET', 'https://api.example.com/products', true); // 指定請求的URL地址和類型
xhr.send(); // 發送請求

``` ```html

xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) { // 請求完成并成功返回數據
var products = JSON.parse(xhr.responseText); // 解析返回的JSON數據
products.forEach(function(product) {
// 創建商品列表項
var li = document.createElement('li');
li.innerText = product.name;
document.getElementById('product-list').appendChild(li);
});
}
};

``` 在上述例子中，我們通過`XMLHttpRequest`對象發送了一個GET請求，并在請求完成后創建了商品列表的每一項，并將其添加到id為`product-list`的父元素中。通過使用`createElement`方法和`innerText`屬性，我們可以動態地創建和更新網頁上的元素。 除了靜態數據的調用，Ajax還可以用于實時更新數據，例如股票行情。假設我們需要實時更新某只股票的價格，我們可以使用Ajax發送請求，獲取最新的股票行情，并將其實時展示在網頁上。 ```html

function updateStockPrice() {
var xhr = new XMLHttpRequest(); // 創建一個Ajax請求對象
xhr.open('GET', 'https://api.example.com/stock', true); // 指定請求的URL地址和類型
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) { // 請求完成并成功返回數據
var stockPrice = JSON.parse(xhr.responseText); // 解析返回的JSON數據
document.getElementById('price').innerText = stockPrice;
}
};
xhr.send(); // 發送請求
}
setInterval(updateStockPrice, 1000); // 每隔1秒更新一次股票價格

``` 在上述例子中，我們使用`setInterval`函數每隔1秒調用一次`updateStockPrice`函數。該函數會發送一個Ajax請求獲取最新的股票價格，并更新網頁上id為`price`的元素。通過這種方式，我們可以實現實時的股票行情展示。 通過上述的示例，我們可以看到使用Ajax調用常用的數據非常簡單且靈活。無論是獲取用戶信息、加載商品列表還是實時更新股票行情，我們都可以使用Ajax實現。這種異步請求的方式大大提升了用戶體驗，使得頁面更加豐富、動態。