在现代网页开发中，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实现。这种异步请求的方式大大提升了用户体验，使得页面更加丰富、动态。