[四天学会ajax]学习ajax教程第一天
阿贾克斯由HTML ， JavaScript™技术， DHTML和DOM组成，这一优秀的方式，将笨拙的Web界面转化成交互性的Ajax应用程序。该文章的作者是一位Ajax专家，演示了这些技术如何协同工作 - 从总体概述，详细的讨论 - 使高效的Web开发成为现实。他也揭开了神秘的核心概念阿贾克斯，包括XMLHttpRequest对象。
五年前，如果你不知道XML ，你是一个没有一人伤势严重丑小鸭。 18个月前，红宝石已经成为人们关注的中心，不知道Ruby的程序员可以板凳吧。今天，如果你想要最新的技术时尚，那您的目标就是Ajax 。
但是，Ajax不仅仅是一种时尚，它是一个强大的方式来建立网站，不像学习一种新的语言那样困难。
但Ajax做什么详细讨论之前，让我们来几分钟了解Ajax做什么。目前，编写应用程序时，有两种基本的选择：
·桌面应用程序
·Web应用程序
这两个是相似的，桌面应用程序，通常为CD介质（有时候可从网站下载）并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。 Web应用程序运行在Web服务器上的某个地方 - 这并不奇怪，通过Web浏览器来访问这些应用程序。
然而，比这些应用程序上运行代码，更重要的是，它的工作原理以及应用程序如何与它进行交互。快速桌面应用程序（在您的计算机上运行，不用等待互联网连接），漂亮的用户界面（通常的操作系统）和非凡的动态性。您可以单击，选择，输入，打开菜单和子菜单，巡航左右，基本上不需要等待。
另一方面， Web应用程序是最新的潮流，它们提供无法实现在桌面上的服务（比如Amazon.com和eBay ） 。然而，与功能强大的Web出现的是等待，等待服务器的响应，等待屏幕刷新，等待请求返回，并建立了新的一页。
显然过于简单地说，但基本思路是这样的。你可能已经猜到了，阿贾克斯试图创建一个桌面应用程序的功能和交互性，与不断更新的Web应用程序之间的桥梁。您可以使用常见的桌面应用程序，如动态用户界面和漂亮的控件，但在Web应用程序。
还等什么呢？我们来看看Ajax如何笨拙的Web界面转化成快速响应的Ajax应用程序吧。
老技术，新工艺
说起阿贾克斯，它实际上涉及到多种技术来充分利用它，必须更好地了解这些不同的技术（本系列的前几篇文章将讨论这些技术） 。好消息是，你可能已经非常熟悉了大部分技术，更好的是，这些技术很容易学习的，而不是作为一个完整的编程语言（如Java或Ruby ）那样困难。
这里是Ajax应用程序中使用的基本技术：
· HTML用于建立Web表单并确定应用程序的其他部分领域。
· JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
· DHTML或动态HTML ，用于动态更新表单。我们将使用div ，跨度，和其他动态HTML元素来标记HTML 。
·文档对象模型DOM用于（通过JavaScript代码）处理HTML结构和（某些情况下）服务器返回的XML 。
Ajax的定义
顺便说一下， Ajax是异步JavaScript和XML （以及DHTML等）的缩写。这个短语是Adaptive Path公司的杰西詹姆斯加勒特发明的（请参阅参考资料） ，按照Jesse的解释，这是不是一个缩写。
让我们进一步分析这些技术的职责。未来的文章中，我将讨论这些深入的技术，目前只有熟悉这些组件和技术就可以了。这些代码越熟悉，就越容易从零散理解这些技术的过渡，真正掌握这些技术（真正的Web应用程序开发也敞开了大门） 。
XMLHttpRequest对象
要了解一个对象可能是你最熟悉的，即XMLHttpRequest的。这是一个JavaScript对象，创建该对象很简单，如清单1所示。
清单1创建一个新的XMLHttpRequest对象
现在language="javascript"的type="text/javascript">
VAR XMLHTTP =新的XMLHttpRequest （）;
< / SCRIPT >
下一篇文章将进一步讨论这个对象，现在要知道这是处理所有服务器通信对象。继续阅读之前，你停下来想一想：通过XMLHttpRequest对象的对话与服务器是JavaScript技术。这不是一般的应用程序流，这恰恰是Ajax的强大功能的来源。
在典型的Web应用程序中，用户填写表单字段并单击“提交”按钮。然后整个表单发送到服务器，服务器将转发给处理表单的脚本（通常是PHP或Java ，也可能是一个CGI程序或类似的东西） ，脚本执行完成后再发送回新页面。此页面可能已经充满了一些数据，是一种新形式的HTML ，它可能是一个确认页面，或与原始输入数据选择一些选项页的形式。当然，在服务器上的脚本或程序处理和返回新表单，用户必须等待。屏幕变为空白，然后等待服务器返回数据，重绘。这是互动性差的原因，用户无法获得即时反馈，感觉从桌面应用程序不同。
Ajax技术的Web表单，并在服务器上基本上是JavaScript和XMLHttpRequest对象。当用户填写表单时，数据发送给一些JavaScript代码，而不是直接发送到服务器。相反， JavaScript代码捕获表单数据到服务器发送请求。同时在用户的屏幕上的形式不闪烁，消失或延迟。换句话说， JavaScript代码幕后发送请求，用户不知道发出请求。更妙的是，请求是异步发送的，该JavaScript代码（和用户） ，而不等待服务器的响应。因此，用户可以继续输入数据，滚动屏幕和使用应用程序。
然后，服务器将数据返回JavaScript代码（仍然在Web表单中） ，它决定如何处理数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户收到新的数据。 JavaScript代码甚至可以进行一些运算接收到的数据，然后发送另一个请求，完全不需要用户干预！这是电源的XMLHttpRequest 。它可以根据需要与服务器进行交互，用户甚至可以不知道幕后发生了什么事。结果就是类似于桌面应用程序的动态响应速度快，高度互动的体验，但它背后都有互联网的力量。
添加一些JavaScript
得到XMLHttpRequest的句柄，其他的JavaScript代码就非常简单。事实上，我们将使用JavaScript代码完成非常基本的任务：
·获取表单数据： JavaScript代码很容易从HTML表单中提取数据，并传送到服务器。
·修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
·解析HTML和XML ：使用JavaScript代码操纵DOM （请参阅下一节） ，处理HTML表单服务器返回的XML数据结构。
对于前两点，需要非常熟悉getElementById （）方法，如清单2所示。
清单2。使用JavaScript代码捕获和设置字段值
/ /获取“电话”字段的值，并把它装在一个变量称为手机
手机=的document.getElementById （ “手机” ） 。值;
/ /设置一些值的形式使用数组称为应答
的document.getElementById （ “命令” ） 。值=的响应[0 ] ;
的document.getElementById （ “地址” ） 。值=响应[1];
有没有特别需要注意的是，真是太棒了！您应该意识到这是不是一个非常复杂的事情。一旦你掌握了XMLHttpRequest ， Ajax应用程序的其他部分如清单2所示是一个简单的JavaScript代码，并混有少量的HTML 。与此同时，也一点儿DOM ，我们将看看。
完DOM
最后，还有一个DOM或文档对象模型。有些读者可能有点艰巨的DOM ， HTML设计者很少使用它，即使没有多少的JavaScript程序员使用它，除非你想完成一个高端编程任务。大量使用DOM的是复杂的Java和C / C + +程序，这可能会被认为是难学DOM原因。
幸运的是，在JavaScript DOM使用的技术是非常容易和直观。现在，按照常规也许应该说明如何使用DOM ，或者至少给出一些示例代码，但这样做可能会误导您。即使不理会DOM，仍然能够讨论深入阿贾克斯，这是我准备的方法。以后的文章将再次讨论DOM ， DOM是现在才知道，可能需要它。当你需要传输和服务器之间的JavaScript代码， XML和HTML的形式改变，我们期待深入的DOM 。没有它可以做一些有趣的工作，因此现在就把DOM放到一边。
Request对象
有了上面的基础，让我们来看看一些具体的例子。 XMLHttpRequest是Ajax应用程序的核心，同时也为许多读者可能比较陌生，我们从这里开始。从列表中可以看出，创建和使用这个对象非常简单，不是吗？等待一分钟。
还记得几年前的那些讨厌的浏览器战争吗？有没有在不同的浏览器中得到相同的结果。无论你是否相信，这些战争仍然继续，虽然规模较小。但令人奇怪的是， XMLHttpRequest的已成为这场战争的受害者之一。因此获得XMLHttpRequest对象可能需要不同的方法。下面我会详细讲解。
使用微软浏览器
微软浏览器Internet Explorer使用MSXML解析器处理XML （参考，以进一步了解MSXML ） 。所以，如果你要编写Ajax应用程序和Internet Explorer处理，那么你必须用一种特殊的方式来创建对象。
但并非如此简单。根据Internet Explorer的安装不同版本的JavaScript技术， MSXML实际上有两种不同的版本，所以你必须编写代码，这两种情况下分别。请参阅清单3 ，其中的代码在Microsoft浏览器中创建一个XMLHttpRequest 。
清单3。在微软浏览器的XMLHttpRequest对象创建
VAR XMLHTTP = FALSE;
尝试{
XMLHTTP =新的ActiveXObject （“ MSXML2.XMLHTTP ）的;
}赶上（ E） {
尝试{
XMLHTTP =新的ActiveXObject （“ Microsoft.XMLHTTP ” ） ;
}赶上（ E2 ）{
XMLHTTP = FALSE;
}
}
你可能不完全理解的代码，但没关系。当这一系列文章的结尾，你将JavaScript编程，错误处理，条件编译等有更深的了解。现在你只要把心中的两行代码：
XMLHTTP =新的ActiveXObject （“ MSXML2.XMLHTTP ）的;
和
XMLHTTP =新的ActiveXObject （“ Microsoft.XMLHTTP ” ） ;
这两行代码基本上就是尝试使用一个版本的MSXML对象被创建，如果它不能创建对象使用另一个版本。不错吧？如果没有成功，那么XMLHTTP变量设置为false ，代码告诉你有一个问题。如果发生这种情况，这可能是因为安装非微软的浏览器，你需要使用不同的代码。
治疗和非Microsoft浏览器Mozilla的
如果你选择了其他浏览器比IE浏览器，或一个非微软的浏览器代码，你需要使用不同的代码。事实上，这显示在清单1行简单的代码：
VAR XMLHTTP =新的XMLHttpRequest对象。
这行代码是在Mozilla简单得多，火狐， Safari浏览器， Opera以及基本上所有以任何形式或方式支持Ajax的非Microsoft浏览器，创建一个XMLHttpRequest对象。
结合
关键是要支持所有浏览器。谁愿意为Internet Explorer或一个非微软的浏览器应用程序只写呢？或者更糟的是，编写一个应用程序两次？当然不是！所以代码以支持Internet Explorer和非Microsoft浏览器。清单4所示的代码。
清单4。支持多种浏览器的方式来创建XMLHttpRequest对象
/ *创建一个新的XMLHttpRequest对象谈论到Web服务器* /
VAR XMLHTTP = FALSE;
/ * @ cc_on @ * /
/ * @ （ _AT_ _jscript_version的> = 5 ）
尝试{
XMLHTTP =新的ActiveXObject （“ MSXML2.XMLHTTP ）的;
}赶上（ E） {
尝试{
XMLHTTP =新的ActiveXObject （“ Microsoft.XMLHTTP ” ） ;
}赶上（ E2 ）{
XMLHTTP = FALSE;
}
}
@末@ * /
如果（！ XMLHTTP && typeof运算XMLHttpRequest的！ = '不确定'）{
XMLHTTP =新的XMLHttpRequest （）;
}
不管是谁被注释掉了奇怪的符号，如@ cc_on ，这是一个特殊的JavaScript编译器命令， XMLHttpRequest的在接下来的文章中详细讨论。这段代码的核心分为三步：
1，建立一个变量引用XMLHTTP XMLHttpRequest对象被创建。
2，尝试微软的浏览器，创建对象：
1）尝试使用MSXML2.XMLHTTP对象，以创建。
2）如果失败，请尝试Microsoft.XMLHTTP对象。
2，如果你仍然没有建立XMLHTTP，非Microsoft的方式创建对象。
最后，XMLHTTP应该引用一个有效的XMLHttpRequest对象，无论什么样的浏览器。
有关安全性的注意事项
它的安全性如何？现在浏览器允许用户提高他们的安全等级，关闭JavaScript技术，禁用浏览器中的任何选项。在这种情况下，代码无论如何都不会工作。在这一点上，必须妥善处理的问题，这需要一个单独的一篇文章来讨论，把未来（本系列是足够长的时间，对不对？不要担心，你可能会读之前掌握） 。现在，你想掌握Ajax写一个强大的，但不是完美的代码，这将是很好的。我们还将讨论更多的细节。
Ajax在请求/响应世界
现在，我们引进阿贾克斯， XMLHttpRequest对象上，以及如何建立一个基本的了解。如果大家仔细阅读，你可能已经知道，在服务器上的Web应用程序处理JavaScript技术，而不是直接到应用程序的HTML表单。
还缺少什么呢？到底该如何使用XMLHttpRequest 。因为这段代码是非常重要的，你写的每一个Ajax应用程序应该以某种形式使用它，先看看基本的Ajax请求/响应模型是什么。
请求
你已经有了一个新的XMLHttpRequest对象，让它干现在一个旋转。首先，你需要一个Web页面可以调用JavaScript方法（比如当用户输入文本或选择从菜单中时） 。下一步是为所有的Ajax应用程序基本上是相同的过程：
1，从Web表单，以获得所需的数据。
2，建立连接网址。
3，打开连接到服务器。
4，设置服务器运行后完成的功能。
5 ，发送请求。
清单5中的Ajax方法的例子顺序如下：
清单5。 Ajax请求
功能CallServer的（）{
/ /获取从Web Form的城市和国家
城市= （“城市”） 。值;
状态=的document.getElementById （ “国家” ） 。值;
/ /如果有这两个字段的值
如果（ （全市== NULL） | | （市== “” ）） ;
如果（ （状态== NULL） | | （状态== “” ）） ;
/ /建立要连接的URL
VAR URL =“/脚本/ getZipCode.php的城市=” +逃生（市） + “＆状态=” +逃生（州） ;
/ /打开一个连接到服务器
xmlHttp.open （“GET ” ，网址，真实） ;
/ /设置为服务器运行的功能，当它完成
xmlHttp.onreadystatechange = updatePage ;
/ /发送请求
xmlHttp.send （空） ;
}
大部分的代码是非常明确的含义。代码开始基本的JavaScript代码几个表单字段的值。然后设置一个PHP脚本作为链接的目标。注意脚本URL指定， city和state （来自表单）使用简单的GET参数附加在URL 。
然后打开一个连接，这是你第一次看到对XMLHttpRequest的使用。指定的连接方法（GET ）和要连接的URL 。如果最后一个参数设置为true ，则该请求是一个异步连接（这就是Ajax的由来） 。如果为false，那么代码请求将等待服务器返回响应。如果为true，当服务器处理的请求在后台时，用户仍然可以使用的形式（或者甚至调用其他JavaScript方法） 。
xmlHttp（要记住，这是XMLHttpRequest对象实例）的onreadystatechange属性可以告诉服务器在运行完成后（可能需要五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道如何这样做，你可以回应。在这个例子中，如果服务器处理完了请求，一个特殊的名为updatePage （）方法将被触发。
最后，使用值null调用send （ ） 。因为它已经在请求URL中添加发送到服务器的数据（市，州），所以不需要发送任何数据请求。这发出了请求，服务器按照您的要求工作。
如果你没有找到任何新的东西，你应该明白这是多么简单理解！在除了阿贾克斯牢记的异步特性，这些内容很简单。应该感谢的Ajax使您能够专心编写的应用程序和界面美观，但不用担心复杂的HTTP请求/响应代码。
清单5中的代码说明了Ajax的使用的方便性。该数据是简单的文本，可以作为请求URL的一部分。使用POST GET而不是更复杂的要求发送。没有XML和要添加的内容头部，身体不要求要发送的数据，换句话说，这就是Ajax的乌托邦。
不要担心，这一系列的展开，事情会变得更加复杂。您将看到如何发送POST请求，如何设置请求头和内容类型，以及如何将消息中编码XML ，如何增加请求的安全，有很多你可以做的！第一和留下的那些困难，掌握基本的东西就行了，很快我们就建立了一整套的Ajax工具库。
治疗反应
现在要面对服务器的响应。现在只知道两点：
·什么也不做，直到xmlHttp.readyState属性的值等于4 。
·服务器将响应填充xmlHttp.responseText物业。
第一点，即就绪状态，将在下一篇文章中详细讨论，您将学习更多有关HTTP请求，或许他们也比你预想。现在只要检查一个特定的值（4） ， （在下一篇文章中还有更多的值要介绍） 。二，使用xmlHttp.responseText属性获得服务器的响应，它是非常简单的。清单6显示了一个例子方法根据清单5电话发送的数据服务器。
清单6。处理服务器响应
函数updatePage （）{
（ xmlHttp.readyState == 4） {
响应= xmlHttp.responseText ;
（“的zipCode ”） 。值=响应;
}
}
这些代码也既不困难，也不复杂。它等待服务器调用，如果它已经准备好，可以使用由服务器返回的值（这是用户输入的城市和国家的邮政编码）设置另一个表单字段值。因此，邮政编码字段包含邮政编码突然出现了，用户不按任何按钮！这就是前面提到的桌面应用程序的感觉。响应速度快，动态的经验，等等，这些都是只有一小部分，因为Ajax代码。
细心的读者可能已经注意到的zipCode是一个普通的文本字段。一旦服务器返回的邮政编码，城市/州邮政编码设置的字段值使用updatePage （ ）方法，用户可以覆盖该值。这样做有两个原因：保持简单的例子，说明有时可能希望用户能够修改服务器返回的数据。记住这两点，他们是一个很好的用户界面设计是非常重要的。
连接Web表单
还有什么呢？实际上没有多少。一个JavaScript方法捕捉用户输入的信息，并将其发送到服务器，另一个JavaScript方法监听和处理响应，并在响应返回时设置的字段值。所有这些实际上是依赖于调用第一个JavaScript方法，它启动了整个过程。最明显的方法是在HTML表单中添加一个按钮，但这是到2001年，你不这么认为吗？或者像清单7这样使用JavaScript技术吧。
清单7。启动一个进程阿贾克斯