本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
前言
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。这样做的目的是大幅提升网页的浏览速度，提升用户的使用体验，非常值得学习。这篇文章围绕ajax的发展历史，实际写法和教程的链接引用。喜欢的可以关注或者留言。
发展历史
该技术在 1998 年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组件原属于微软 Exchange Server，并且迅速地成为了 Internet Explorer 4.0 的一部分。部分观察家认为，Outlook Web Access 是第一个应用了 Ajax 技术的成功的商业应用程序，并成为包括Oddpost 的网络邮件产品在内的许多产品的领头羊。但是，2005 年初，许多事件使得 Ajax 被大众所接受。Google 在它著名的交互应用程序中使用了异步通讯，如Google、Google 地图、Google 搜索建议、Gmail等。Ajax 这个词由《Ajax: A New Approach to Web Applications》[2]一文所创，该文的迅速传播加强了人们使用该项技术的意识。另外，对Mozilla/Gecko 的支持使得该技术走向成熟，变得更为易用。
Ajax 前景非常乐观，可以提高系统性能，优化用户界面。Ajax 现有直接框架 AjaxPro，可以引入 AjaxPro.2.dll 文件，可以直接在前台页面 JavaScript 调用后台页面的方法。但此框架与表单验证有冲突。另外微软也引入了 Ajax 组件，需要添加 AjaxControlToolkit.dll 文件，可以在控件列表中出现相关控件。
AJAX 实例
为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
AJAX 实例解析
上面的 AJAX 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button>
接下来，在页面的 head 部分添加一个 script 标签。该标签中包含了这个 loadXMLDoc() 函数：
<head>
<script>
function loadXMLDoc() {
.... AJAX 脚本执行 ...
}
</script>
</head>
教程引用
菜鸟教程：www.runoob.com/ajax/ajax-e…
下一篇预告
下一篇则留到明天讲解，主要内容是高阶的vue和react框架，大家敬请期待，感兴趣的可点击关注或者评论。
