AJAX：放弃表单提交和等待
2.74/5 (12投票s)
AJAX 可以通过优化网站，避免一次性向最终用户发送所有数据，从而减小页面大小，并消除令人沮丧的整个页面加载场景。
目录
引言
在 Web 开发中，您是否经常遇到需要从客户那里获取送货/账单地址的场景？此场景通常要求最终用户填写姓名和地址详细信息。地址填写一般需要用户填写国家、州和城市。此代码的巧妙之处在于，背后有一个庞大的国家数据库，可以根据所选国家返回相应的州，然后再根据所选州返回相应的城市。然而，问题在于，当选择国家以获取州时，整个屏幕会刷新。同样，当用户选择州时，屏幕会再次刷新以加载城市详细信息。
让我们再举一个例子：最终用户试图在一个支持电子商务的音乐网站上购买 Hard Rock CD。他想购买 Jim Morrison 的专辑（我朋友听，所以我只知道这位歌手）。现在，为了从网站上获取这张 CD，用户需要浏览各个类别，然后会有一个令人沮丧的等待过程，因为整个页面都在刷新。
为了缓解页面刷新问题，一位程序员想出了一个客户端脚本解决方案。他一次性发送所有数据和选项（类别和子类别）。然后，他使用客户端脚本在主类别下显示子类别。这似乎是一个不错的解决方案，因为不再有完整的页面刷新，取而代之的是客户端的更改事件在起作用。
但是，现在最终用户有点沮丧，因为他的互联网连接很慢，速度比濒临死亡的状态好不了多少。上述解决方案需要很长时间才能在浏览器中下载。
问题
在这里，我们可以清楚地看到问题所在：用户要么需要等待页面下载完成，要么需要沮丧地看着整个屏幕刷新。
AJAX 如何帮助您？
AJAX，新出现的利器，现在可以帮助开发人员解决这些场景。一个更贴切的 AJAX 示例可以在 Microsoft 的 MSDN 网站上看到，其中左侧的树状视图内容在没有令人沮丧的整个屏幕刷新情况下加载。（我可能在解释上有所错误，但就其工作原理而言，它们非常接近。）
AJAX 可以通过帮助您创建不一次性向最终用户发送所有数据的网站来提供帮助，从而减小页面大小，并消除令人沮丧的整个页面加载场景。根据运行时所需的数据，页面的性能可能会有所不同，但不会很容易显现。整个过程的核心部分是，您可以异步地从服务器下载离散的数据量。因此，我们上面提到的场景将会改变，用户在选择国家后无需等待令人沮丧的整个页面回发，而选择音乐专辑类别的用户也不会等待漫长的页面加载延迟。
没有 AJAX 的现状
当前的网站模型通常遵循以下系统：
在上图的通信线路中，与服务器之间的通信是同步的。
实现 AJAX 逻辑后
使用 AJAX，上述情况将具有异步调用的优势。因此，可以按需从服务器请求数据。
如何实现 AJAX 完全取决于您。您可以进行简单的调用，也可以创建一个基于 AJAX 的复杂控件，这是您的决定。您可以创建一个简单的页面来调用 AJAX 组件获取数据。您也可以创建用户控件（.NET），它们在渲染时会输出 AJAX 的逻辑。
技术如何工作？
AJAX 代表 Asynchronous JavaScript and XML。因此，它不是一项技术，而是多种技术的组合。它们协同工作，为您完成任务。AJAX 工作涉及客户端服务器调用、数据检索和 UI 更新。然而，AJAX 的核心是客户端脚本调用服务器端脚本通过 HTTP 检索数据。因此，XMLHttpRequest 可以被认为是该技术的核心根基。
AJAX 的核心内容
AJAX 技术的核心是客户端脚本的远程调用能力。这是 AJAX 的核心内容。这些远程服务器调用可以通过 XMLHttpRequest 或 JavaScript 的“远程脚本”等组件实现。
第二件事是某些服务器端脚本，它会监听 JavaScript 发出的请求，然后满足该请求。我们的服务器端组件中可能有一个页面，它基于客户端脚本调用的变体。此服务器端组件可能会根据客户端脚本的调用返回结果。
我们来考虑一个服务器端脚本读取查询字符串变量，然后根据应用程序逻辑返回数据。例如，传递 r=1 将返回房间号，而传递 k=1 将返回与房间相关的锁的所有钥匙号。
让我们总结一下；要创建一个简单的 AJAX 页面，需要以下步骤：
- 能够执行 XML HTTP 请求的客户端脚本。远程脚本也可以是另一种选择。
- 执行异步调用返回后执行操作的客户端事件处理程序。
- 执行应用程序逻辑以满足请求的服务器端模块。
- 触发事件以进行异步调用并开始执行的客户端事件，例如：按钮单击。
- 此外，如果您的目标受众使用各种浏览器，那么应该有一些代码来检测浏览器，然后使用浏览器支持的组件执行 XML HTTP 请求。
AJAX 示例
我将尝试向您展示一个使用 AJAX 检索数据的示例。这个示例非常简单，不涉及任何繁重的服务器端处理逻辑。例如，没有数据库交互，服务器端脚本只会返回一个简单的字符串。然而，在现实场景中，它可能会返回 XML 数据。假设有一栋三层楼的建筑，一楼住着 Jerry、Mary 和 Cherry。二楼住着 Jack、Jill 和 Harry。地上楼层住着 Jim、Charlie 和 Aqua。所以总结如下：
Ground floor: Jim, Charlie and Aqua. Floor ID: 0
First floor: Jerry, Mary and Cherry. Floor ID: 1
Second floor: Jack, Jill and Harry. Floor ID: 2
我们将尝试为同一件事创建一个 .NET 应用程序。我们应用程序的功能是显示居住在特定楼层的居民姓名。将有一个下拉框，当用户更改选择时，组合框的客户端更改事件将触发，并从服务器检索数据。我们的应用程序将有两个组件：一个是前端，另一个是楼层组件。前端将包含一个 .aspx 页面，它将调用后端功能来获取楼层居民姓名。后端方法将很简单：根据传入的楼层 ID，它将返回居民姓名的连接字符串。
** 我们的示例假设所有人都熟练使用 IE。
代码演练
示例包含两个 aspx 页面和一个组件。我们先讨论组件。
AjaxComponentClass：该组件是一个 sealed 类，只有一个 static 方法。此方法返回居住在特定楼层的人员姓名。该组件有一个私有构造函数，因为组件只有一个静态方法，我不想让任何人创建该组件的实例。请记住，静态方法可以在不创建对象的情况下调用。
** 对于实际工作，此组件可以连接到数据库并返回 xml 数据或您的应用程序理解的任何格式的数据。
主页：这是应用程序的默认页面。为了简单起见，它只有一个组合框和一个标签。当组合框选择更改时，我们会异步调用该方法。文件中有很多 JavaScript，请查看其中的内联注释。
AjaxFrontEnd：此文件是实际的处理器。请注意，已移除此文件的 HTML 部分，以便只传递我们的姓名，否则当我们调用方法时，文件的默认 HTML 也会被传输。
** 在现实生活中，此页面可能处理 n 种情况，并且可以调用 n 个组件。