Ajax 快速入门 FAQ

目录

• 引言
• (B) Ajax 解决了什么问题？
• (B) 什么是 Ajax？
• (B) Ajax 的基本原理是什么？
• (B) 什么是 JSON？
• (B) 如何在 JavaScript 中使用 XMLHttpRequest 对象？
• (B) 如何使用 Ajax 进行异步处理？
• (B) XMLHttpRequest 的各种状态是什么？如何检查它们？
• (B) 如何获取响应文本？
• (B) 如何使用 XMLHttpRequest 组件向服务器发送请求？
• (I) 如何向服务器传递参数？
• (I) 如何使用 Atlas 在 JavaScript 中创建类？
• (A) 如何使用 Atlas 进行继承？
• (A) 如何使用 Atlas 定义接口？
• (I) 能否解释一下 Ajax 中的 ScriptManager 控件？
• (B) 能否解释一下 Ajax 中的 EnablePartialRendering 和 UpdatePanel 控件？
• (I) 能否解释一下“UpdatePanel”控件中的触发器概念？
• (I) 能否解释一下“UpdateProgress”组件？
• (A) 如何在 Ajax 中进行验证？
• (A) 如何在 Ajax 中进行异常处理？
• (A) 如何在 Atlas 中使用 Web 服务？
• (A) 如何直接在 Web 服务中获取数据？
• 其他面试题 PDF

引言

本 FAQ 就像一个入门套件。它将帮助您快速了解 Ajax 的主要方面……所以，准备出发吧……

您可以在以下链接中阅读我之前关于设计模式和 UML 的文章

• 第一部分 – 设计模式：工厂模式、抽象工厂模式、建造者模式、原型模式、浅复制和深复制、单例模式和命令模式 - SoftArchInter1.aspx  
• 第二部分 – 设计模式：解释器模式、迭代器模式、中介者模式、备忘录模式和观察者模式 - SoftArch2.aspx 
• 第三部分 – 设计模式：状态模式、策略模式、访问者模式、适配器模式和享元模式 - SoftArch3.aspx 
• 第四部分 - 桥接模式、组合模式、外观模式、责任链模式、代理模式、模板模式 - SoftArch4.aspx
• 第一部分 - UML 面试题 - SoftArch5.aspx 
• 第二部分 - UML 面试题 - SoftArch6.aspx

(B) Ajax 解决了什么问题？

要回答这个问题，首先让我们了解一下当我们请求任何网站时，浏览器和服务器是如何工作的。下图形象地描绘了 Web 环境。当客户端将数据发送到服务器时，它会将表单元素数据、隐藏字段、图片、cookie 信息回发到服务器，服务器生成页面并将相同的信息发送回浏览器。不利之处在于，每次请求和响应都会发生这种情况。
上述模型存在以下问题：

• 不必要的数据传输：- 在上述模型中，客户端和服务器之间传输了不必要的数据。例如，即使我们只想刷新页面的一小部分数据，也会发送和刷新整个页面。

图 18.1：- 问题所在

• 同步处理：- 当用户请求页面时，他必须等到整个往返完成。总之，请求/响应工作在同步模型而不是异步模型上，这使用户体验非常困难。有多少次您在请求页面时看到下面的屏幕……令人沮丧，对吧？

图 18.2：- 同步处理

• 服务器不必要的处理：- 由于我们正在将不必要的信息发送到服务器，服务器因不必要的处理而过载。

(B) 什么是 Ajax？

Ajax 是一组客户端技术，它提供了用户界面和 Web 服务器之间的异步通信。因此，使用 Ajax 的优点是异步通信、最小的数据传输以及服务器不会因不必要的负载而过载。

(B) Ajax 的基本原理是什么？

XmlHttpRequest 是 Ajax 的基本原理。它允许浏览器异步地与后端服务器通信。XmlHttpRequest 对象允许浏览器在不发送整个页面的情况下与服务器通信，并且只异步发送必要的数据。

(B) 什么是 JSON？

JSON 是一种非常轻量级的数据格式，基于 JavaScript 语法的一个子集，即数组和对象字面量。JSON 允许以标准的方式与服务器通信。JSON 用作通信符号而不是 XML。

var oBike = 
{
"color" : "Green",
"Speed”: 200,
};
alert(oBike.color); //outputs "Green"
alert(oBike.Speed); //outputs 200

上面的代码创建了一个名为 bike 的 JavaScript 对象，它有两个属性 Color 和 Speed。

(B) 如何在 JavaScript 中使用 XMLHttpRequest 对象？

下面是一个代码片段，展示了如何使用 XMLHttpRequest 对象。在此代码片段中，我们在本地 IIS 上发送 GET 请求。下面是根据代码片段中指定的数字对代码片段的解释？

• 1,2,3,4 -> 这就像检查这是什么浏览器并相应地创建对象。XMLHttpRequest 对象根据不同的浏览器有不同的技术实现方式。在 Internet Explorer 中，它是一个 ActiveX 对象，但在其他浏览器中，它是 XMLHttpRequest。所以，如果 window.XMLHttpRequest 不返回 null，我们就可以创建 XMLHttpRequest 对象。如果它返回 null，那么我们可以尝试创建 ActiveX 对象 Microsoft.XMLHttp。如果失败，很可能是因为我们有一个较旧版本的 XML，即 MSXML2。所以，在错误处理中，我们将尝试创建 MSXML2 对象。
• 5 -> 在此代码片段中，我们打开到本地主机服务器的连接，并指定我们使用的请求类型。在本例中，我们使用的是 GET 方法。
• 6 -> 最后，我们向服务器发送请求。
• 7 -> 在这里，我们获取服务器发送回客户端浏览器的请求。这是一个阻塞调用，因为我们需要等待才能从服务器获取请求。此调用是同步的，这意味着我们需要等待服务器响应。

图 18.3：- 基本 XMLHTTP 代码

(B) 如何使用 Ajax 进行异步处理？

xmlHttpObj.onreadystatechange = function1();

上面是帮助我们进行异步处理的代码片段。因此，当 XMLHTTP 请求对象进入就绪状态更改时，将调用 function1()。

(B) XMLHttpRequest 的各种状态是什么？如何检查它们？

(B) 如何获取响应文本？

(B) 如何使用 XMLHttpRequest 组件向服务器发送请求？

注意：- 以上所有答案将在下面的部分详细讨论。

• Abort()：- 此方法取消用户请求。
• getAllResponseHeaders()：- 以字符串形式返回 HTTP 标头的集合。如果要获取特定标头的值，可以使用 getResponseHeader(“header name”) 
• Open(“method”, “URL”, “async”, “uname”, “pswd”)：- 此方法接受 URL 和请求所需的其他值。您还可以通过 GET、POST 或 PUT 指定请求的发送方式。一个重要的值是如何异步或同步发送此请求。True 表示处理在 send() 方法之后进行，而无需等待响应。False 表示在继续之前等待响应。
• Send(content)：- 向服务器资源发送请求。
• SetRequestHeader(“label”,” value”)：- 为 HTTP 标头设置标签值对。
• Onreadystatechange：- 这是一个事件处理程序，会在每次状态更改时触发。
• Ready State：- 返回对象的当前状态。
  • 0 = 未初始化
  • 1 = 加载中
  • 2 = 已加载
  • 3 = 交互中
  • 4 = 已完成

如果要检查状态，请使用 if (xmlHttpObj.readyState == 4)。

• Response Text：- 以纯文本字符串形式返回响应。
• Response：- 以 XML 格式返回响应。因此，这为我们提供了 DOM 对象模型，然后可以对其进行遍历。
• Status：- 以数字形式返回状态。例如，404 表示“未找到”，200 表示“确定”，500 表示“服务器错误”等。
• Status Text：- 以字符串形式返回状态。例如，“未找到”或“确定”。

(I) 如何向服务器传递参数？

以下是两种向服务器传递数据的方法。第一种显示使用 GET，第二种显示使用 POST。

xmlHttpObj.open("GET","http://" + location.host + 
	"/XmlHttpExample1/WebForm1.aspx?value=123", true);
xmlHttpObj.open("POST","http://" + location.host + 
	"/XmlHttpExample1/WebForm1.aspx?value=123", true);

(I) 如何使用 Atlas 在 JavaScript 中创建类？

JavaScript 是一种基于对象的语言，这是 Atlas 提供的一项新功能。使用 Atlas，您现在可以在 JavaScript 中定义类、进行继承、创建接口等。您现在可以在 JavaScript 中实现所有面向对象的概念。所以，让我们通过一个例子来理解。
安装 Atlas 设置后，您将获得以下 JS 文件和一个 web.config 文件，如下图所示。为了使用 Atlas，您需要将 JS 文件添加到项目中。从下面的图中可以看到，我们已将 JavaScript 文件和 web.config 文件添加到 Atlas 设置安装的项目中。我们还需要将 Microsoft.Web.Atlas.dll 添加到项目中。Components.js 包含类定义，我们将在接下来的部分中讨论。

图 18.4：- Ajax 文件夹结构

下图包含两个重要的代码片段，上面的片段取自 components，它定义了类定义，第二个代码片段是消耗 JavaScript 类的 ASPX 页面的。所以，让我们逐一理解所有编号的点。

1. 在本节中，我们使用 register Namespace 函数注册命名空间。我们将命名空间命名为 Namespace Customer。
2. 在这里，我们定义了我们的类 clsCustomer。
3. 我们定义了两个属性 Customer Code 和 Customer Name。这两个属性都有 get 和 set 函数。我们还定义了一个只读函数 getCodeAndName，它返回客户代码和客户名称的连接。
4. 最后，我们将类与命名空间一起注册。
5. 在本节中，我们使用了该类。getCodeAndName 将显示客户代码和客户名称的连接值。
   
   注意：- 您可以在 AtlasClass 文件夹中找到上述代码。随意尝试一下。

图 18.5：- 消耗类的代码片段

(A) 如何使用 Atlas 进行继承？

(A) 如何使用 Atlas 定义接口？

下面是一个编号的代码片段，它将回答上述两个问题。让我们详细了解编号的部分。

• 1 和 2 -- 这定义了接口定义。Function.abstractMethod() 将一个方法定义为抽象方法。
• 3 - 我们需要注册接口，这是通过使用 register Interface 方法完成的。
• 4、5 和 6 - 继承和接口在注册类时定义。Register Class 有三个输入。第 4 部分定义了需要注册的主类。第 5 部分定义了它将继承的父类。第 6 部分定义了接口。所以，clsMyCustomCustomer 是派生自 clsCustomer 并实现 I Customer 接口的类。

图 18.6：- 继承和接口的实际应用

(A) 如何使用 Atlas 引用 HTML 控件？

<input id="Button1" type="button" value="button" />

您可以使用下面的 JavaScript 代码片段来引用上面定义的 HTML 按钮。我们还为按钮附加了 on click 方法。当我们单击按钮时，将调用此方法。

var btnVisibility = new Sys.UI.Button($('Button1'));
btnVisibility.intialize();
btnVisibility.click.add(onClick);

您可以使用 Sys.UI 来引用 Label、Textbox、Checkbox、Hyperlinks 等其他 HTML 元素。

注意：- 我们在此版本中根据承诺添加了一些额外的 Ajax 问题。在 CD 中，我们提供了“AtlasSetup”。您需要安装它才能在 VS.NET 2005 中获得以下 Ajax 项目模板。

图 18.7：- Ajax 模板

在我们开始 Ajax 之前，还有一件事要确保，那就是将 Ajax 控件添加到工具箱。所以，请右键单击工具箱？单击选择项？单击“浏览”按钮？添加“C:\Program Files\Microsoft ASP.NET\Atlas\v2.0.50727\Atlas\Microsoft.Web.Atlas.dll”。完成后，您应该会看到一些新组件，如图“Ajax 控件”所示。现在我们可以开始了解 Ajax 的工作原理了。

图 18.8：- Ajax 控件

(I) 能否解释一下 Ajax 中的 ScriptManager 控件？

ScriptManager 控件是 Ajax 的核心。它们管理页面上的所有 Ajax 相关对象。ScriptManager 控件的一些核心目标如下：

• 帮助加载核心 Ajax 相关脚本和库。
• 提供对 Web 服务的访问。
• ASP.NET 身份验证、角色和配置文件服务由 ScriptManager 控件加载。
• 提供服务器控件和行为的注册。
• 启用 Web 页面的完全或部分渲染。
• 提供本地化功能。

总之，任何启用了 Ajax 的页面都应该包含此控件。

(B) 能否解释一下 Ajax 中的 EnablePartialRendering 和 UpdatePanel 控件？

让我们用一个简单的示例 Ajax 应用程序来回答上述问题。当我们学习这个应用程序时，我们将回答上述问题。如果您已经安装了 Ajax 设置并添加了对“Microsoft.Web.Atlas.dll”的引用，那么您应该会在工具箱中看到那些控件，如上图“Ajax 控件”所示。让我们按照以下步骤完成此示例。

• 所以，首先从工具箱将“ScriptManager”控件拖放到 ASPX 页面上。我们在上一个问题中已经讨论了“ScriptManager”控件的重要性。为了确保整个页面不回发，我们需要将“EnablePartialRendering”设置为 true。如果为 false，则整个页面将刷新。
• 现在，将“UpdatePanel”控件从工具箱拖放到 ASPX 页面上。使用“UpdatePanel”，我们可以限制回发区域。在普通的 ASPX 页面中，整个页面都会回发，即会进行完全刷新。但是，使用“UpdatePanel”，我们可以定义需要刷新的区域。“UpdatePanel”形成控件的容器，从而定义回发区域。
• 现在，我们拖放两个控件：一个按钮和一个文本框，并像图“Long loop code”所示那样放置一个长的循环代码。

下面的图“ScriptManager 和 UpdatePanel”显示了“ScriptManager”、“UpdatePanel”和“EnablePartialRendering”的外观。

图 18.9：- ScriptManager 和 UpdatePanel

图 18.10：- 长循环代码

为了理解内部基础，您可以切换到 ASPX 的 HTML，您应该会看到下面的代码片段，如图“ScriptManager 和 UpdatePanel 代码视图”所示。

注意：- “ScriptManager”应该是任何 Ajax ASPX 页面上的第一个控件。

所以：

• 1 -> 定义“ScriptManager”控件，
• 2 -> 定义“UpdatePanel”控件，
• 3 -> 所有控件都应该放在“ContentTemplate”标签下，并且
• 4 -> 定义将被包裹在“UpdatePanel”标签下的控件。图“Long loop code”在 button1 点击时被调用，用于执行一些繁重的任务，以便我们可以判断使用 Ajax 的优势。

图 18.11：- Script Manager 和 Update Panel 代码视图

完成后，您可以检查项目，将“EnableRendering”设置为 true 和 false 值，以查看 Ajax 实际工作方式的效果。

(I) 能否解释一下“UpdatePanel”控件中的触发器概念？

触发器是“UpdatePanel”标签的子标签。很多时候，我们希望在某个事件发生或控件中的值更改时更新面板。这可以通过使用触发器来实现。有两种类型的触发器：“ControlEventTrigger”和“ControlValueTrigger”。所以，让我们先理解“ControlEventTrigger”。使用“ControlEventTrigger”，我们定义了面板应该在哪个控件上、在哪个事件上刷新。下面是一个简单的“ControlEventTrigger”代码片段。“ControlEventTrigger”使用“<atlas:ControlEventTrigger>”标签定义。我们对下面的代码片段进行了编号，因此让我们通过数字来理解它：

• 1 -> 我们需要使用“<atlas:ControlEventTrigger>”标签定义“ControlEventTrigger”。
• 2 -> 在此示例中，我们将触发器链接到“UpdatePanel1”与“Button1”的点击事件。
• 3 -> 在“<atlas:ControlEventTrigger>”标签中，我们需要分别使用“ControlId”和“EventName”属性来定义控件和事件。
  因此，现在当按钮点击事件发生时，“UpdatePanel1”会被刷新。

图 18.12：- “ControlEventTrigger”的代码片段

使用“ControlValueTrigger”，我们可以在外部控件达到某个值时更新一个面板。所以，我们再次需要在“Triggers”标签中定义它。我们需要使用“ControlId”属性定义的控件和属性来放置“ControlvalueTrigger”标签。所以，根据下面的代码片段，当“Textbox1”的值发生变化时，我们需要更新顶部的面板。

图 18.13：- “ControlValueTrigger”代码片段

(I) 能否解释一下“UpdateProgress”组件？

有时，我们在后端有大量的任务需要处理，并且我们希望在处理完成之前显示一个用户友好的消息。这就是“UpdateProgress”控件发挥作用的地方。
要使用“UpdateProgress”控件，我们需要使用“UpdatePanel”标签。“UpdateProgress”是“UpdatePanel”控件的子标签。直到服务器处理完成，我们可以在“ProgressTemplate”标签中显示的的消息，它是“UpdateProgress”标签的子标签。

图 18.14：- Update Progress 的实际应用

(A) 如何在 Ajax 中进行验证？

我们可以使用 Ajax 执行所有必要的验证，如必填字段、类型检查、范围检查等。下面是一个展示如何使用必填字段验证器的小片段。我们对代码片段进行了编号，以便更好地理解代码。

• 1 -> 我们定义了一个文本框“TextBox1”，它将进行必填字段验证。
• 2 -> 我们定义了一个简单的“<span>”HTML 标签，它将显示错误消息。
• 3、4 和 5 -> 我们使用 XML 声明式 Ajax 脚本来定义“TextBox1”具有验证器，并且它是一个必填字段验证器。要定义必填字段验证器，我们需要在验证器内部使用“RequiredFieldValidator”控件。
• 6 -> 然后我们定义错误应该在哪里显示，使用“ValidationErrorLabel”。在这种情况下，我们将在之前定义的 span “Validator1”中显示错误。

图 18.15：- Ajax 中的验证

注意：- 上面的示例展示了“requiredFieldValidator”的示例，但我们也可以使用其他验证器，如 rangeValidator、typeValidator、rangeValidator 和 regexValidator。由于这是一本面试手册，我们将不深入探讨其他验证器的细节，请随时练习一些示例。

(A) 如何在 Ajax 中进行异常处理？

Ajax 中的异常处理是通过“ErrorTemplate”完成的，它是“ScriptManager”的子标签。实现 Ajax 中的错误处理需要三个步骤。下面的图“Ajax 中的错误处理”以图解方式展示了这三个步骤。

图 18.16：- Ajax 中的错误处理

• 步骤 1 -> 右键单击 ScriptManager 并单击“创建错误模板”。
• 步骤 2 -> 完成后，单击“编辑模板”。
• 步骤 3 -> 输入您希望在出现错误时显示的错误消息，然后单击“结束模板编辑”。

只需单击 HTML 视图即可查看 HTML 中的内容。您可以看到“ErrorTemplate”标签是处理错误的根本驱动程序。

(A) 如何在 Atlas 中使用 Web 服务？

有两种方法可以调用 Web 服务：一种是使用“Services”标签，另一种是使用 Ajax 组件中定义的属性，如“ServicePath”、“ServiceMethod”和“ServiceURL”。
我们可以使用“atlas:ServiceReference”标签在“Services”标签中定义 Web 服务 URL。“Path”属性定义 Web 服务 URL。如果我们还想生成 JavaScript 代理，我们需要将“GenerateProxy”设置为 true。我们还设置了另一个属性，即“InlineProxy”属性需要为 true，以便代理代码可供客户端 JavaScript 使用。

图 18.17：- 引用 Web 服务

如果将“InLineProxy”属性设置为 true，您应该在浏览器上查看源代码时看到下面的代码片段。

<script type="text/javascript">
var WebService=new function() 
{
this.appPath = "https://:4430/AtlasWebSite3/";
var cm=Sys.Net.ServiceMethod.createProxyMethod;
cm(this,"HelloWorld");
cm(this,"GetWordList");
} 

让我们来看第二种方法，使用“ServiceMethod”和“ServicePath”。显示数据的 Atlas 组件（面向最终用户）具有一些有助于调用 Web 服务和调用这些 Web 服务上的方法的属性。所以，让我们通过“AutoCompleteExtender”组件演示一个简单的示例。“AutoCompleteExtender”用于增强带有自动完成功能的文本框。下面是一个带有“AutoComplete”功能的文本框。

图 18.18：- 带有自动完成功能的文本框

所以，让我们先定义 Web 服务。下面是一个简单的 Web 服务，它公开了一个单词列表，用于在文本框中实现自动完成功能。

图 18.19：- 用于自动完成功能的 Web 服务

定义 Web 服务后，我们需要将“AutoCompleteExtender”拖放到 ASPX 页面上。

图 18.20：- 拖放 AutoCompleteExtender

现在，如果您查看源代码，您应该会在 HTML 中看到以下代码。我们为代码进行了编号以突出重要部分。

• 1 -> 这是从工具箱拖放的“autocompleteextender”标签。
• 2 -> 我们需要指定 Web 服务 URL 和 Web 服务的方法。这些可以使用“ServiceMethod”和“ServicePath”属性来定义。
• 3 -> 我们还需要定义“AutoCompleteExtender”将指向哪个文本框控件。这是通过使用“TargetControlId”属性实现的。

就是这样，运行程序，看看文本框的自动扩展器功能。

图 18.21：- ServiceMethod 和 ServicePath

“ServiceURL”属性可以在 DataSource 控件中找到。

(A) 如何直接在 Web 服务中获取数据？

我们可以使用“Sys.Data”控件直接消耗数据。我们知道这是一个非常简短的答案，对于这样一个重要的问题，但这本手册的带宽不允许。我们建议读者练习一些使用“Sys.Data”控件的示例。
注意：- 我们遗漏了一些重要的控件，如数据控件、登录控件、Web 部件控件、移动控件和 ProfileScriptService 控件。在面试中很少会问到这些控件，但从项目角度来看，它们非常重要。

如需进一步阅读，请观看以下面试准备视频和分步视频系列。

• ASP.NET MVC 面试题及答案
• C# 面试题及答案
• Angular 面试题及答案
• 逐步学习Azure。
• 逐步学习MVC 5
• MVC Core 分步教程
• SQL Server 分步教程
• ASP.NET 中的Session & Viewstate。