ajax简介_Ajax简介-优快云博客

编者注：在撰写本文中的信息时，它是最新的，但是在最近几年中，这项技术已发生了变化。如果您对最新信息感兴趣，请参阅Ajax简介。

五年前，如果您不了解XML，那么您就是丑陋的小鸭子，没有人与之交谈。 18个月前，Ruby成为众人瞩目的焦点，那些不知道Ruby发生了什么的程序员在水冷却器中不受欢迎。今天，如果您想了解最新的技术风潮，Ajax就是您的理想之选。

但是，Ajax远远不只是一种时尚。这是一种构建网站的有效方法，并且学习起来几乎不像一种全新的语言那么难。

不过，在深入研究Ajax是什么之前，让我们花一些时间来了解Ajax的功能。今天编写应用程序时，有两个基本选择：

桌面应用
网络应用

这些都是熟悉的。桌面应用程序通常位于CD上（或有时从网站下载），并完全安装在计算机上。他们可能使用Internet下载更新，但是运行这些应用程序的代码位于您的桌面上。 Web应用程序-在这里并不奇怪-在某处的Web服务器上运行，您可以使用Web浏览器访问该应用程序。

但是，与这些应用程序的代码在何处运行相比，最重要的是应用程序的行为方式以及与它们的交互方式。桌面应用程序通常运行速度非常快（它们正在您的计算机上运行；您无需等待Internet连接），具有出色的用户界面（通常与操作系统进行交互），并且动态非常好。您可以单击，指向，键入，拉出菜单和子菜单，并进行浏览，而几乎无需等待。

另一方面，Web应用程序通常是最新的，它们提供的服务是您台式机上永远无法获得的（想想Amazon.com和eBay）。但是，随着Web的强大而来-等待服务器响应，等待屏幕刷新，等待请求返回并生成新页面。

显然，这有点过分简化，但是您已经掌握了基本思想。您可能已经怀疑过，Ajax试图弥合桌面应用程序和始终更新的Web应用程序的功能和交互性之间的鸿沟。您可以像在桌面应用程序上那样使用动态用户界面和更高级的控件，但在Web应用程序上可以使用它们。

那你还在等什么？开始研究Ajax，以及如何将笨拙的Web界面变成响应性Ajax应用程序。

旧技术，新技巧

当涉及到Ajax时，现实是它涉及很多技术-为了超越基础知识，您需要深入研究几种不同的技术（这就是为什么我将在本系列的前几篇文章中进行拆分）每个）。好消息是，您可能已经对其中的许多技术有所了解-更好的是，大多数这些单独的技术都很容易学习-肯定没有像Java或Ruby这样的完整编程语言那么难。

Ajax定义

顺便说一下，Ajax是异步JavaScript和XML（以及DHTML等）的简写。该词是由Adaptive Path的Jesse James Garrett创造的，根据Jesse的说法，它并不是首字母缩写。

以下是Ajax应用程序涉及的基本技术：

HTML用于构建Web表单并标识在应用程序的其余部分中使用的字段。
JavaScript代码是运行Ajax应用程序的核心代码，它有助于促进与服务器应用程序的通信。
DHTML或动态HTML可帮助您动态更新表单。您将使用div ， span和其他动态HTML元素标记HTML。
DOM（文档对象模型）将（通过JavaScript代码）用于处理HTML的结构和服务器返回的XML（在某些情况下）。

让我们分解这些内容，更好地了解每个功能。在以后的文章中，我将进一步研究这些内容。现在专注于熟悉这些组件和技术。您对这段代码越熟悉，就越容易从对这些技术的熟悉知识过渡到掌握每种技术（并确实为Web应用程序开发扫清了障碍）。

XMLHttpRequest对象

您要了解的第一个对象可能是对您而言最新的对象。它称为XMLHttpRequest 。这是一个JavaScript对象，其创建如清单1所示。

清单1.创建一个新的XMLHttpRequest对象

<script language="javascript"
                type="text/javascript"> var xmlHttp = new XMLHttpRequest(); </script>

在下一篇文章中，我将进一步讨论该对象，但现在您将意识到，这是处理所有服务器通信的对象。在继续之前，请停下来考虑一下-通过XMLHttpRequest对象与服务器通信的JavaScript技术。那不是正常的应用程序流程，而是Ajax获得很多魔力的地方。

在普通的Web应用程序中，用户填写表单字段，然后单击“ 提交”按钮。然后，将整个表单发送到服务器，服务器将处理继续传递到脚本（通常是PHP或Java或CGI进程或类似的东西），并且在脚本完成后，它将发送回一个全新的页面。该页面可能是带有新表单HTML，其中填充了一些数据，也可能是确认页面，或者是根据原始表单中输入的数据选择了某些选项的页面。当然，当服务器上的脚本或程序正在处理并返回新表单时，用户必须等待。他们的屏幕将变成空白，然后随着数据从服务器返回而重新绘制。这是低交互性发挥作用的地方-用户不会获得即时反馈，他们肯定不会觉得自己正在使用桌面应用程序。

阿贾克斯基本上把JavaScript技术和XMLHttpRequest对象在Web表单和服务器之间。用户填写表单时，该数据将发送到一些JavaScript代码，而不是直接发送到服务器。相反，JavaScript代码获取表单数据并将请求发送到服务器。发生这种情况时，用户屏幕上的表单不会闪烁，闪烁，消失或停止。换句话说，JavaScript代码在后台发送请求。用户甚至没有意识到正在发出请求。更好的是，请求是异步发送的，这意味着您JavaScript代码（和用户）不会在服务器上等待响应。因此，用户可以继续输入数据，滚动和使用该应用程序。

然后，服务器将数据发送回您JavaScript代码（仍然代表Web表单），该JavaScript代码决定如何处理该数据。它可以即时更新表单字段，使您的应用程序立即具有感觉-用户在获取新数据而无需提交或刷新其表单。 JavaScript代码甚至可以获取数据，执行一些计算并发送另一个请求，而无需用户干预！这就是XMLHttpRequest 。它可以与服务器所需的来回通信，而无需用户知道实际发生的情况。结果是一种动态，响应式，高度交互的体验，就像桌面应用程序一样，但是却具有Internet的所有功能。

添加一些JavaScript

一旦获得XMLHttpRequest的句柄，剩下JavaScript代码就会变得相当平凡。实际上，您仅将JavaScript代码用于一些基本任务：

获取表单数据：JavaScript代码使从HTML表单中提取数据并将其发送到服务器变得很简单。
更改表单上的值：从设置字段值到即时替换图像，更新表单也很简单。
解析HTML和XML：您将使用JavaScript代码来操作DOM（请参阅下一节），并使用HTML表单的结构和服务器返回的任何XML数据。

对于前两个项目，您希望非常熟悉getElementById()方法，如清单2所示。

清单2.使用JavaScript代码获取和设置字段值

// Get the value of the "phone"
                field and stuff it in a variable called phone var phone =
                document.getElementById("phone").value; // Set some values on a form using an array
                called response document.getElementById("order").value = response[0];
                document.getElementById("address").value = response[1];

这里没有什么特别显着的，这很好！您应该开始意识到，这没有什么复杂的问题。掌握XMLHttpRequest ，您的Ajax应用程序的其余大部分将是清单2所示的简单JavaScript代码，并结合了一些巧妙HTML。然后，偶尔会有一点DOM工作...所以让我们来看一下。

结束DOM

最后但并非最不重要的一点是DOM，即文档对象模型。对于你们中的某些人来说，听到有关DOM的消息会有些令人生畏-HTML设计师并不经常使用它，对于JavaScript编码人员来说甚至不寻常，除非您真正从事某些高端编程任务。在重型Java和C / C ++程序中，您会发现大量使用DOM的地方。实际上，这可能是DOM因难以学习或难以学习而获得声誉的地方。

幸运的是，在JavaScript技术中使用DOM很容易，而且大多是直观的。在这一点上，我通常会向您展示如何使用DOM或至少为您提供一些代码示例，但是即使那样也会引起误解。您会看到，您无需涉足DOM就可以深入Ajax，这就是我要向您展示的路径。在以后的文章中，我将回到DOM，但是现在，仅知道它已经存在。当您开始在JavaScript代码和服务器之间来回发送XML并真正更改HTML格式时，您将深入探讨DOM。现在，不使用它就很容易获得一些有效的Ajax，因此暂时将其放在后面。

获取请求对象

有了基本的概述，您就可以准备一些细节。由于XMLHttpRequest是Ajax应用程序的核心-也许对你们许多人来说都是新的-我将从这里开始。如清单1所示，创建并使用该对象应该很容易，对吗？等一下。

还记得几年前的那些令人讨厌的浏览器大战，以及各浏览器之间没有什么共同作用吗？好吧，不管您信不信，这些战争仍在继续，尽管规模要小得多。而且，令人惊讶的是： XMLHttpRequest是这场战争的受害者之一。因此，您需要做一些不同的事情来使XMLHttpRequest对象运行。我将逐步指导您。

使用Microsoft浏览器

微软浏览器Internet Explorer，用来处理XML的MSXML分析器（你可以找到更多关于MSXML的相关主题）。因此，当您编写需要在Internet Explorer上运行的Ajax应用程序时，需要以特定的方式创建对象。

但是，这并不容易。 MSXML实际上有两个不同的版本，具体取决于Internet Explorer中安装JavaScript技术的版本，因此您必须编写处理这两种情况的代码。在清单3中查看在Microsoft浏览器上创建XMLHttpRequest所需的代码。

清单3.在Microsoft浏览器上创建一个XMLHttpRequest对象

var xmlHttp =
                false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; }
                }

所有这些还没有确切的意义，但是没关系。在本系列结束之前，您将深入研究JavaScript编程，错误处理，条件编译等。现在，您希望掌握两条核心路线：

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

和

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 。

简而言之，此代码尝试使用一种版本的MSXML创建对象。如果失败，则使用其他版本创建对象。好吧如果以上两种方法都不起作用，则将xmlHttp变量设置为false，以告诉您的代码某些操作无效。如果是这种情况，则可能是您使用了非Microsoft浏览器，并且需要使用其他代码来完成这项工作。

处理Mozilla和非Microsoft浏览器

如果Internet Explorer不是您选择的浏览器，或者您为非Microsoft浏览器编写代码，则需要其他代码。实际上，这是清单1中看到的非常简单的代码行：

var xmlHttp = new XMLHttpRequest object; 。

这一简单得多的行在Mozilla，Firefox，Safari，Opera以及几乎所有其他以任何形式或方式支持Ajax的非Microsoft浏览器中创建XMLHttpRequest对象。

把它放在一起

关键是要支持所有浏览器。谁想编写仅在Internet Explorer上运行的应用程序或仅在非Microsoft浏览器上运行的应用程序？更糟糕的是，您是否要编写两次应用程序？当然不是！因此，您的代码结合了对Internet Explorer和非Microsoft浏览器的支持。清单4显示了执行此操作的代码。

清单4.以多浏览器方式创建XMLHttpRequest对象

/* Create a new
                XMLHttpRequest object to talk to the Web server */ var xmlHttp = false; /*@cc_on @*/
                /*@if (@_jscript_version >= 5) try { xmlHttp = new
                ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new
                ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } @end @*/ if
                (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new
                XMLHttpRequest(); }

现在，忽略@cc_on类的注释和怪异标签；这些是特殊JavaScript编译器命令，您将在我的下一篇文章中深入探讨，该文章将专门讨论XMLHttpRequest 。该代码的核心分为三个步骤：

创建一个变量xmlHttp ，以引用您将创建的XMLHttpRequest对象。
尝试在Microsoft浏览器中创建对象：
- 尝试使用Msxml2.XMLHTTP对象创建对象。
- 如果失败，请尝试使用Microsoft.XMLHTTP对象创建对象。
如果仍未设置xmlHttp非Microsoft方式创建对象。

在此过程结束时，无论用户运行哪种浏览器， xmlHttp均应引用有效的XMLHttpRequest对象。

关于安全的一句话

那么安全性呢？如今的浏览器为用户提供了提高其安全级别，关闭JavaScript技术以及禁用其浏览器中任何数量的选项的能力。在这些情况下，您的代码在任何情况下均可能无法正常工作。在这种情况下，您将不得不优雅地处理问题-本身至少是一篇文章，稍后我会解决（这将是一个较长的系列，是吗？不用担心；您会精通在您完成之前，所有这些）。现在，您正在编写健壮但不完美的代码，这对于在Ajax上获得帮助非常有用。您将返回更详细的信息。

Ajax世界中的请求/响应

因此，您现在已经了解了Ajax，并对XMLHttpRequest对象以及如何创建它有了一个基本的了解。如果您仔细阅读，您甚至会意识到，与服务器上的任何Web应用程序通信的是JavaScript技术，而不是将HTML表单直接提交给该应用程序。

遗失了什么？如何实际使用XMLHttpRequest 。由于这是至关重要的代码，您将在编写的每个 Ajax应用程序中以某种形式使用它，因此请快速浏览Ajax的基本请求/响应模型的外观。

发出请求

您有了闪亮的新XMLHttpRequest对象；现在旋转一下。首先，您需要一种Web页面可以调用JavaScript方法（例如，当用户键入文本或从菜单中选择一个选项时）。然后，您将在几乎所有Ajax应用程序中遵循相同的基本概述：

从Web表单获取所需的任何数据。
建立要连接的URL。
打开与服务器的连接。
设置一个让服务器在完成后运行的功能。
发送请求。

清单5是一个Ajax方法的示例，它按以下顺序执行这些操作：

清单5.使用Ajax发出请求

function callServer() { // Get the city and
                state from the web form var city = document.getElementById("city").value; var state
                = document.getElementById("state").value; // Only go on if there are values for both
                fields if ((city == null) || (city == "")) return; if ((state == null) || (state ==
                "")) return; // Build the URL to connect to var url =
                "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state); //
                Open a connection to the server xmlHttp.open("GET", url, true); // Setup a function
                for the server to run when it's done xmlHttp.onreadystatechange = updatePage; //
                Send the request xmlHttp.send(null); }

其中很多是不言自明的。该代码的第一部分使用基本JavaScript代码来获取一些表单字段的值。然后，代码将PHP脚本设置为要连接的目标。请注意，如何指定脚本的URL，然后使用简单的GET参数将城市和州（来自表单）附加到此。

接下来，打开一个连接；这是您再次看到XMLHttpRequest的第一个地方。将显示连接方法（GET）以及要连接的URL。当最终参数设置为true ，它请求异步连接（因此建立了Ajax）。如果使用false ，则代码将在发出请求时在服务器上等待，直到收到响应后才继续。通过将其设置为true ，当服务器在后台处理此请求时，您的用户仍可以使用表单（甚至调用其他JavaScript方法）。

该onreadystatechange财产xmlHttp （请记住，这是你的实例XMLHttpRequest对象）允许你告诉服务器当它完成运行（这可能是在五分钟或5小时）做什么。由于代码不会等待服务器，因此您需要让服务器知道该怎么做，以便您可以对其进行响应。在这种情况下，服务器完成处理您的请求时，将触发一个称为updatePage()的特定方法。

最后，使用null值调用send() 。由于您已在请求URL中添加了要发送到服务器（城市和州）的数据，因此您无需在请求中发送任何内容。因此，这会触发您的请求，服务器可以执行您要求的操作。

如果您没有其他好处，请注意这是多么简单明了！除了让您了解Ajax的异步特性之外，这是相对简单的东西。您将欣赏它如何释放您的精力来专注于出色的应用程序和接口，而不是复杂的HTTP请求/响应代码。

清单5中的代码非常简单。数据是简单的文本，可以包含在请求URL中。 GET发送请求，而不是发送更复杂的POST。没有要添加的XML或内容标头，也没有要在请求正文中发送的数据-换句话说，这就是Ajax Utopia。

没有恐惧; 随着本系列的进行，事情将会变得更加复杂。您将学习如何发送POST请求，如何设置请求标头和内容类型，如何在消息中编码XML，如何为请求添加安全性-列表很长！现在不用担心困难的事情。了解基础知识，您很快就会建立起整个Ajax工具库。

处理回应

现在，您实际上需要处理服务器的响应。此时，您实际上只需要知道两件事：

在xmlHttp.readyState属性等于4之前，请勿执行任何操作。
服务器会将其响应填充到xmlHttp.responseText属性中。

其中第一个-就绪状态-将占用下一篇文章的大部分内容；您将比想了解的更多地了解HTTP请求的阶段。现在，如果您仅检查某个值（4），一切都会奏效（下一篇文章中会有期待的内容）。第二项-使用xmlHttp.responseText属性获取服务器的响应-很容易。清单6显示了服务器可以根据清单5中发送的值调用的方法的示例。

清单6.处理服务器的响应

function updatePage() { if
                (xmlHttp.readyState == 4) { var response = xmlHttp.responseText;
                document.getElementById("zipCode").value = response; } }

同样，此代码不是那么困难或复杂。它等待服务器以正确的就绪状态调用它，然后使用服务器返回的值（在这种情况下，是用户输入的城市和州的邮政编码）来设置另一个表单字段的值。结果是zipCode字段突然与邮政编码一起出现-但用户zipCode 单击按钮！。这就是我之前提到的桌面应用程序的感觉。带有一点Ajax代码的响应能力，动态感等等。

细心的读者可能会注意到zipCode字段是普通的文本字段。一旦服务器返回了邮政编码，并且updatePage()方法使用城市/州邮政编码设置了该字段的值，则用户可以覆盖该值。这样做是出于两个原因：为了使示例中的内容简单，并向您显示有时您希望用户能够覆盖服务器的内容。记住两者；它们在良好的用户界面设计中很重要。

钩在Web表单中

那还剩下什么呢？其实不多。您有一个JavaScript方法，该方法可以获取用户放入表单中的信息，将其发送到服务器，提供另一个JavaScript方法来侦听和处理响应，甚至在响应返回时设置字段的值。剩下的就是调用第一个JavaScript方法并开始整个过程。您显然可以在HTML表单中添加一个按钮，但是那是2001年，您不觉得吗？像清单7一样利用JavaScript技术。

清单7.启动一个Ajax流程

<form> <p>City: <input
                type="text" name="city" id="city" size="25" onChange="callServer();"
                /></p> <p>State: <input type="text" name="state" id="state"
                size="25" onChange="callServer();" /></p> <p>Zip Code:
                <input type="text" name="zipCode" id="zipCode" size="5" /></p>
                </form>

如果这又像是一段相当常规的代码，那么您是对的-是的！当用户为“城市”或“州”字段输入新值时，将callServer()方法，并开始Ajax乐趣。开始觉得您已经掌握了一切？好; 这就是主意！

结论

此时，您可能还没有准备好编写第一个Ajax应用程序-至少，除非您愿意在参考资料一节中进行一些实际的挖掘，否则您不准备这样做。但是，您可以开始了解这些应用程序如何工作的基本概念以及对XMLHttpRequest对象的基本了解。在接下来的文章中，您将学习掌握该对象，如何处理JavaScript与服务器之间的通信，如何使用HTML表单，甚至获得DOM的句柄。

但是，现在，花一些时间来考虑Ajax应用程序的功能多么强大。想象一下一个Web表单，它不仅会在您单击按钮时响应，而且在您键入字段时，从组合框选择选项时都会响应您，甚至在屏幕上拖动鼠标时也会响应。仔细考虑异步的含义；考虑一下JavaScript代码正在运行，而不是在服务器上等待响应它的请求。您会遇到什么问题？您要注意哪些区域？表单的设计将如何改变以适应编程中的这种新方法？

如果您花一些时间在这些问题上，那将比仅仅提供一些您可以剪切并粘贴到您真正不了解的应用程序中的代码更好。在下一篇文章中，您将把这些想法付诸实践，并且为您提供真正使像这样的应用程序工作所需的代码的详细信息。因此，在那之前，请享受Ajax的可能性。

翻译自: https://www.ibm.com/developerworks/java/library/wa-ajaxintro1/index.html