Ajax即"Asynchronous Javascript and XML"的缩写，指的是一种可以实现异步提交的Web开发技术。通过Ajax，用户可以在不刷新整个页面的情况下发送请求，并且在后台进行处理。这种技术可以提升用户体验，减少页面加载时的等待时间，并且可以在后台处理数据的同时，保持页面的交互性。下面将通过一些实际的例子来介绍Ajax如何实现异步提交。

例子一：实现表单的异步提交。假设我们有一个用户注册表单，当用户填写完信息后，点击提交按钮。在传统的网页开发中，点击提交按钮会导致整个页面刷新，然后后台处理用户填写的信息。但是通过Ajax，我们可以实现异步提交，无需刷新整个页面。

function submitForm() {var name = document.getElementById("name").value;var email = document.getElementById("email").value;var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 后台处理完成后执行的回调函数，在此处进行页面更新或其他操作alert("注册成功！");}}xhr.open("POST", "register.php", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send("name=" + name + "&email=" + email);}

上述代码中，我们通过Javascript获取到用户填写的姓名和邮箱，并将其作为参数发送给服务器。服务器可以通过后台的程序来处理这些参数，并返回一个成功的状态码。在前端代码中，我们通过监听XMLHttpRequest对象的readyState和status属性来判断请求是否成功。当readyState为4且status为200时，表示请求成功，我们可以执行相应的回调函数进行页面更新或其他操作。

例子二：实现通过点击按钮加载更多内容。在很多网页应用中，当用户滚动到页面的末尾时，我们需要加载更多的内容。通过Ajax，我们可以实现异步加载内容，并将其追加到页面中，无需刷新整个页面。

var currentPage = 1;var loadMoreButton = document.getElementById("load-more-button");loadMoreButton.onclick = function() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 后台返回的内容var responseText = xhr.responseText;// 处理返回的内容并追加到页面中var contentContainer = document.getElementById("content-container");contentContainer.innerHTML += responseText;currentPage++;}}xhr.open("GET", "loadMore.php?page=" + currentPage, true);xhr.send();}

上述代码中，我们通过点击按钮触发的事件来请求更多的内容。在后台，我们可以根据当前页数来获取相应的内容，并返回给前端。在前端代码中，我们通过监听XMLHttpRequest对象的readyState和status属性来判断请求是否成功。当请求成功后，我们将获取到的内容追加到页面的适当位置，同时更新当前页数。

通过上述两个例子，我们可以看到Ajax是如何实现异步提交的。通过异步提交，我们可以在不刷新整个页面的情况下进行数据交互，并可以在后台进行处理。