Go语言视频零基础入门到精通

admin

//转载自http://zhidao.baidu.com/question/155242272.html
“

1. AJAX的概念就是页面互动无刷新的效果。
3. 例如:你做一个注册页面，因为用户一般都是唯一的，这个时候你就可以选择一个比较人性化的做法，就是使用AJAX技术，当填完信息鼠标移开txtUserName这个文本框的时候 触发一个事件，然后这个事件调用一个JS方法。JS方法里面使用xmlHttpRequest这个对象。就可以异步的调用后来 来完成一个 查询并且判断的过程。 最后返回一个结果 在前面来判断输入的 “用户名是否在!”。

复制代码

”


//转载自http://zhidao.baidu.com/question/12341196.html

“

1. 术语Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信：Web站点看起来是即时响应的。
3.   虽然Ajax所需的基础架构已经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心，因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的（desktop-like）”可用性。
5.   通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会听到这样的话，“我们没有可投入UI的时间”或“不能用HTML实现”。但是，以下Web站点证明，这些理由再也站不住脚了：
7. BackPack
8. Google Suggest
9. Google Maps
10. PalmSphere
11.   所有这些Web站点都告诉我们，Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。
13. 定义Ajax
14.   Adaptive Path公司的Jesse James Garrett这样定义Ajax：
16.   Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：
18. 基于XHTML和CSS标准的表示；
19. 使用Document Object Model进行动态显示和交互；
20. 使用XMLHttpRequest与服务器进行异步通信；
21. 使用JavaScript绑定一切。
22.   这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“[b]Asynchronous JavaScript + XML[/b]的简写”。
24. Ajax的工作原理
25.   Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
27.   在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：
29. 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
30. 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
31. 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
32. 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
33.   一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。
35. Ajax可用于那些场景？——一个例子：MSN Money页面
37.   前几天，在浏览MSN Money页面的时候，有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”（评价本文）功能，鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后，整个页面被刷新，在原来投票问题所在的地方出现了一个漂亮的感谢画面。
39. 而Ajax能够使用户的体验更加愉快，它可以提供响应更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。如果使用Ajax，服务器可以返回一个包含了感谢信息的500字节的消息，而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Internet，传送26K和1/2K的差别也非常大。同样重要的是，只需要刷新与投票相关的一小节，而不是刷新整个屏幕。
41.   让我们利用Ajax实现自己的基本投票系统。
43. 原始的Ajax：直接使用XmlHttpRequest
44.   如上所述，Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识：[url=http://tearesolutions.com/ajax-demo/raw-ajax.html]http://tearesolutions.com/ajax-demo/raw-ajax.html[/url]。注：如果您已经在本地WebLogic容器中安装了ajax-demo.war，可以导航到[url=http://localhost:7001/ajax-demo/raw-ajax.html]http://localhost:7001/ajax-demo/raw-ajax.html[/url]，
46.   浏览应用程序，参与投票，并亲眼看它如何运转。熟悉了该应用程序之后，继续阅读，进一步了解其工作原理细节。
48.   首先，您拥有一些简单的定位点标记，它连接到一个JavaScriptcastVote(rank)函数。 function castVote(rank) {
49.   var url = "/ajax-demo/static-article-ranking.html";
50.   var callback = processAjaxResponse;
51.   executeXhr(callback, url);
52. }
53.   该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr，提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行。由于我希望它运行在一个简单的Apache环境中，“cast vote URL”只是一个简单的HTML页面。在实际情况中，被调用的URL将记录票数并动态地呈现包含投票总数的响应。
55.   下一步是发出一个XmlHttpRequest请求： function executeXhr(callback, url) {
56.   // branch for native XMLHttpRequest object
57.   if (window.XMLHttpRequest) {
58.     req = new XMLHttpRequest();
59.     req.onreadystatechange = callback;
60.     req.open("GET", url, true);
61.     req.send(null);
62.   } // branch for IE/Windows ActiveX version
63.   else if (window.ActiveXObject) {
64.     req = new ActiveXObject("Microsoft.XMLHTTP");
65.     if (req) {
66.       req.onreadystatechange = callback;
67.       req.open("GET", url, true);
68.       req.send();
69.     }
70.   }
71. }
73.   如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，这样就要使用所提供的ActiveX实现。
75. executeXhr()方法中最关键的部分是这两行：
77. req.onreadystatechange = callback;
78. req.open("GET", url, true);
79.   第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。
81.   一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。 function processAjaxResponse() {
82.   // only if req shows "loaded"
83.   if (req.readyState == 4) {
84.     // only if "OK"
85.     if (req.status == 200) {
86.       502 502"votes").innerHTML = req.responseText;
87.     } else {
88.       alert("There was a problem retrieving the XML data:
89. " +
90.       req.statusText);
91.     }
92.   }
93. }
94.   该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自[url=http://developer.apple.com/internet/webcontent/xmlhttpreq.html]http://developer.apple.com/internet/webcontent/xmlhttpreq.html[/url]）列举了常用的XmlHttpRequest对象属性。
96. 属性 描述
97. onreadystatechange
98. 每次状态改变所触发事件的事件处理程序
100. readyState
101. 对象状态值：
103. 0 = 未初始化（uninitialized）
104. 1 = 正在加载（loading）
105. 2 = 加载完毕（loaded）
106. 3 = 交互（interactive）
107. 4 = 完成（complete）
109. responseText
110. 从服务器进程返回的数据的字符串形式
112. responseXML
113. 从服务器进程返回的DOM兼容的文档数据对象
115. status
116. 从服务器返回的数字代码，比如404（未找到）或200（就绪）
118. statusText
119. 伴随状态码的字符串信息
121. 现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成（readyStatus == 4），然后根据服务器的设定询问请求状态。如果一切正常（status == 200）,就使用innerHTML属性重写DOM的“votes”节点的内容。
123.   既然您亲眼看到了XmlHttpRequest对象是如何工作的，就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。
125. Ajax: DWR方式
126.   按照与文章评价系统相同的流程，我们将使用Direct Web Remoting（DWR）框架实现同样的功能。
128.   假定文章和投票结果存储在一个数据库中，使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单，我们不会使用数据库进行持久性存储。此外，为使应用程序尽可能通用，也不使用Web框架。相反，应用程序将从一个静态HTML文件开始，可以认为它由服务器动态地呈现。除了这些简化措施，应用程序还应该使用Spring Framework关联一切，以便轻松看出如何在一个“真实的”应用程序中使用DWR。
130.   现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件，因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后，就可以导航到[url=http://localhost:7001/ajax_demo/dwr-ajax.html]http://localhost:7001/ajax_demo/dwr-ajax.html[/url]来运行程序。
132.   可以查看HTML 源代码，了解它如何工作。给人印象最深的是，代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是，ajaxSampleSvc服务不是由手工编写而是完全自动生成的！让我们继续，看看这是如何做到的。
134. 引入DWR
135.   如同在“原始的Ajax”一节所演示的那样，直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。
137.   设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。
139.   DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。

复制代码

”