首页 >web前端 >js教程 >构建您自己的Ajax Web应用程序

构建您自己的Ajax Web应用程序

尊渡假赌尊渡假赌尊渡假赌原创: 2025-03-09 00:11:28826浏览

构建您自己的Ajax Web应用程序

>因此，您可以在这里学习所有称为Ajax的东西。但是，到底是什么？术语AJAX是指用于创建动态，交互式Web内容的一系列宽松的技术。

> Ajax一词，最初是由Adaptive Path的Jesse James Garrett在他的论文Ajax中创造的：一种新的Web应用程序方法，是“异步JavaScript和XML”的首字母缩写。这有点令人满意，但是它只是描述了一种使用JavaScript来刷新页面内容的技术，而无需重新加载整个页面。这与更新网页的传统方法不同，该方法要求浏览器刷新整个页面以显示内容的任何更改。

>类似的技术已经以一种或另一种形式出现（通常是在一些聪明的骇客的帮助下实现的）。但是，在浏览器中XMLHTTPRequest类的可用性不断提高，引人入胜的术语Ajax的创造以及许多高知名示例的出现，例如Google Maps，Gmail，Gmail，Backpack和Flickr，允许这些高度交互的Web应用程序开始在开发世界中获得牵引力。由于Ajax一词已经变得更加普遍，因此其定义已扩展为更普遍地指基于浏览器的应用程序，这些应用程序比老式的Web应用程序动态更具动态性。 Ajax Web应用程序的这种新作物可以更广泛地使用互动技术，例如编辑文本，拖放和CSS动画或过渡，以实现用户界面内的更改。本教程将解释这些技术，并向您展示如何开发自己的Ajax Web应用程序。

本教程是我的新书《

构建您自己的Ajax Web应用程序

的摘录。在此处介绍的三章中，我们将讨论Ajax的基础知识，并在深入研究XMLHTTPRequest的奇妙世界之前，了解它的滴答作用。在我们玩了它，探索其内部工作，提出请求并异步更新我们的应用程序页面之后，我们开始开发我们的第一个真实的Ajax应用程序。

>这将是一个很大的旅程，所以我希望您准备好冒险！如果您想阅读这些章节以脱机，请下载它们的.pdf版本。但是现在，让我们在Ajax中获得扎实的基础。 >第1章。Ajax：概述

他逃脱了，白痴！派遣战争火箭Ajax！带回他的身体！

- kala将军，闪存Gordon

ajax Web应用程序 ajax可能是许多Web开发项目的绝佳解决方案 - 它可以增强Web应用程序的能力，并接管了许多以前几乎完全被桌面应用程序所占据的基础。>

>都一样，请务必记住，Ajax不是一种魔幻的童话粉，您可以在应用程序上撒上以使其喘不过气而凉爽。像任何其他新的开发技术一样，Ajax并不难使用，而且唯一比可怕的，笨拙的老式Web应用程序更糟糕的是可怕的，执行不佳的Ajax Web应用程序。当您将其应用于Web应用程序的正确部分时，Ajax可以显着增强用户对应用程序的体验。 Ajax可以提高应用程序的交互性和速度，最终使该应用程序更轻松，更有趣，并且更直观。

>通常，Ajax应用程序被描述为“像浏览器中的桌面应用程序”。这是一个相当准确的描述 - Ajax Web应用程序比传统的老式Web应用程序的响应率要高得多，并且它们可以提供类似于桌面应用程序的交互级别。

>但是AJAX Web应用程序仍然是一个远程应用程序，并且与可以访问本地存储的桌面应用程序的行为不同。作为AJAX开发人员的工作的一部分是，尽管必须在应用程序和遥远的服务器之间进行通信，但仍能响应响应且易于使用。幸运的是，Ajax工具箱为您提供了许多出色的技术来实现这一目标。

不好的过去

>超出服务简单，静态HTML页面的最早转移的Web开发任务之一是使用后端数据存储中的数据在Web服务器上动态构建页面的技术。回到Web开发的“旧时代”中，创建此动态，数据库驱动的内容的唯一方法是使用CGI脚本（最有可能用PERL编写）或某些可以解释脚本语言（例如Microsoft的Active Server页面）来构造服务器端的整个页面。即使对该页面进行一次更改也需要从浏览器到服务器进行往返 - 只有这样，新内容才能显示给用户。 >在当时，Web应用程序的用户界面的普通模型是用户填写并提交服务器的Web表单。服务器将处理提交的表单，并将一个全新的页面发送回浏览器以进行显示。因此，例如，对于每个步骤，都需要用户提交表单，从而提示浏览器和服务器之间的往返。允许，这在静态网页上是一个巨大的进步，但与向最终用户展示真正的“应用程序”体验相去甚远。

>史前Ajax

早期的Web开发人员立即开始寻找技巧来扩展基于简单表单模型的功能，因为他们努力创建更响应和交互的Web应用程序。这些骇客虽然是临时和原油，但是网络开发人员迈向的第一步，我们在当今的Ajax应用程序中看到了这种交互性。但是，尽管这些技巧和解决方法经常提供可用的工作解决方案，但由此产生的代码并不是一个漂亮的景象。

>嵌套框架

>解决整个页面以显示其内容的最小更改的一种方法是在其他框架集中的嵌套镜框骇客骇客，通常是深层的几个级别。该技术允许开发人员仅更新屏幕的选定区域，甚至可以模仿TabSyle导航接口的行为，其中用户在屏幕的一个部分中单击选项卡在另一个区域中更改了内容。

这项技术带来了可怕的，无与伦比的代码，并获得了具有诸如EmployeedItwizardMiddleLowerRight.asp的名称的页面。

隐藏的iframe

>在Internet Explorer 4之类的浏览器中添加iframe，使事情变得不那么痛苦。隐藏iframe的能力完全导致了另一个整洁的黑客的开发：开发人员将使用隐藏的IFRAME向服务器提出HTTP请求，然后使用JavaScript和DHTML将内容插入页面。这提供了与现代Ajax可用的许多相同功能，包括能够在不重新加载页面的情况下从表单中提交数据的能力，这是通过将表单提交给隐藏的IFRAME实现的壮举。服务器由服务器返回到iframe，页面的JavaScript可以访问它。

>这种方法的重大缺点（毕竟它是黑客的事实）是主文档和iframe中的文档之间来回传递数据的烦人负担。

远程脚本

>另一种类似Ajax的技术，通常称为远程脚本，涉及将<script>标记的SRC属性设置为包含动态生成的JavaScript的加载页面。 这具有比隐藏的iframe hack更干净的优点，因为在服务器上生成的JavaScript将加载到主文档中。但是，只有使用此技术才有可能进行简单的请求。 是什么使Ajax Cool 这就是为什么Ajax开发是Web开发的巨大飞跃的原因：不必以一个巨大的质量将所有内容发送到服务器，而是等待服务器发送回新页面以进行渲染，而是可以在较小的块中与服务器进行通信，而是根据服务器对这些请求的响应进行选择性地更新特定区域。这就是Ajax首字母缩写中的单词异步的起源。<and>>>通过考虑相反的同步系统来理解异步系统的想法可能是最容易的。在同步系统中，一切都按顺序进行。如果赛车是同步的系统，那将是一件非常乏味的事情。首先在网格上开始的汽车将是整个终点线的第一辆汽车，其次是开始第二次的汽车，依此类推。不会有超车，如果一辆汽车破裂，在机械师进行维修时，后面的交通将被迫停下来等待。 >传统的Web应用程序使用同步系统：您必须等待服务器向您发送系统的第一页，然后才能请求第二页，如图1.1所示。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029133777.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > >图1.1。传统的Web应用程序是同步系统> >异步赛车将更加令人兴奋。杆位的汽车可以在第一个拐角处取代，从电网的后部开始的汽车可以穿越田野并以第三名越过终点线。完全通过这种方式从AJAX应用程序中的浏览器请求HTTP请求。正是这种能力可以在需求基础上向服务器提出许多小要求，这使Ajax开发变得如此酷。图1.2显示了向Web服务器的Ajax应用程序，向Web服务器提出异步请求。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029358444.png" class="lazy" alt="构建您自己的Ajax Web应用程序" >>图1.2。 Ajax Web应用程序是一个异步系统 > 最终结果是一个感觉更快响应的应用程序，因为用户花费的时间大大减少等待请求处理的请求，而不必等待整个新的网页浏览电线，并通过其浏览器对其进行启用，然后才能查看结果。 ajax Technologies >用于构建Ajax Web应用程序的技术包含许多不同的编程域，因此Ajax开发既不像常规应用程序开发那样简单，也不像老式的Web开发一样容易。另一方面，Ajax开发具有许多不同的技术的事实使它变得更加有趣和有趣。以下是合作制作AJAX Web应用程序的技术的简要列表：<ancy>> <h5> xml w3c dom > css <ul> <li>> xmlhttprequest <li>> javascript <li> 在本章的其余部分，我们将符合这些技术中的每一种，并讨论它们在Ajax Web应用程序中扮演的角色。<li> <li>数据交换和标记：xml> > XML（XML代表可扩展的标记语言 - 不是任何人都称其为教科书之外的人。）Ajax是Ajax获得字母“ X”的地方。这很幸运，因为技术缩写词自动认为，如果它们包含字母“ X”，它们会更酷。（是的，我在开玩笑！）>数据交换通用语言franca XML通常用作异步HTTP请求中使用的主要数据格式，该请求在AJAX应用程序中在浏览器和服务器之间通信。这个角色扮演了XML的优势，作为一种中性且相当简单的数据交换格式，也意味着如果需要，则相对容易再利用或重新格式化。当然，还有许多其他方法可以使数据格式化，以便于浏览器和服务器之间容易交换（例如CSV（逗号分隔值），JSON（JAVASCRIPT对象表示法）或简单的纯文本），但是XML是最常见的。 xml作为markup AJAX应用程序中的网页由XHTML标记组成，实际上只是XML的味道。 XHTML作为HTML的继任者，与它非常相似。任何熟悉老式HTML的开发人员都可以轻松地接收它，但它具有有效XML的所有好处。使用XHTML有许多优势： >它提供了许多标准工具和脚本库，用于查看，编辑和验证XML。 <ul>它与较新的，XML兼容的浏览器是向前兼容的。它可以与HTML文档对象模型（DOM）或XML DOM。 <li>>在非浏览器代理中查看更容易重新利用。> <li> >开发界的一些更奇特的人坚持认为人们不应使用XHTML。他们非常坚信，XHTML由于它是实际的XML，因此完全不应使用XHTML，除非可以配备适当的HTTP Content-type-appplication/XHTML XML XML（文本/XML和Application/XML也可以，尽管它们的描述性较低，但目前对browserer的支持仍然有限。（Internet Explorer 6和7根本不支持它。）<li> 在实践中，您可以使用文本/html的内容类型将XHTML提供给浏览器，因为所有主流浏览器都正确地渲染了所有XHTML文档作为文本/HTML。尽管浏览器会将您的代码视为普通的旧HTML，但其他程序仍然可以将其解释为XML，因此没有实际的理由不使用它来“对未来”标记。 >如果您碰巧不同意我，则可以选择使用较旧的HTML 4.01标准来开发。这仍然是一个可行的Web标准，并且是开发Web应用程序时做出的完全合法的选择。 <li> xhtml和这本书> >本书中的大多数代码示例将使用XHTML 1.0严格。 iframe元素不在严格中，因此我们使用IFRAME显示的几个代码示例将为XHTML 1.0过渡。 >万维网财团维持了HTML和XHTML之间差异的常见问题。 w3c文档对象模型文档对象模型（DOM）是XML和HTML文档的面向对象的表示，并提供了用于更改这些文档的内容，结构和样式的API。最初，Netscape Navigator和Internet Explorer等特定的浏览器提供了不同的专有方法来使用JavaScript操纵HTML文档。 DOM源于万维网联盟（W3C）为实现相同任务提供平台和浏览器中立的方式。 DOM代表XML或HTML文档作为对象层次结构的结构，这是通过标准XML工具解析的理想选择。 > DOM操纵方法 JavaScript提供了大量的API，以解析和操纵文档来处理这些DOM结构。这是完成我们在Ajax应用程序中看到的网页的较小，逐件更改的主要方法之一。（另一种方法是仅仅是为了更改元素的innerHTML属性。尽管它得到了主流浏览器的广泛支持，但该方法在任何标准中均未得到很好的记录。） > dom事件 > DOM的另一个重要功能是，它为JavaScript提供了将事件附加到网页上元素的标准手段。这使得用户界面变得更加丰富，因为它使您可以使用户有机会与页面交互超越简单的链接和形式元素。> >一个很好的例子是拖放功能，该功能使用户可以在屏幕上拖动页面段，并将其放置到位以触发特定的功能。这种功能曾经仅在桌面应用程序中存在，但是现在它在浏览器中也同样可以，这要归功于DOM。 演示：CSS > css（级联样式表）提供了一种统一的方法来控制Web应用程序中用户界面元素的外观。您可以使用CSS更改页面外观的任何方面，从字体尺寸，颜色和间距到元素的定位。。在AJAX应用程序中，CSS的一种非常好的用途是提供用户界面反馈（带有CSS驱动的动画和过渡），或指示用户可以与用户进行交互的部分（例如，对颜色或外观的更改，例如，由MouseOvers触发）。例如，您可以使用CSS过渡来表明您的应用程序的某些部分正在等待服务器上处理的HTTP请求。> 在Ajax一词的更广泛定义中，<ancy> css的操纵在各种视觉过渡和效果以及拖放和地位功能中的广泛定义。 >通信：xmlhttprequest > XMLHTTPRequest，一个具有非常易于使用的接口的JavaScript类，发送并接收到Web服务器和来自Web服务器的HTTP请求和响应。 XMLHTTPRequest类是使真正的Ajax应用程序开发成为可能的原因。用XMLHTTPRequest做出的HTTP请求就像浏览器正在提出加载页面或提交表格的正常请求一样，但无需用户不必离开当前加载的网页。> Microsoft在Internet Explorer 5中首次在Windows中实现了XMLHTTPRequest作为ActiveX对象。 Mozilla项目在Mozilla浏览器中提供了一个JavaScript-native版本，从1.0版开始。（当然也可以在Firefox中使用。）Apple自版本1.2以来已将XMLHTTPRequest添加到Safari中。 可以将服务器的响应（XML文档或文本字符串）传递给JavaScript以使用开发人员认为合适的情况 - 通常以更新Web应用程序的某些用户界面。 将所有内容放在一起： JavaScript是将您的Ajax应用程序固定在一起的胶水。它在Ajax开发中扮演多个角色： 控制使用xmlhttprequest 提出的HTTP请求根据使用的数据交换格式，使用DOM操纵方法，XSLT或自定义方法来解析从服务器返回的结果，通过使用DOM操作方法，通过更新元素的InnerHTML属性或通过更改元素的CSS属性<ancon <>>来插入内容，通过使用DOM操纵方法在用户界面中显示所得数据 由于其在轻型网络编程中的悠久历史（并且在没有经验的程序员手中）中，许多传统的应用程序开发人员并未将JavaScript视为一种“严肃的编程语言”，尽管实际上，实际上，它是一种能够支持的，具有支持的对象的编程方法。随着Ajax开发技术扩大基于浏览器的应用程序的功能和功能，对JavaScript作为“玩具语言”的误解现在正在迅速变化。由于Ajax的出现，JavaScript现在似乎正在进行文艺复兴时期，并且可用于Ajax开发的JavaScript工具包和库的爆炸性增长是事实证明。<h5>摘要在本章中，我们对Ajax和使其打勾的技术进行了快速概述。我们研究了开发人员在过去的糟糕时代必须忍受的一些可怕的编码扭曲，以创建类似于交互式UI的东西，我们看到了Ajax如何对这些方法提供了巨大的改进。通过对Ajax的构建块的不错命令 - XML，DOM，CSS，XMLHTTPREQUEST和JAVASCRIPT，它们将它们全部联系在一起 - 您拥有开始构建动态且可访问的Ajax站点所需的一切。 >第2章。基本XMLHTTPREQUEST <h5>>我迫不及待地想分享这个新的奇迹，人们都会看到它的光，让他们都做自己的音乐，牧师在今晚赞美我的名字。> <q> - 匆忙，发现> >是XMLHTTPRequest赋予Ajax的真实力量：从浏览器中发出异步HTTP请求并在小块中提取内容的能力。> Web开发人员长期以来一直在使用技巧和骇客来实现这一目标，而遭受了令人讨厌的限制：无形的iframe hack迫使我们在iframe中的父文档和文档之间来回传递数据，甚至“远程脚本”方法也仅限于为包含JavaScript的页面提出的请求。使用xmlhttprequest的现代AJAX技术，对这些Kludgy方法提供了巨大的改进，从而使您的应用程序可以同时发布和发布请求，而无需完全重新加载页面。在本章中，我们将直接加入并构建一个简单的AJAX Web应用程序 - 一个简单的站点监控应用程序，将Web服务器上的页面贴在时间表上。但是，在我们开始对服务器进行异步HTTP请求进行轮询之前，我们需要通过照顾所有小浏览器不兼容来简化XMLHTTPREQUEST类的使用，例如XMLHTTTPRequest对象的不同方式，可以在单一的，可重复使用的代码库中实例化。 一个简单的ajax库 >简化XMLHTTPREQUEST类的使用的一种方法是使用现有的代码库。由于Ajax开发的普及程度越来越高，实际上有数十个库，工具包和框架可使XMLHTTPRequest更易于使用。> 但是，由于创建xmlhttprequest类实例的代码非常简单，而且使用它的API易于理解，我们只需编写一个非常简单的JavaScript库，该库照顾我们需要的基本内容。 >逐步完成创建自己的库的过程将确保您知道XMLHTTPRequest类的工作方式，并在您决定使用它们时可以帮助您从其他工具包或库中获得更多。 开始我们的Ajax类<h5> 我们将首先创建一个名为AJAX的基本类，其中我们将包装XMLHTTPREQUEST类的功能。>我从未在JavaScript中完成面向对象的编程 - help！在本节中，我们将开始在JavaScript中创建类和对象。如果您以前从未做过此事，请不要担心 - 只要您知道面向对象的编程的基础知识，那就很简单了。> 在JavaScript中，我们不会像在Java，C或.NET语言之一中那样声明具有复杂语法的类；我们只是编写一个构造函数函数来创建类的实例。我们要做的就是： 提供构造函数函数 - 此功能的名称是您类的名称 >将属性添加到使用此关键字构建的对象中，然后是一个时期和属性的名称<and>>的名称使用JavaScript的特殊函数构造函数<antax<ul> <li> 这是创建一个简单类的代码，称为helloworld：<li> JavaScript的面向对象编程的框架非常轻巧，但是一旦您掌握了它，功能就出乎意料。 JavaScript中没有更高级面向对象的功能，例如继承和多态性，但是在Ajax应用程序中，客户端很少需要这些功能。这些功能对这些功能有用的复杂业务逻辑应始终在Web服务器上，并使用XMLHTTPREQUEST类访问。<li>> 在此示例中，我们创建了一个名为Helloworld的类，带有一个属性（消息）和一种方法（Saymessage）。要使用此类，我们只需调用构造函数函数，如下所示：> >在这里，我们创建一个Helloworld的实例（称为HW），然后使用此对象显示两个消息。我们第一次称呼Saymessage，默认为“你好，世界！”显示消息。然后，在将对象的消息属性更改为“再见”之后，我们称Saymessage和“再见”。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>不用担心这是否目前没有太多意义。随着我们通过Ajax班的建立，它将变得更加清晰。 这是我们Ajax类的构造函数函数的开始：<ancy> 此代码只是定义了我们在AJAX类中需要的属性，以便与XMLHTTPRequest对象一起使用。现在，让我们向对象添加一些方法。我们需要一些可以设置XMLHTTPRequest对象的功能，并告诉它如何为我们提出请求。> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();创建一个XMLHTTPREQUEST对象>首先，我们将添加一个初始化方法，该方法将为我们创建XMLHTTPRequest对象。不幸的是，XMLHTTPreQuest在Firefox中的实现略有不同（在本书中，每当我解释某些东西在Firefox中的工作方式时，我都指的是所有基于Mozilla的浏览器，包括Firefox，Mozilla，Mozilla，Camino和Seamonkey和Seamonkey和Seamonkey和Safari和Opera，Safari），Safari和Opera在Internet Explority（Internet Explastions）中的互联网（Internet of Firesions 7）为了简化未来的AJAX开发），因此，如果您不针对特定的浏览器，则必须尝试以多种不同方式实例化对象。 Firefox和Safari使用名为XMLHTTPREQUEST的类创建XMLHTTPRequest对象，而Internet Explorer版本6及更早使用了一个名为ActiveXobject的特殊类，该类别内置在Microsoft的脚本引擎中。尽管这些类具有不同的构造函数，但它们的行为方式相同。> >跨浏览器代码幸运的是，大多数现代浏览器（Internet Explorer 6，Firefox 1.0，Safari 1.2和Opera 8或以后的任何这些浏览器的版本）总体上遵守网络标准，因此您不必在Ajax Code中进行很多浏览器特定于浏览器的分支。>>>>>>>>>>>>>>>>>>>>>>>>>>>>。这通常使基于浏览器的AJAX应用程序比桌面应用程序更快地开发和部署跨平台。随着AJAX应用程序可用的功率和功能的增加，桌面应用程序从用户界面的角度提供了更少的优势。 INIT方法看起来像这样： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }INIT方法通过创建XMLHTTPREQUEST对象的每种可能方法，直到成功创建一个对象为止。然后将此对象返回到调用函数。 >优雅地降解 >保持与较旧浏览器的兼容性（“较旧”是指比上一张注释中提到的“现代浏览器”更年长的任何东西）需要大量额外的代码工作，因此定义哪个浏览您的应用程序应支持。 您知道您的应用程序将通过不支持XMLHTMLREQUEST类的较旧浏览器接收大量流量（例如，Internet Explorer 4及更早的Netscape 4及更早），您将需要完全遗漏它，或者编写代码，以使其优雅地降低。这意味着，您不必在功能较低的浏览器中消失功能，而是代码以确保这些浏览器的用户会收到功能上等效的内容，尽管也许以较低的交互式或易于使用的格式。> >您的网站也可能会吸引使用JavaScript禁用的用户。如果您想迎合这些用户，则应默认提供替代的老式接口，然后可以使用JavaScript（使用JavaScript）对现代浏览器进行修改。> 发送请求 >我们现在有了一种创建XMLHTTPRequest的方法。因此，让我们写一个用它来提出请求的函数。我们启动这样的doreq方法： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } doreq Call init的第一部分创建XMLHTTPREQUEST类的实例，并在不成功的情况下显示快速警报。> 设置请求 接下来，我们的代码在this.req上调用打开方法 - 我们的新实例xmlhttprequest类 - 开始设置http请求：<anttp> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();开放方法采用三个参数： 1。方法 - 此参数标识我们将使用的HTTP请求方法的类型。最常用的方法是获取和发布。> 方法是案例敏感 根据HTTP规范（RFC 2616），这些请求方法的名称对病例敏感。而且，由于规格中描述的方法被定义为所有大写，因此您应始终确保在所有大写字母中键入该方法。 2。 URL - 此参数标识要请求的页面（或发布到该方法已发布的情况下）。> 越过域 >普通浏览器安全设置将不允许您将HTTP请求发送到另一个域。例如，除非用户允许使用此类请求，否则Ajax.net提供的页面将无法发送请求。。 3。异步标志 - 如果将此参数设置为true，则在等待对请求的响应时，您的JavaScript将继续正常执行。随着请求状态的变化，事件被解雇，以便您可以处理不断变化的请求状态。<ancy>> 如果将参数设置为false，则JavaScript执行将停止，直到响应从服务器返回为止。这种方法具有比使用回调功能更简单的优点，因为您可以在代码中发送请求后直接处理响应，但最大的缺点是，当您的代码在服务器上发送和处理时，您的代码暂停，并且收到了响应。由于与服务器异步通信的能力是AJAX应用程序的全部点，因此应将其设置为true。在我们的Ajax类中，将方法和异步属性初始化为合理的默认值（获取和true），但是您始终必须设置目标URL。 >设置onreadyStateChange事件处理程序 >在服务器上处理HTTP请求时，其进度由ReadyState属性的更改表示。该属性是一个代表以下状态之一的整数，从请求开始到其完成为顺序列出： <ul> <li> 0：尚未调用非初始化 - 尚未打开。> <li>1：加载 - 尚未调用发送。> <li>2：已加载 - 已调用已打电话，但尚无响应。> <li>3：交互式 - 响应正在下载，并且响应the ResponseText属性包含部分数据。 <li>4：完成 - 已加载响应并完成了请求。 > XMLHTTPRequest对象通过触发ReadyStateChange事件来告诉您状态中的每个更改。在此事件的处理程序中，请检查请求的准备状态，以及请求完成（即，当ReadyState更改为4时），您可以处理服务器的响应。<ante>> 我们的Ajax代码的基本轮廓看起来像这样：<ancy>> >我们将稍微讨论如何“做一些事情来处理响应”。目前，请记住，您需要在发送请求之前设置此事件处理程序。> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }发送请求 使用xmlhttprequest类的发送方法开始http请求，就像：> 发送方法采用一个参数，该参数用于发布数据。当请求是一个简单的获取时，它不会将任何数据传递给服务器，例如我们当前的请求，我们将此参数设置为null。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> 失去范围，这 >您可能已经注意到，onreadystatechange包含一个怪异的变量分配： > 这个新变量自我是解决一种称为“范围丢失”的问题的解决方案，该问题通常是使用异步事件处理程序的JavaScript开发人员经历的。异步事件处理程序通常与xmlhttprequest结合使用，以及诸如Settimeout或setInterval之类的函数。<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }> >该关键字在面向对象的JavaScript代码中用作速记，以参考“当前对象”。这是一个快速示例 - 一个称为scopetest的课程： 此代码将创建一个scopetest类的实例，然后调用该对象的dotest方法，该方法将显示“来自scopetest的问候！”的消息。简单，对吗？<pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 现在，让我们将一些简单的XMLHTTPRequest代码添加到我们的scopetest类中。我们将向您的Web服务器主页发送简单的获取请求，当收到响应时，我们将显示this.message和self.message的内容。 >那么，显示什么消息？答案如图2.1。 >我们可以看到self.message是我们期望的问候信息，但是这是怎么回事。使用关键字这是一种引用“执行此代码的对象”的便捷方法。但这有一个小问题 - 当对象外部调用它时，其含义会改变。这是所谓的执行上下文的结果。对象内部的所有代码均在相同的执行上下文中运行，但是从其他对象（例如事件处理程序）运行的代码在调用对象的执行上下文中运行。这意味着，当您编写面向对象的JavaScript时，您将无法使用此关键字来引用事件处理程序代码中的对象（例如上面的onreadyStateChange）。这个问题称为范围的丢失。 如果您还没有100％清楚这个概念，请不要为此担心太多。我们将在下一章中看到此问题的实际演示。同时，请记住，如果您在代码示例中看到变量自我，则包括解决损失问题的问题。 图2.1。 Scopetest类显示的消息<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029554646.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 处理响应 >现在，我们准备编写一些代码来处理服务器对HTTP请求的响应。还记得我们在ReadyStateChange事件处理程序中留下的“做事要处理响应”的评论吗？我们将是时候编写一些代码来做这些事情了！该功能需要做三件事： 弄清楚响应是否是错误。 以所需的格式准备响应。<ol>> <li>传递对所需处理程序函数的响应。 <li>在我们的ajax类的内部功能中包括以下代码：<ancy>> >响应完成后，指示请求是否在我们的XMLHTTPRequest对象的状态属性中返回的代码。状态属性包含已完成请求的HTTP状态代码。如果丢失了请求的页面，则可以是代码404，如果服务器端脚本中发生错误，则为500，如果请求成功，则为200，依此类推。 HTTP规范（RFC 2616）中提供了这些代码的完整列表。<li>> 数字没有好处吗？ >如果您在记住代码时遇到困难，请不用担心：您可以使用statustext属性，其中包含一条简短的消息，该消息告诉您有关错误的更多详细信息（例如，“找不到”，“内部服务器错误”，“ OK”）。 >我们的AJAX类将能够以三种不同的格式提供服务器的响应：作为普通的JavaScript字符串，作为可通过W3C XML DOM访问的XML文档对象，以及作为用于提出请求的实际XMLHTTPRequest对象。这些由Ajax类的ResponseFormat属性控制，可以将其设置为text，xml或对象。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>可以通过我们的xmlhttprequest对象的两个属性访问响应的内容：<ancy>> <ul>ponsponseText - 此属性包含服务器作为普通字符串的响应。在错误的情况下，它将包含Web服务器的错误页面HTML。只要返回响应（即ReadyState变为4），该属性将包含数据，尽管可能不是您期望的。<li> 响应XML - 此属性包含XML文档对象。如果响应不是XML，则此属性将为空。<li> >我们的AJAX类将其响应式属性初始化为文本，因此默认情况下，您的响应处理程序将以JavaScript字符串从服务器传递。如果您使用XML内容，则可以将ResponseFormat属性更改为XML，该属性将取消XML文档对象。 >如果您想获得真正的幻想，您还可以使用一个选项：您可以将实际的xmlhttprequest对象本身返回到处理程序功能。这使您可以直接访问状态和Statustext属性之类的内容，并且在您想以不同的方式对待特定类别的错误类别的情况下可能很有用 - 例如，在404个错误的情况下完成额外的登录。设置正确的内容类型 在所有主要浏览器中XMLHTTPRequest的实现要求正确设置HTTP响应的内容类型，以便将响应作为XML处理。形式良好的XML，带有内容类型的文本/XML（或Application/XML，甚至Application/XHTML XML），将正确填充XMLHTTTPRequest对象的响应XML属性；非XML内容类型将导致该属性的null值或未定义的值。> 但是，Firefox，Safari和Internet Explorer 7为XML文档上的XMLHTTPREQUEST提供了一种方法：XMLHTTTPREQUEST类的超电子方法。我们简单的Ajax类用SetMimetype方法插入其中：<ancy>> 此方法设置了MimeType属性。然后，在我们的doreq方法中，我们只需在尝试...捕获块中调用过度iMimetype，例如： 在您无法控制Web应用程序的前端和后端的环境中，能够覆盖不合作服务器的内容类型标头可能非常重要。尤其如此，因为当今许多应用程序访问服务和内容来自许多不同的域或来源。但是，由于该技术在Internet Explorer 6或Opera 8中无法使用，因此您可能不会发现它适合于您的应用程序中使用。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }> 响应处理程序根据HTTP 1.1规范，具有200至299之间的代码的任何响应是成功的响应。<ancy>>我们已定义了对状态属性的OnreadyStateChange事件处理程序，以获取响应的状态。如果代码在成功响应的正确范围内，则现有的Statechange事件处理程序将响应传递到响应处理程序方法（由HandlerESP属性设置）。> 当然，响应处理程序将需要知道响应是什么，因此我们将其作为参数传递。当我们谈论doget方法时，我们将在稍后看到此过程。> 由于处理程序方法是用户定义的，因此代码还进行粗略检查，以确保在尝试执行该方法之前已正确设置该方法。 >错误处理程序 >如果状态属性指示请求有错误（即，它在200至299代码范围之内），则服务器的响应将传递给Handleerr属性中的错误处理程序。我们的Ajax类已经为错误处理程序定义了合理的默认值，因此我们不必在调用它之前确定它是定义的。> handleerr属性指向看起来像这样的函数：> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }此方法检查以确保弹出窗口未被阻止，然后尝试在新的浏览器窗口中显示服务器错误页面内容的全文。此代码使用尝试...捕获块，因此，如果用户已阻止弹出窗口，我们可以向他们展示错误消息的剪切版本，并告诉他们如何访问更详细的错误消息。> >这对于初学者来说是一个不错的默认值，尽管您可能希望向最终用户显示更少的信息 - 这完全取决于您的偏执狂。如果您想使用自己的自定义错误处理程序，则可以使用Sethandlererr，这样：<and>> 或一个真正的处理程序<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >您可能需要使用单个函数来处理成功的响应和错误。 Sethandlerboth是我们Ajax班上一种便利方法，为我们很容易地为我们设定了这一点：> 任何作为参数传递给sethandlerboth的函数都将处理成功的响应和错误。<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 此设置可能对将类的ResponseFormat属性设置为对象的用户可能很有用，这将导致用于提出请求的XMLHTTPREQUEST对象，而不仅仅是响应the ResponseText或Responsexml属性的值 - 将传递给响应处理程序。 中止请求 >有时候，从自己的经验中您会知道的，网页将需要很长时间才能加载。您的Web浏览器具有停止按钮，但是您的Ajax类呢？这是流产方法发挥作用的地方：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此方法将onreadystate事件处理程序更改为一个空函数，调用XMLHTTPRequest类实例上的中止方法，然后摧毁您创建的实例。这样，为中止请求设置的任何属性都是重置的。下次提出请求时，将调用初始化方法，并将这些属性重新初始化。> >那么，为什么我们需要更改现有的事件处理程序？ XMLHTTPREQUEST的许多实现一旦被称为中止，将解雇该请求状态已更改。更糟糕的是，这些事件以4的准备状态结束，这表明一切都按预期完成（部分是事实，如果您考虑的话：一旦我们称堕胎，一切都应该停下来，我们的实例XMLHTTTPRequest应该准备好发送另一个请求，如果我们希望我们希望发送另一个请求）。显然，我们不希望流产请求时调用我们的响应处理程序，因此我们在呼叫流产之前删除了现有处理程序。> >将其包装 给出了我们到目前为止的代码，Ajax类只需要两件事就可以提出请求： <ul> <li>目标URL <li>响应的处理程序函数 >让我们提供一种称为doget的方法来设置这两个属性，然后启动请求：<ancy>> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();>您会注意到，连同两个预期参数URL和手一起，该函数具有第三个参数：格式。这是一个可选的参数，允许我们更改传递给处理程序功能的服务器响应的格式。 如果我们不传递格式的值，则AJAX类的响应Format属性将默认为文本值，这意味着您的处理程序将通过ResponseText属性的值传递。相反，您可以将XML或对象作为格式传递，该格式将将要传递给响应处理程序的参数转换为XML DOM或XMLHTTTPREQUEST对象。<ancy>> >>示例：简单的测试页> >终于该将我们学到的一切都放在一起了！让我们创建一个Ajax类的实例，然后使用它发送请求并处理响应。<ancly>> >现在，我们的类的代码位于一个名为ajax.js的文件中，我们想要使用AJAX类的任何网页都需要将AJAX代码包含在<script type =“ text/javascript” src =“ ajax.js”>上。一旦我们的页面访问了AJAX代码，我们就可以创建一个Ajax对象。<anj>> 这个脚本为我们提供了Ajax类的闪亮新实例。现在，让它做一些有用的事情。> 为了通过我们的Ajax类提出最基本的请求，我们可以做类似的事情：<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >这将创建我们的AJAX类的实例，该实例将使一个简单的获取请求到一个名为Fakeserver.php的页面，并将结果作为文本传递给手函数。如果fakeserver.php返回了您要使用的XML文档，则可以这样做：> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >在这种情况下，您将要绝对确定somepage.php确实提供有效的XML，并且其内容类型的HTTP响应标头设置为text/xml（或其他合适的东西）。> 创建页面 >现在我们已经创建了Ajax对象，并为请求设置了一个简单的处理程序函数，现在该将代码付诸实践了。> 伪造的服务器页面 >在上面的代码中，您可以看到请求的目标URL设置为称为fakeserver.php的页面。要使用此演示代码，您需要从同一启用PHP的Web服务器中使用Ajaxtest.html和Fakeserver.php。您也可以使用一些简单的ASP从IIS Web服务器执行此操作。伪造的服务器页面是一个超简单的页面，使用下面的PHP代码模拟Web服务器的不同响应时间： <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 这就是代码的所有这些小块：它等待三到12秒之间，然后打印正常。 fakeserver.php代码设置了对文本/平原的响应的内容类型标题。根据您传递的页面内容的不同，您可以选择另一种内容类型来响应。例如，如果您将XML文档传递回呼叫者，则自然需要使用文本/XML。 >在ASP中，这在ASP中也同样有效，尽管某些功能（例如睡眠）并不容易可用，如下面的代码所示：： >在本书中，我们所有的服务器端示例都将用PHP编写，尽管它们很容易用ASP，ASP.NET，Java，Perl或几乎任何可以通过Web服务器提供内容提供内容的语言。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };使用setMimetype方法 想象您有一个响应，您知道包含一个有效的XML文档，您想将其作为XML解析，但服务器坚持将其作为文本/平原提供给您。您可以通过在setMimeType中添加额外的呼叫来强制将该响应解析为XML，例如：> >自然，只有在确定服务器的响应有效XML时，才应该使用此方法，并且可以确保浏览器是Firefox或Safari。击中页面<pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; 现在是真理的时刻！点击本地Web服务器，加载ajaxtest.html，然后查看您获得的内容。如果一切正常工作，将会有一些片刻的延迟，然后您会看到标准的JavaScript警报，如图2.2中的标准警报，简单地说。 图2.2。确认您的Ajax类正在按预期工作>现在一切都很好，我们的Ajax类正常运行，是时候转到下一步了。 >示例：一个简单的ajax应用<h5> 好吧，因此，使用Ajax的出色力量来产生一个小小的JavaScript警报框，该盒子读出“ OK”可能并不是您购买这本书时所想的。让我们对我们的示例代码进行一些更改，以使此XMLHTTPRequest的内容更有用。同时，我们将创建本章开始时提到的简单监视应用程序。该应用程序将ping网站并报告返回响应所需的时间。> 奠定基础 我们将从一个简单的HTML文档开始，该文档链接到两个JavaScript文件：包含我们库的Ajax.js和AppMonitor1.js，该文件将包含我们应用程序的代码。> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>您会注意到页面正文中几乎没有内容 - 只有一个DIV元素。这是依赖Ajax函数的Web应用程序的典型特征。通常，Ajax应用程序的大部分内容都是由JavaScript动态创建的，因此我们通常在页面源的主体中看到的标记要比在服务器生成的所有内容的非AJAX Web应用程序中要少得多。但是，如果Ajax不是应用程序中绝对重要的一部分，则应提供该应用程序的普通HTML版本。 >我们将使用一些简单的内容开始我们的AppMonitor1.js文件，这些内容可利用我们的Ajax类： >我们将使用start变量记录每个请求启动的时间 - 该数字将用于计算每个请求的时间。我们使启动一个全局变量，以便我们不必使用Ajax类的作品使用额外的计时请求代码 - 我们可以在呼叫到Ajax对象之前和之后立即设置“启动”的值。<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> ajax变量仅容纳我们的ajax类的实例。> <ancly>使用AJAX类，掺杂函数实际上是HTTP请求。您应该从我们的原始测试页面中识别对Doget方法的呼叫。 请注意，我们已将其作为参数的启动值添加到目标URL中。实际上，我们不会在服务器上使用此值；我们只是将其用作随机价值来处理Internet Explorer的过度狂热缓存。即缓存所有使用XMLHTTPRequest提出的请求，并且禁用“功能”的一种方法是将随机值附加到查询字符串中。启动中的毫秒值可以将其作为随机值加倍。这种方法的一种替代方法是使用XMLHTTTPRequest类的SetRequestHeader方法在请求下设置IF-MODIFIED-SINCE标头。> >最后，我们通过将多余的杂音插入窗口。 >用Showpoll 处理结果我们传递给Doget的第二个参数告诉Ajax类，以传递对函数ShowPoll的响应。这是该功能的代码： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }这很简单：该功能期望一个参数，如果一切按预期进行，则应该是从fakeserver.php返回的字符串OK。如果响应是正确的，则代码会执行弄清楚响应的时间并创建包含结果的消息所需的快速计算。它将该消息传递给Pollresult以进行显示。> 在这个非常简单的实现中，除了预期响应以外的任何其他事物都会导致相当简短且无助的消息：请求失败。当我们在下一章中升级此应用程序时，我们将使错误条件的处理更加牢固。 设置了Pollresult后，它将传递给Printresult函数：<ancy>> printresult函数显示页面内部showpoll发送的消息。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();请注意上面代码中的测试，该测试用于查看我们的DIV是否具有任何子节点。这检查是否存在任何文本节点，其中可能包括我们在以前的迭代中添加到此div的文本，或者在页面标记中包含的文本中包含的文本，然后将其删除。如果您不删除现有的文本节点，则代码将作为新的文本节点将新结果简单地附加到页面上：您将显示一连串的文本字符串，并不断地将更多的文本附加到。 为什么不使用innerhtml？ >您可以简单地更新DIV的InnerHTML属性，例如：> > InnerHTML属性不是Web标准，而是所有主要浏览器都支持它。而且，您可以从这一事实中看到它是一行代码（与DOM方法所需的四行相比），有时比DOM方法更容易使用。在您的页面上显示内容的两种方式本质上都更好。> 在某些情况下，您最终可能会根据这两种方法的渲染速度差异选择一种方法（InnerHTML可以比DOM方法更快）。在其他情况下，您可能会根据规范的清晰度甚至个人品味来确定决定。<and>> ><pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }>重新开始过程 >最后，Showpoll通过使用SettiMeout在15秒内将调用在15秒内安排到原始的掺杂函数来开始整个过程，如下所示： 代码不断调用二极管函数的事实意味着，一旦页面加载，http请求http请求进行轮询fakeserver.php页面将继续这样做，直到该页面关闭为止。 PollHand变量是允许您跟踪待处理操作的间隔ID，并使用ClearTimeOut取消它。> settimeout调用的第一个参数dopoll是指向应用程序的主要功能的指针。第二个表示必须在请求之间经过的时间长度。 完整的示例代码 >这是我们第一次试用的所有代码，并使用此简单监视应用程序。 在遵循良好软件工程原则的竞标中 >我将使用本书的所有示例代码遵循类似的方法，将每个示例的标记，JavaScript代码和CSS分为单独的文件。这个小小的监视应用程序是如此基础，以至于没有CSS文件。我们将添加一些样式，以使其在下一章中看起来更好。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }> >运行应用程序 >尝试将页面加载到浏览器中。将其放入您的Web服务器的根目录中，然后在浏览器中打开页面。> >如果Fakeserver.php页面正确响应，您会看到类似于图2.3. 所示的显示。 图2.3。运行简单的监视应用程序<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029764092.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 进一步阅读 以下是一些在线资源，可以帮助您更多地了解本章中有关技术和概念的更多信息。> <h5>> javascript的对象模型 http://docs.sun.com/source/816-6409-10/Obj.htm http://docs.sun.com/source/816-6409-10/Obj2.htm <ul> <li> >查看由Sun Microsystems托管的JavaScript版本1.3的客户端JavaScript指南中的对象的这两章。第一章说明了您需要了解如何与JavaScript中对象一起工作的所有基本概念。第二个关于JavaScript的基于原型的继承模型的深度，使您可以使用JavaScript利用更多面向对象的编码的功能。<li>> 这是用JavaScript对象创建私有实例变量的简要介绍。它将帮助您更深入地了解JavaScript基于原型的继承方案。 xmlhttpRequest >这是Apple Developer Connection的好参考页面。它提供了XMLHTTPRequest类的不错概述，以及其方法和属性的参考表。 本文最初发布于2002年，继续使用新信息进行更新。它包括有关提出头部请求的信息（而不是仅仅是获取或发布），以及JavaScript对象符号（JSON）和SOAP。 这是Xulplanet在Firefox中实现XMLHTTPREQUEST上的详尽参考。这是另一个不错的概述，它还显示了XMLHTTPREQUEST对象的一些较少使用的方法，例如OverRideMeType，SetRequestHeader和GetResponseheader。同样，此参考的重点是在Firefox中实施。>这是Microsoft在MSDN上实现XMLHTTPREQUEST的文档。摘要<h5> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <ul>>系统管理员配置轮询间隔和超时阈值之间的间隔 <li>启动和停止监视过程的简便方法 <li>>先前请求的响应时间的条形图；历史记录列表中的条目数将是用户配置的 <li>>用户通知应用程序正在进行请求> <li>优雅地处理请求超时 <li> 图3.1显示了运行应用程序完成所有增强功能后的外观。 此应用程序的代码分为三个文件：AppMonitor2.html中的标记，AppMonitor2.js中的JavaScript代码以及AppMonitor2.CSS中的样式。首先，我们将将所有必需的文件链接到AppMonitor2.html：<anty>> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 图3.1。运行应用程序<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 组织代码 >所有这些新功能将为我们的应用增添更多的复杂性，因此这是在我们的代码中建立某种组织的好时机（比将所有内容保留在全球范围中的选择要好得多）。毕竟，我们正在构建一个功能齐全的AJAX应用程序，因此我们希望将其井井有条。 <h5>>我们将使用面向对象的设计原理来组织我们的应用程序。当然，我们将从为我们的应用程序创建基类-Monitor类别。通常，我们会在这样的JavaScript中创建一个类：> 这是一个不错的普通构造函数，我们可以轻松地使用它来创建一个监视器类（或者如果我们愿意的话，则可以使用其中一组）。> settimeout <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 失去范围不幸的是，在我们的应用程序的情况下，事情并不那么容易。我们将在我们的应用中使用大量调用settimeout（以及setInterval），因此创建JavaScript类的正常方法可能会证明我们的Monitor类可能很麻烦。 settimeout函数非常方便延迟执行一件代码，但是它具有严重的缺点：它在执行上下文中运行该代码与对象不同的代码。（在上一章中，我们谈论了这个问题，称为范围丢失。） 这是一个问题，因为对象关键字在新的执行上下文中具有新的含义。因此，当您在班上使用它时，它会突然出现失忆症 - 它不知道它是什么！ 这可能很难理解。让我们快速演示，以便您实际上可以看到这种烦恼。您可能还记得我们在上一章中查看的scopetest课。首先，这是一个简单的类，带有一个属性和一种方法：<ancy><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此代码的结果是可预测的JavaScript警报框，其中包含文本“来自Scopetest的问候！” >让我们更改Dotest方法，以便它使用SettiMeout在一秒钟的时间内显示消息。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >而不是我们的问候消息，而是该版本的代码产生的警报框将读取“未定义”。因为我们使用settimeout致电Ontimeout，所以OnTimeout在新的执行上下文中运行。在该执行上下文中，这不再是指scopetest的实例，因此，此。解决这个范围丢失问题的最简单方法是使监视器类成为一种特殊的类，称为单身人士。 带有JavaScript的单例> >“单身”之所以称之为“单身人士”，是因为该类的“单个”实例在任何时候都存在。让课上的单身人士非常容易： 使用关键字新功能创建一个“单发”构造函数。它创建了一个scopetest的实例，并且已经完成：您无法使用它来创建更多scopetest对象。<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }> 要调用此单元对象的dotest方法，您必须使用类的实际名称（因为只有一个实例）： 一切都很好，但是我们还没有解决我们失去范围问题的问题。如果您现在尝试使用代码，则会收到以前看到的“未定义”消息，因为这并不是指scopetest实例。但是，使用单例为我们提供了解决问题的简便方法。我们要做的就是使用对象的实际名称 - 而不是关键字 - intimeout：<antimeout：<antimeout：<ancy> <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; >只有一个scopetest的实例，我们正在使用其实际名称而不是这个实例，因此在这里引用哪个scopetest实例没有混淆。> <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } };>执行此代码时，您会看到“来自Scopetest的问候！”的预期价值。在JavaScript警报框中。 >现在，我厌倦了整个对象代码中使用实际对象名称，并且我喜欢在可能的地方使用类似的捷径关键字。因此，通常我会创建一个可以代替此的变量自我，并将其指向每个方法顶部的对象名称，例如：> >这看起来像这样的方法有点愚蠢，但是在较长的代码中，很高兴拥有类似于此的速记解决方案，您可以使用该解决方案来引用您的对象。我使用自我，但是如果您愿意，您可以使用我，或者嘿，或者Darthvader。 <pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); };创建监视器对象 >现在我们有了一个代码组织的计划，该计划将解决SettieMout的责任丢失问题，现在该创建我们的基本监视器类别了：<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >将作为班级初始化的一部分初始化的前四个属性，Targeturl，Pollinterval，MaxPollentries和TimeOutThreshold。他们将采用应用程序配置中定义的值，我们将在下一节中查看。这是对其他属性的简短摘要： <anj> ajax - 我们的AJAX类的实例，该类别向我们正在监视的服务器提供HTTP请求。<ancy>> <ul>开始 - 用于记录发送最后一个请求的时间。<li>> PollArray - 保留服务器响应时间的数组；常数max_poll_entries确定此数组中保存的项目数。 <li>> POLLHAND，TIMEOUTHAND - SETTIMEOUT返回的间隔ID呼叫两个不同的进程 - 主要的轮询过程和超时观察器，该暂停观察器控制每个请求的用户定义超时期。> <li>> reqstatus - 用于在请求进行时通知用户的状态动画。实现这一目标的代码非常复杂，因此我们将编写另一个Singleton课程来照顾它。 reqstatus属性指向该类的单个实例。> <li> >配置和初始化我们的应用程序<li> >查看此应用程序的网站管理员可能会认为它很酷，但是他或她想要的第一件事是一种配置应用程序的轮询间隔的简便方法，或者在应用程序在其监视网站上提供的请求之间的时间。使用全局常数配置轮询间隔很容易。> <h5>>使此脚本的任何用户都非常简单地设置轮询间隔，我们将在appmonitor2.html的头部中将代码的此部分放在脚本元素中：<antml：<ante> >您会注意到这些变量名称是用全盖编写的。这表明它们应该像常数一样行动 - 该值是在代码早期设置的值，并且不会随着代码执行而更改。常数是许多编程语言的功能，但不幸的是，JavaScript不是其中之一。（JavaScript的较新版本允许您使用COSTKEYWORD设置真实常数，但是该设施并没有得到广泛支持（即使是许多现代浏览器）。）请注意，这些常数直接与我们类别的前四个属性有关：targeturl，polliNterval，polliNterval，maxpollentries和timeoutthreshold。这些属性将在我们班级的初始化方法中初始化： 以及初始化类的某些属性，INIT方法还调用了两种方法：ToggleaPpStatus，负责启动和停止轮询的负责，以及ReqStatus对象的INIT方法。 reqstatus是我们刚才讨论的现状单顿班的实例。<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> 此INIT方法与页面的窗口。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } <h5>设置UI >该应用程序的第一个版本在加载页面时启动，然后运行直到浏览器窗口关闭。在此版本中，我们想为用户提供一个按钮，他们可以用来打开或关闭轮询过程。 toggleappstatus方法为我们处理此操作：> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 好吧，所以toggleappstatus并不能真正完成工作，但是它调用了这样做的方法：togglebutton，将开始按钮更改为停止按钮，反之亦然，而togglestatusmessage则更新了应用程序的状态消息。让我们仔细看看这些方法中的每种方法。> > toggleButton方法 此方法可在其“停止”和“开始”状态之间切换主要应用程序。它使用DOM-操纵方法动态创建适当的按钮，为其分配正确的文本和onClick Event Handler：<anclick> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }>该方法的唯一参数可以停止，可以是正确的，表明轮询已停止或错误，表明投票已经开始。如您在此方法的代码中所看到的那样，创建了按钮，并设置为显示应用程序停止时的启动，或者如果应用程序当前正在对服务器进行轮询，则停止。它还分配了PollserverStart或PollserverStop作为按钮的OnClick活动处理程序。这些事件处理程序将分别启动或停止投票过程。> >从INIT调用此方法（通过toggleappstatus）时，停止将设置为true，以便在启动应用程序时显示按钮启动。> >此代码要求使用ID ButtonAarea的DIV，请立即将其添加到我们的标记中： togglestatusmessage方法<pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; >在上面显示带有“ start”或“停止”一词的按钮可能是程序员或工程师需要弄清楚应用程序状态的全部内容，但是大多数普通人都需要一条更清楚，更明显的消息，以便在应用程序中弄清楚发生的事情。<ancly>> > 该应用程序的此升级版本将在页面顶部显示状态消息，以告诉用户应用程序的整体状态（停止或运行）以及轮询过程的状态。要显示应用程序状态，我们将在应用程序状态栏中显示应用程序状态状态：停止或应用状态：运行。 在我们的标记中，让我们插入按钮出现的位置上方的状态消息。我们将仅在标记中包括消息的“应用状态”一部分。该消息的其余部分将插入具有ID CurrentAppState的跨度：<ancerAppState：<ancy>> > togglestatusmessage方法在当前appstate跨度内显示的单词之间切换：<ancy>> 设置UI后，应用程序将进行启动，并准备开始进行轮询和记录响应时间。<pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } }; >检查您正在进行的工作<pre class="brush:php;toolbar:false">Example 2.4. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } this.req.open(this.method, this.url, this.async); };>>现在您已经走了这么远了，能够看到您的作品正在行动，对吗？好吧，不幸的是，我们的应用程序中仍然有很多松散的结局 - 我们简短地提到了一个名为STATUS的Singleton课程，但我们还没有创建它，而且我们仍然有活动处理程序可以写作。但是永远不要害怕！我们可以快速使用几个类和功能存根来启动并运行该应用程序。> 我们将使用一个空的方法开始创建该状态单顿类。<ance>> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>由于监视器类使用状态类，因此我们必须在监视器之前声明状态。然后，我们将按钮的OnClick事件处理程序添加到显示器类。我们将使他们显示警报对话框，以便我们知道如果幕后发生任何事情，会发生什么。 >有两个简单的存根，您的应用程序现在应该准备好进行测试。 <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 图3.2。谦卑的开始<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030111068.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 单击图3.2显示的显示中的开始按钮时，您会提供一个警报框，该框承诺将会发生更多的事情。让我们开始善待这些诺言。> 轮询服务器 第一步是充实“开始”按钮的OnClick Event Handler，PollserverStart： <h5> 此代码立即调用二极管方法，就像我们在第2章中构建的App Monitor一样，基本XMLHTTPREQUEST将负责提出HTTP请求来对服务器进行轮询。发送请求后，代码调用toggleappstatus，将其错误表示投票正在进行中。> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }<>>> >您可能会想知道，为什么在所有有关设置轮询间隔的讨论之后，我们的代码就向服务器的请求直接跳入；时间延迟在哪里？答案是我们不希望第一个请求延迟时间。如果用户单击按钮，并且在发生任何事情之前有十秒钟的延迟，他们会认为该应用程序已损坏。我们希望在应用程序运行后发生的所有后续请求之间延迟，但是当用户首先单击该按钮时，我们希望轮询立即开始。 >在此版本的应用程序监视器和上一章中看到的二光面的唯一区别是使用self来前缀类的属性和呼叫Settimeout。看看： >我们致电Settimeout指示浏览器一旦超时门槛通过。我们还在跟踪返回的间隔ID，因此我们可以在ShowPoll收到响应时取消对Handletimeout的呼叫。 这是Showpoll方法的代码，该代码处理服务器的响应：<ancy>><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >该方法要做的第一件事是取消在多波尔末尾对Handletimeout的延迟调用。之后，我们告诉我们的状态类实例以停止其动画（我们将稍后再查看此细节）。 >这些呼叫后，ShowPoll检查以确保响应还可以，然后计算该响应从服务器返回多长时间。 Ajax类的错误处理功能应处理服务器中的错误，因此我们的脚本不应返回其他任何内容……尽管确保确保！ >一旦计算出响应时间，Showpoll记录了使用UpdatePollarray的响应时间，然后将结果显示为Printresult。我们将在下一部分中查看这两种方法。> 最后，我们安排了Dopolldelay中的另一项民意调查 - 一种非常简单的方法，一旦轮询间隔通过： 要检查到这一点的进度，我们需要添加一些存根方法。首先，让我们在状态类中添加startproc和stopproc：<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> >我们还为显示器类添加一些存根方法：<ancy>> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } >现在我们准备好测试我们的进度了。在您的Web浏览器中打开AppMonitor2.html，单击“启动”，然后等待Fakeserver.php从睡眠中醒来，然后将OK送回您的页面。 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };>您可以期待两个结果之一：您的页面收到响应，并且您看到与图3.3中显示的对话框相似，或者您看到图3.4。 图3.3。您的Ajax应用程序收到的响应<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030396431.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > >如果收到图3.4中显示的超时消息，请不要担心。请记住，在我们的Ajax应用程序中，我们的超时门槛目前设置为十秒钟，而Fakeserver.php当前正在睡觉，以随机选择的秒数在三到12之间。 图3.4。您的Ajax应用程序放弃希望 目前，我们尚未实施停止投票的方法，因此您需要通过重新加载页面或关闭浏览器窗口来阻止它。<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030425859.png" class="lazy" alt="构建您自己的Ajax Web应用程序" >> 处理超时 >如果您运行了到目前为止我们编写的代码，您可能已经注意到，即使报告了超时，您也会看到一条消息，此后不久就报告了请求的响应时间。发生这种情况是因为Handletimeout目前不过是一个简单的存根。让我们看一下该存根的构建，这样我们就不会得到这种副作用。><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); >在这里，Handletimeout调用stoppoll以停止我们的应用程序进行轮询服务器。它记录了发生超时，更新用户界面，并最终通过dopolldelay设置了另一个呼叫。我们将停止投票的代码移动到单独的功能中，因为我们需要在以后重新审视并将其加油。目前，StopPoll方法仅通过AJAX类的中止方法中止HTTP请求。但是，有一些情况无法处理此功能。稍后，我们将在创建完整的代码以停止投票过程时解决这些问题，但是为了处理超时的目的，stoppoll很好。> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 现在，当我们重新加载应用程序时，超时的表现完全按照我们的期望。响应时间栏图<h5> 现在，到新版本的监视应用程序的肉！我们希望该应用程序显示过去的响应时间列表，而不仅仅是最近的响应时间，我们希望以快速易于阅读的方式显示该列表。运行的条形图显示是工作的理想工具。 Pollarray中的运行列表 >所有响应时间都将进入一个存储在监视器类的Pollarrare属性中的数组。我们将使用直觉命名的UpdatePollarray方法保持此数组的更新。这是一个看起来像这样的非常简单的方法：> <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };代码非常简单，尽管我们在其中使用的某些功能具有略有混乱的名称。数组对象的解开方法将新项目放在数组的第一个元素中，并将数组内容的其余部分移到一个位置，如图3.5。 图3.5。使用unshift <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030523677.png" class="lazy" alt="构建您自己的Ajax Web应用程序" >插入水果当数组超过用户定义的最大长度时，updatePollarray会通过“弹出”一个项目来截断它。这是通过POP方法实现的，POP方法只是删除了数组的最后一项。 (Note that the method name pop may seem quite odd, but it makes more sense once you understand a data structure called a stack, which stores a number of items that can be accessed only in the reverse of the order in which they were added to the stack. We “push” an item onto a stack to add it, and “pop” an item from a stack to retrieve it. The pop method was originally designed for developers who were using arrays as stacks, but here we’ve repurposed it simply to删除数组中的最后一个项目。）我们之所以将项目附加到顶部并从阵列底部删除项目的原因是，在我们的显示屏中，我们希望最新的条目出现在顶部，而较旧的条目则逐渐向下移动到底部。 显示结果>我们在Pollarray中更新了结果后，我们可以使用Printresult方法显示它们。这实际上是很酷的部分：用户将亲身体验我们的AJAX应用程序和一个旧式应用程序之间的区别，该应用需要整个页面刷新才能更新内容。 >渲染页面partials 在Ajax术语中，保存响应时间列表的页面的块称为页面部分。这是指网页的一个区域，该页面与该页面的其余部分分开更新。> >对服务器的异步请求更新网页的一部分称为“渲染页面部分”。 printresult方法通过Pollarray迭代，并使用DOM方法绘制DIV内部使用ID PollResults的coll结果列表。我们将首先将DIV添加到我们的标记中： 现在，我们已经准备好使用Printresult方法了： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } >这里有很多，所以让我们逐步查看此方法。<ancon>> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();初始化了一些变量后，此方法将删除Polldiv的所有内容：while loop反复使用removechild从polldiv中删除所有子节点。> 接下来是一个简单的循环，它跳过了更新的结果并显示它们。<ancy>> 我们为此数组中的每个项目的结果生成一条消息。如下所示，超时（记录为0）会生成（超时）消息。<pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; } 接下来，我们使用DOM方法动态添加列表中每个条目的标记。实际上，我们在列表中的每个条目中在JavaScript中构造以下HTML：<ancy> bar div的宽度变化以反映实际响应时间，并且超时以红色显示，但否则此列表中的所有条目都是相同的。请注意，您必须在DIV中放置一些东西才能使其背景颜色显示。即使您给Div一个固定宽度，背景颜色也不会显示DIV是否为空。这很烦人，但很容易解决：我们可以用非破坏空间特征填充Div。 >让我们看一下我们将用来插入此标记的代码：<ancon>> <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; }; 如果您从未使用过DOM操纵功能，则此代码似乎很复杂，但确实很简单。我们使用命名良好的创建方法来创建元素；然后，我们将值分配给每个元素对象的属性。> 在if语句之后，我们可以根据为生成每个响应所需的秒数来查看设置bar div的像素宽度的代码。我们将这个时间数乘以20，以获得合理的宽度，但是您可能需要使用更高或更低的数字，具体取决于页面上的水平空间。> <pre class="brush:php;toolbar:false">Example 2.3. ajax.js (excerpt) this.doReq = function() { if (!this.init()) { alert('Could not create XMLHttpRequest object.'); return; } };>要将文本添加到元素中，我们将createTextNode与附录一起使用，附录也用于将元素放置在其他元素中。<ancy>>createTextNode和非破坏空间 在上面的代码中，我们使用U00A0创建一个非破坏空间。如果我们尝试使用普通＆nbsp;实体在这里，createTextNode将尝试通过将anmpersand转换为＆amp;;;结果是＆nbsp;显示在您的页面上。解决方法是使用逃逸的Unicode非破坏空间：U00A0。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030681400.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 图3.6。该应用程序开始形状 >代码的最后一部分将所有的div元素放在一起，然后将Pollresult Div放置在Pollresults Div中。图3.6显示了运行应用程序。 “一秒钟”，您可能会在想。 “我们应该看到的条形图在哪里？”> >第一个酒吧在那里，但用白色显示为白色，这是没有用的。让我们通过应用程序的CSS使其可见： CSS中兴趣的主要点是浮点：时间和条形分配元素的左声明，构成了时间列表的时间列表和彩色条形图中的彩色条。将它们漂浮在左边是使它们并排出现的原因。但是，要使这种定位技术起作用，必须在这两个divs之后立即出现一个带有Clearboth类的元素。<pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }。 这是您可以在这里看到Ajax的地方。它使用所有这些不同技术的位 - XMLHTTPREQUEST，W3C DOM和CSS - 与JavaScript一起连接并控制。程序员通常会遇到CSS最大的问题，以及在其代码中构建接口元素的实用性。> 作为AJAX程序员，您可以尝试依靠库来为您照顾CSS，或者您可以学习足够的学习来完成工作。很高兴认识一个聪明的人，他很乐意回答有关该主题的很多问题，或者在CSS上有一本好书（例如，SitePoint's CSS选集：101基本技巧，技巧和hacks）。 图3.7。条形图的开始 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030772414.png" class="lazy" alt="构建您自己的Ajax Web应用程序" >现在我们的CSS已经到位，我们可以在应用程序显示中看到条形图，如图3.7所示。 >停止应用程序 > PollserverStart方法的最终操作在运行应用程序后，致电ToggleaPpstatus切换应用程序的外观。 toggleappstatus将状态显示更改为应用状态：运行，将开始按钮切换到停止按钮，然后将PollserverStop方法连接到按钮的OnClick事件。 pollserverStop方法停止了正在进行的轮询过程，然后将应用程序重新切换，以使其看起来正确停止：<ancy>><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此代码重复了我们本章前面添加的stoppoll方法。目前，该方法所做的就是中止当前的HTTP请求，这在我们处理超时时很好。但是，此方法还需要处理其他两个方案。 >这些方案中的第一个发生在轮询间隔期间调用该方法时（即，在我们收到对HTTP请求的响应之后，但在发送下一个请求之前）。在这种情况下，我们需要取消对Dopoll的延迟调用。> >第二种方法必须能够处理的第二种情况，当停止发送请求后，但在收到响应之前，就会出现。在这种情况下，需要取消超时处理程序。> 当我们跟踪两个呼叫的间隔ID时，我们可以通过两个呼叫来修改stoppoll以处理这些方案： <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 现在，您应该可以通过单击条形图下的开始/停止按钮来停止并启动投票过程。 <h5>>状态通知 Ajax异步更新内容的能力以及更新可能仅影响页面的小区域的事实，使状态通知的显示成为Ajax应用程序设计和开发的关键部分。毕竟，您的应用程序的用户需要知道该应用程序在做什么。> 在Web开发的过去，当整个页面必须重新加载以反映其内容的任何更改时，当应用程序与服务器通信时，最终用户非常清楚。但是我们的Ajax Web应用程序可以在后台与服务器交谈，这意味着用户看不到完整的页面重新加载，否则会表明正在发生某些事情。 >那么，您的Ajax应用程序的用户将如何知道该页面正在与服务器进行通信？好吧，Ajax应用程序通常会通知用户，借助小动画或视觉过渡，而不是在浏览器Chrome中显示的旧旋转地球仪或挥舞着标志动画。这些过渡通常会通过CSS实现，吸引了用户的眼睛，而不会分散注意力！ - 并提供有关应用程序正在做什么的提示。良好的Ajax应用程序设计的一个重要方面是开发此类通知。 状态动画 >由于我们已经在应用程序的顶部已经有一个小栏，该栏告诉用户应用程序是否正在运行还是停止，因此这是一个相当合乎逻辑的地方，可以显示更多状态信息。>旋转球或跑步狗等动画是一种表明应用程序忙碌的好方法 - 通常，您需要显示使用运动来指示活动的图像。但是，我们不想使用一种提示，该提示将吸引用户的注意力，或者在他们试图阅读结果时使人们分心，因此我们只需使用图3.8所示的缓慢而脉动的动画。这个动画具有轻巧且易于在CSS中实现的额外优点 - 不需要Flash播放器，也没有笨重的GIF图像可以通过乏味的框架下载。 >白色条的极右侧是未使用的空间，这使其成为此类通知的理想场所：它位于用户界面的顶部，因此很容易看到，但它是正确的，因此它是试图阅读结果列表的人们的方式。 图3.8。我们的脉动状态动画<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145030949774.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 为了托管此动画，我们将在我们的文档中的状态消息div下方添加一个Div，并在我们的文档中添加一个div：> >将CSS规则添加到您的样式表中以定位此Div：<ancy> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }现在，此动画位于页面的右侧。> >当您在浏览器中打开页面时，您将看不到动画 - 目前，它不过是白色背景上的白色盒子。如果您愿意，请在民意调查中添加一些内容，以查看其位置。<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();> setInterval和范围的损失 javascript setInterval是一种重复发生任务的明显且简单的方法 - 例如，控制脉冲动画。 >所有带有setInterval的CSS回旋产生了一些相当有趣且笨重的代码。因此，正如我之前提到的那样，将状态动画的代码放入其自己的类（状态）是有意义的，我们可以从监视器类中参考和使用。 >一些聪明的开发人员阅读此内容可能已经猜测，SetInterval遭受了与Settimeout相同的损失问题：对象关键字将丢失。由于我们只需要在监视应用程序中处理一个状态动画，因此采用优势的方法并将我们的状态类成为单身班类是有意义的，就像我们在监视类中所做的那样。 设置状态 开始，让我们从已经编写的状态存根中添加一些属性，以使以前的代码工作：<ancy>> 状态对象具有四个属性： <ul> <li> Curropacity属性跟踪了PollingMessage Div的不透明度。我们使用setInterval迅速改变该div的不透明度，从而产生脉冲和褪色效果。> <li>PROC属性是一个三州开关，指示当前正在进行HTTP请求，已成功完成或在完成之前流产。> <li>procinterval属性用于存储控制动画的setInterval进程的间隔ID。我们将使用它来停止运行动画。 <li>> DIV属性是对PollingMessage Div的引用。状态类操纵pollingmessage div的css属性以创建动画。 初始化 需要一种初始方法将DIV属性绑定到轮询范围：<ancemessage：<ancy>> <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }INIT方法还包含对名为Setalpha的方法的调用，这是IE解决方法所必需的，我们将稍后再查看。> Internet Explorer内存泄漏 > dom元素引用（将用作类属性的变量指向Div，TD或跨度元素等）是Internet Explorer中内存泄漏的臭名昭著的原因。如果您在不清除此类属性的情况下销毁了类的实例（通过将其设置为空），则不会回收内存。> >让我们添加到我们的监视器类清理方法，该方法处理窗口。 此方法通过调用该类的清理方法清理状态类，并将ReqStatus属性设置为null：<anuld> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 状态类中的清理方法进行IE管家：<anconekeving> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }如果我们不将DIV引用到NULL，则Internet Explorer将将其保留在死亡握把中的该变量中，并且每次重新加载页面时都会看到记忆使用气球。> 实际上，对于我们的微小应用来说，这不是很多问题，但是在具有很多DHTML的大型Web应用程序中，这可能会成为一个严重的问题。养成清理代码中的DOM参考的习惯是一件好事，这样就不会成为您的问题。<pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };> displayOpacity方法 >状态类中的代码中心段生活在显示屏方法中。这包含更改PollingMessage Div的适当CSS属性所需的浏览器特定代码。这是代码： 对象的cropacity属性代表应设置轮询div的不透明度。我们的实现使用了一个从0到100的整数量表，这是由Internet Explorer使用的，而不是Mozilla和Safari预期的分数量表。这种选择只是个人偏爱。如果您希望使用分数值，则一定要做。>在方法中，您会看到文档的测试。所有内容 - 仅由IE和Opera支持的属性 - 以及Window.opera的测试，毫不奇怪，仅由Opera支持。因此，只有IE才能执行此IF语句的IF子句。在此IF语句的IE分支中，专有alpha.opacity属性用于设置不透明度，而在其他条款中，我们使用了较旧的Mozopacity属性，该属性由较旧的基于Mozilla的浏览器支持。 >最后，此方法以符合标准的方式设置了不透明度：使用不透明度属性，最终应在所有符合标准的浏览器中支持。> ie gotchas > Internet Explorer版本6，是一个较旧的浏览器，在试图呈现基于不透明度的CSS更改时会遇到一些问题。幸运的是，第一个很容易通过我们的PollingMessage CSS规则来解决：<ancy>> 添加背景属性将Internet Explorer解决了第一个特定问题。如果要在IE中更改其不透明度，则必须设置元素的背景颜色，否则文本将使用锯齿状边缘显示。请注意，将背景设置为透明是不起作用的：必须将其设置为特定的颜色。<ancy>> 如果您希望CSS文件有效，则第二个问题有些棘手。即，除非首先在样式表中声明，否则不会让您更改style.alpha.alpha。现在，如果您不介意阻止W3C验证器通过样式表，则可以通过添加另一个声明来解决此问题：： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 不幸的是，这种方法在不支持专有属性的浏览器中生成CSS警告，例如Firefox 1.5，该属性默认情况下在JavaScript控制台中显示CSS警告。一种比将IE特定样式信息插入您的全局样式表更好的解决方案是使用JavaScript将声明添加到仅在IE中的PollingMessage Div的样式属性中。这就是Init中所谓的Setalpha方法。这是该方法的代码： 此代码仅在Internet Explorer中执行，它使用文档。StylesHeets数组通过链接到当前页面的每个样式表进行迭代。它使用规则属性访问每个样式表中的规则，并通过查看SelectOrtext属性找到我们想要的样式。一旦它在规则数组中具有正确的样式，它就会为过滤器属性提供更改不透明度所需的值。 Opera？<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();<> 中的不透明度不幸的是，在撰写本文时，即使是最新版本的Opera（版本8.5）也不支持CSS不透明度，因此这种动画在该浏览器中不起作用。但是，该功能计划为Opera版本9。<ancy>> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }运行动画处理动画的代码由五种方法组成：前三个控制“处理……”动画，而其余两个控制“完成”动画。控制“处理……”动画的三种方法是：> <ul> <li>startProc，它设置了“处理……”动画，并计划使用setInterval 重复调用DoProc <li>> doproc，它监视此类的属性，并设置“处理……”动画的当前框架。 stopproc，这表明“处理……”动画应停止 <li> 控制“完成”动画的两个是：> startdone设置了“完成”动画，并计划使用SetInterval <ul>重复调用Dodone <li>> dodone设置了“完成”动画的当前帧，并在完成>后终止动画 <li> 启动它 >设置动画并开始启动是startproc方法的作业：<ancy>> >将PROC属性设置为PROC（处理）后，该代码调用SetDisplay方法，该方法设置了PollingMessage Div的颜色和内容。接下来，我们将仔细研究setDisplay。 <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; }>一旦代码设置了轮询div的颜色和内容，它将Div的不透明度对100（完全不透明）进行初始化，并调用DisplayOpacity以使此设置生效。<ancy>> >最后，此方法调用setInterval以安排动画过程的下一步。请注意，与SettiMeout一样，SetInterval调用返回一个间隔ID。我们将其存储在ProcInterval属性中，以便稍后停止该过程。> “处理……”和“完成”动画共享setDisplay方法： >由于“处理……”和“完成”状态之间的唯一差异是其颜色和文本，因此使用此通用功能在PollingMessage Div的两个状态之间切换是有意义的。颜色是通过将类分配给PollingMessage Div来控制的，因此我们需要将完成的CSS类规则添加到我们的样式表中：> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage();使其停止 平稳地停止动画需要一些特定的时间。我们不希望动画在脉搏中间突然停止。当“处理……”图像的不透明度下降到零时，我们想在自然中间停止它。<ancy>> <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }>因此，停止动画的停止方法本身并不能阻止它 - 它只是设置一个标志来告诉动画过程，该在达到方便点时停止了。这很像妻子和丈夫在一天结束时收到的许多程序员接到的电话，提醒他们在代码中的逻辑停止点时回家。> >由于这里几乎没有动作，因此该方法很短：<ancy>><pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 此方法确实必须区分两种类型的停止类型：成功完成的请求（完成）和用户的请求以停止应用程序（APORT）。 > doproc方法使用此标志来弄清楚是显示“完成”消息，还是只是停止。 >用doproc 运行动画以90毫秒的间隔调用的DoProc方法会改变PollingMessage Div的不透明度，从而产生加工动画的脉冲效果。这是代码： 这种方法很简单 - 它的主要目的只是每次称为民意调查的不透明性10％。<pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); 第一个if语句希望查看DIV是否已完全消失。如果有，动画仍应该运行，它将不透明度重置为100（完全不透明）。每90毫秒执行此代码每90毫秒会产生平稳的效果，在这种效果中，民意测验划分逐渐消失，重新出现并逐渐消失 - 熟悉的脉冲效果表明该应用程序忙于做某事。如果不应该继续运行动画，我们通过调用Clear Interval来停止动画，然后，如果Proc属性完成了，我们将触发“完成”动画，并用呼叫启动启动。 >使用StartDone 启动“完成”动画 启动方法对于“完成”动画的目的具有相同的目的，而startproc方法用于“处理……”动画。它看起来也与startproc非常相似：> 这次，我们将try to to setDisplay传递给，它将将文本更改为“完成”，将颜色更改为绿色。> 然后，我们用SetInterval设置了对Dodone的呼叫，这实际上执行了vadeout。 <pre class="brush:php;toolbar:false">Example 2.1. ajax.js (excerpt) function Ajax() { this.req = null; this.url = null; this.method = 'GET'; this.async = true; this.status = null; this.statusText = ''; this.postData = null; this.readyState = null; this.responseText = null; this.responseXML = null; this.handleResp = null; this.responseFormat = 'text', // 'text', 'xml', or 'object' this.mimeType = null; }最终淡出 Dodone的代码明显比DoProc的代码要简单得多。它不必像DoProc一样连续处理，直到被告知停止。它只是继续将投票情绪Div的不透明度降低10％，直到达到零，然后停止自身。非常简单的东西： 图3.9。具有脉冲状态指标的应用 <pre class="brush:php;toolbar:false">Example 2.2. ajax.js (excerpt) this.init = function() { if (!this.req) { try { // Try to create object for Firefox, Safari, IE7, etc. this.req = new XMLHttpRequest(); } catch (e) { try { // Try to create object for later versions of IE. this.req = new ActiveXObject('MSXML2.XMLHTTP'); } catch (e) { try { // Try to create object for early versions of IE. this.req = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { // Could not create an XMLHttpRequest object. return false; } } } } return this.req; };>最后，我们准备在浏览器中测试此代码。在浏览器中打开AppMonitor2.html，单击“开始”按钮，您应该看到一个脉冲处理……浏览器视口右上角附近的消息，如图3.9所示。 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145031028504.png" class="lazy" alt="构建您自己的Ajax Web应用程序" > 小心的轮询间隔！> >现在，我们已经在页面上运行了一个动画，我们需要小心，以免在上一个停止之前再次启动动画。因此，强烈建议您不要将poll_interval设置为少于两秒钟的任何东西。<h5>造型监视器 >现在我们已经启动并运行了应用程序，让我们使用CSS使其看起来不错。我们需要添加以下标记以实现我们所需的布局： <pre class="brush:php;toolbar:false">function HelloWorld() { this.message = 'Hello, world!'; this.sayMessage = function() { window.alert(this.message); }; } 如您所见，我们添加了三个Divs，可以从中悬挂样式，并有一段折断的线路，以清除浮动的应用程序状态消息和动画。此页面完整的CSS如下；样式界面如图3.10：<ancy> <pre class="brush:php;toolbar:false">var hw = new HelloWorld(); hw.sayMessage(); hw.message = 'Goodbye'; hw.sayMessage(); <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174145029861987.png" class="lazy" alt="构建您自己的Ajax Web应用程序" >图3.10。已完成的应用程序显示 摘要 >我们的第一个工作应用程序展示了如何使用Ajax向服务器提出多个请求，而无需用户离开当前加载页面。它还给出了相当现实的图片，说明我们在执行多个任务时必须处理的复杂性。这个复杂性的一个很好的例子是我们使用SettiMeout来计算XMLHTTPREQUEST请求。这个示例提供了一个很好的机会，可以在开发AJAX应用程序时探索您将遇到的一些常见问题，例如范围和连接超时的丢失，并提供了实用的解决方案来帮助您处理它们。 >这就是本摘录的<h5>>构建自己的Ajax Web应用程序 - 别忘了，您可以以.pdf格式下载本文。这本书总共有八个章节，到最后，读者将构建许多功能齐全的网络应用程序，包括在线国际象棋游戏，多个玩家可以实时玩，这本书的目录具有完整的详细信息。 >常见问题（常见问题解答）有关构建Ajax Web应用程序<ancy> > Web开发中AJAX的关键组成部分是什么？ajax（代表异步JavaScript和XML）是一组Web开发技术，它允许网页可以更新和检索服务器中的数据和检索数据，而无需干扰现有页面的显示和行为。 AJAX的关键组成部分包括用于呈现信息的HTML（或XHTML）和CSS，用于动态显示和与数据相互作用的文档对象模型（DOM），用于携带数据的XML，用于操纵数据的XSLT，用于操纵数据的XSLT，XMLHTTTPREQUEST对象的XMLHTTPREQUEST对象，以使这些方法<这些方法<<这些技术<网站上的用户体验？<h2 >ajax通过使网站更加响应和互动来改善用户体验。它允许网页在后台与服务器通信，而无需为每个请求重新加载。这意味着在服务器正在处理请求时，用户可以继续与网页进行交互，从而导致更流畅，更无缝的用户体验。><h3 >> xmlhttprequest对象在ajax中的作用是什么？它提供了一种使用服务器交换数据并更新网页的部分的方法，而无需重新加载整个页面。它用于将HTTP或HTTPS请求直接发送到Web服务器，并将服务器响应数据直接加载到脚本中。<>> AJAX可以使用XML的技术以外的其他技术？尤其是JSON在Ajax中经常使用，因为它易于在JavaScript中使用，并且比XML更有效。><h3 >>在Web开发中AJAX的某些常见用途是什么？这包括诸如实时搜索结果，自动完成表单字段，交互式映射和动态内容更新之类的应用程序。社交媒体供稿，电子邮件客户端和电子商务网站经常使用AJAX提供流畅且交互式的用户体验。>>使用Ajax？<h3 > 有哪些潜在的缺点或挑战，而Ajax可以极大地增强用户体验，并且具有潜在的缺点。其中包括浏览器兼容性的问题，调试和测试的困难以及搜索引擎优化（SEO）的挑战，因为搜索引擎可能难以为Ajax内容进行索引。此外，由于Ajax依赖于JavaScript，因此在浏览器中禁用JavaScript的用户将无法使用基于AJAX的功能。<h3 >>>我如何确保我的AJAX应用程序可访问并且SEO友好友好且易于访问？这意味着使用HTML构建您的核心网页，然后使用AJAX功能对启用JavaScript的用户进行AJAX功能。对于SEO，请考虑使用服务器端渲染来为搜索引擎提供完整的页面，同时仍为用户提供快速的，AJAX驱动的体验。>> AJAX如何处理数据安全性？<h3 ><h3 >ajax应用程序以与其他任何Web应用程序相同的方式处理数据安全性。在处理所有数据之前，对所有数据进行验证和消毒很重要，并使用安全的方法来传输数据，例如HTTPS。此外，由于Ajax可以将您的应用程序的内部运行揭示到客户端，因此确保在服务器端受到保护敏感操作很重要。> <h3 >我可以将Ajax与acept或Angular？ 等框架进行AJAX一起使用，可以与Ajax一起使用Ajax，可以与JavaScript Frameworks一起使用。这些框架通常提供自己的抽象来提出AJAX请求，但是您也可以使用本机XMLHTTPRequest对象或其他库（如jQuery或axios）。><h3 >>我如何调试Ajax应用程序？ <🎜>由于AJAX的异步性质，因此比调试传统的Web应用程序更为复杂。但是，大多数现代浏览器都提供开发人员工具，使您可以检查AJAX请求和响应，监视网络活动并逐步介绍JavaScript代码。此外，许多JavaScript库和框架还提供了处理AJAX错误和异常的工具和方法。</script>

以上是构建您自己的Ajax Web应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jQuery Insert alphabetically into a List下一篇：Learn to Code With JavaScript: Part 1, The Basics

查看更多