AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。

传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

AJAX技术的提出很好的解决了上述问题,使用AJAX技术的应用可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少,服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此Web服务器的负荷也减少了。

类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。虽然其名称包含XML,但实际上现代开发中更多使用的是JSON数据格式以进一步减少数据量。

AJAX的核心在于运用XMLHttpRequest或新的Fetch API与网页服务器进行异步数据交换。

原生XMLHttpRequest实现的AJAX请求示例:

<script>
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++) {
        try {
            xmlHttp = new ActiveXObject(aVersions[i]);
            break;
        } catch (e) {}
    }
}
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		alert(xmlhttp.responseText);
	}
}
xmlhttp.open("GET","https://www.codesou.cn",true);
xmlhttp.send();
</script>

基于JQuery的AJAX请求示例:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$.get("https://www.codesou.cn",function(data,status){
	alert("数据: " + data + "n状态: " + status);
});
</script>

基于AXIOS的AJAX请求示例:

<script>
const axios = require('axios');
axios.get('https://www.codesou.cn/', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  }); 
</script>