AJAX（Asynchronous JavaScript and XML）是一种基于Web开发技术的异步传输方法，通过在后台与服务器进行少量数据的交换，无需刷新整个页面来更新部分内容。这种技术的应用范围非常广泛，比如在电商网站中，在用户点击“加入购物车”按钮后，不需要跳转到新的页面就可以将商品添加到购物车中，并实时更新购物车中的商品数量。本文将介绍使用AJAX异步传输的方法和步骤，并通过几个示例来说明。

要使用AJAX异步传输，需要先创建一个XMLHttpRequest对象。这个对象可以向服务器发送请求并获取响应，然后在页面上更新相应的内容。可以通过以下代码来创建XMLHttpRequest对象：

let xmlhttp;
if (window.XMLHttpRequest) {
// 对于大多数浏览器
xmlhttp = new XMLHttpRequest();
} else {
// 兼容旧版本IE浏览器
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

创建好XMLHttpRequest对象后，可以使用它来发送请求。可以使用open()方法指定请求的类型和URL地址，并使用send()方法发送请求。以下是一个使用AJAX发送GET请求的示例：

xmlhttp.open("GET", "example.php", true);
xmlhttp.send();

上述代码将向服务器发送一个GET请求，并指定URL为example.php。参数true表示使用异步方式发送请求，也就是不会阻塞页面的其他操作。发送请求后，还需要监听XMLHttpRequest对象的onreadystatechange事件，以便在获取到响应时执行相应的操作。

以下是一个监听onreadystatechange事件的示例：

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
};

在上述代码中，readyState属性表示请求的状态，其中4表示请求已完成并且响应已完全就绪。status属性表示响应的HTTP状态码，其中200表示请求成功。如果这两个属性的值满足条件，就可以通过responseText属性获取到响应的内容，并更新页面上的相应元素。

通过以上几个步骤，就可以实现基本的AJAX异步传输。下面来看一个实例，如何使用AJAX实现一个简单的实时搜索功能：

<input type="text" id="search" onkeyup="searchKeyword()">
<p id="result"></p>
<script>
function searchKeyword() {
let keyword = document.getElementById("search").value;
xmlhttp.open("GET", "search.php?keyword=" + keyword, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
};
}
</script>

在这个示例中，用户在文本框中输入关键词后，通过调用searchKeyword()函数来发送GET请求。服务器接收到关键词后，执行相应的搜索操作，并将搜索结果作为响应发送回来。通过监听onreadystatechange事件，并将响应的内容更新到页面上的p标签中，实现了实时搜索的功能。

通过以上几个示例，我们可以看到使用AJAX异步传输的方法和步骤是非常简单的。通过创建XMLHttpRequest对象、发送请求、监听响应的状态和内容，就可以实现与服务器之间的数据交互，而不需要刷新整个页面。这种技术在实际开发中非常有用，能够提升用户体验，并提高页面的响应速度。