Ajax 的骨干：XmlHttpRequest
2.80/5 (12投票s)
关于 XmlHttpRequest 和 Ajax 的文章
引言
“Ajax” 是一个新术语，如今几乎所有 Web 开发人员都在使用！ 每个人都知道它内部使用 XmlHttpRequest 吗？ 许多人说“是”，有些人说“不知道”。 我写这篇文章是为了让所有必须理解 XmlHttpRequest 的开发人员，我认为这是 Ajax 的基础。
什么是 Ajax？
Ajax 实际上不是一种技术，而是一种架构模式。 它不是 XmlHttpRequest 的另一个名称，而是一种借助 XmlHttpRequest、CSS、DOM、XML、HTML 和其他 Web 实体调用服务器的技术。
谁是 Ajax 的发明者？
答案是“没人”。 虽然它是一种设计方法，但没有特定的人或公司拥有它。“Jesse James Garrett” 是这个名称的创始人。 他在他的应用程序中使用了组合的 Web 设计方法，并将其命名为“Ajax”。 Google 使 Ajax 闻名，因为我们每天都在使用 Gmail 和 Google 地图界面。
在本文中，我将重点关注 XMLHttpRequest，它是 Ajax 的基础。 有关 Ajax 的更多详细信息，您可以参考此链接。
XmlHttpRequest
XmlHttpRequest 是一个对象，几乎所有浏览器都提供该对象，以实现与服务器的脚本化通信。 使用此功能，您可以使用 JavaScript 从服务器发送或获取任何数据。 请注意，您不需要在此处发回您的页面！ 显然，最终用户并不知道幕后发生的事情。 这是我们让 Web 应用程序像桌面应用程序一样运行的主要原因。 想象一下 Gmail，您也可以像在桌面应用程序中一样从浏览器使用 Gtalk。
XmlHttpRequest 的流程
快速示例
我不会创建一个 ASP.NET Web 项目。 由于 XmlHttpRequest 在所有 Web 应用程序中都很常见，因此每个人都应该了解它是什么。
在这里，我将解释如何从一个页面调用 HTML 数据到另一个页面。
创建第一个 HTML 页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Calling another page</title>
<script language="javascript" type="text/javascript">
//Creating the instance of the XmlHttpRequest
// branch for native XMLHttpRequest object
var client=null;
if (window.XMLHttpRequest)
{
client = new XMLHttpRequest();
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject)
{
client = new ActiveXObject("Microsoft.XMLHTTP");
}
//sending information to server
function doCall()
{
try
{
client.onreadystatechange = callBack;
client.open("GET", document.getElementById("txtURL").value);
client.send();
}catch(ex)
{
alert(ex.message);
}
}
//waiting and processing server response
function callBack(response)
{
try
{
if(client.readyState == 4 && client.status == 200)
{
document.getElementById("panel").innerHTML=client.responseText;
}
}
catch(ex)
{
alert(ex.message);
}
}
</script>
</head>
<body>
<h4>Reading server response Using XMLHttpRequest</h4>
Server URL: <input id="txtURL" type="text" value="HtmlPage2.htm" />
<input type="button" value="Call" onclick="doCall()" />
<br />[Output]
<hr />
<div id="panel"></div>
<hr />
</body>
</html>
创建第二个 HTML 页面
<b>Hello World</b>
测试示例
尝试单击该按钮； 您可以看到粗体显示的“Hello World”文本，这实际上是来自服务器的响应。 尝试在文本框中输入其他 URL； 例如：https://codeproject.org.cn，您将收到错误消息“权限被拒绝”。 通常您无法跨服务器调用，因为它是一个安全问题，您的浏览器不允许您执行此操作。 您只能在一个服务器内调用。
动态内容
使用上述方法，您还可以从任何 ISAPI 应用程序（例如 ASP、ASP.NET、PHP 和 JSP）读取响应。
Ajax 如何使用它？
编写 JavaScript 以调用服务器确实是一项耗时的工作，如果有框架可以为我们完成这项工作，那就更好了。 这就是“Ajax”进入行业的原因，它不仅可以自动化调用，还可以通过标准和最佳方法自动化所有内容。 它创建一个 JavaScript 方法来调用我们的服务器方法，因此作为开发人员，我们不需要为 XmlHttpRequest 编写任何 JavaScript。 这就是为什么很多人不了解经典的 XmlHttpRequest 方式的原因。
Ajax 会在性能方面造成瓶颈吗？
真的不会。 如果我们正确使用它，性能方面没有任何问题。 我们不应该使用 JavaScript/Ajax 在 Web 上做所有事情，因为它在客户端运行。 因此，我们将无法像在服务器上那样进行任何控制。
请阅读这篇文章，了解有关 Ajax 的性能问题。