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

javalearner

传统的网络页面是一个个的HTML文件。其内容在不刷新整个页面的情况下不会改变。可能有读者会问，网络页面能否做得像桌面程序一样，具有丰富、适时的人机交互功能呢？如果读者用过Google Map、Google Suggest或GMail，可能就会意识到我们离这个时代已经不远了。

        现在炒得很热的Web2.0概念，其实说白了就是使桌面运用网络化。这些运用可说是使桌面运用网络化。这些运用可说是Web 2.0的先驱，它们在看起来、用起来都和桌面程序相似，而且它们的实现都不依靠任何插件。这到底是什么一种技术？使Google能开发出如 此炫酷的系统呢

――这就是本文要介绍的AJAX技术。 AJAX简介 AJAX是Asynchronous javaScript and XML的简称。AJAX其实并非一种新的技术，而是网络浏览器里已有的三项重要特征的结合：

1，浏览器可通过JavaScript和Web Server通讯。

2，JavaScript能在不刷新页面的情况下动态改变页面的值。

3，浏览器能解析XML文件。
   
  
  
  
  
  

1.      
   
2.   作为AJAX的组成部分，这三项特征已经存在很久了，直至Google推出Google Map、GMail和Google Suggest后，AJAX才风行起来，
3. 以致于很多人误以为AJAX是Google发明的新技术。
   
4. 传统的网络页面工作流程是浏览器向Web Server发送请求（Request），在收到数据后刷新整个页面以显示新的数据如下图所示：
   
5. （省略)
   
6. 在服务器端进行的时候，用户能做的就是等待，以致于用户做网上操作的体验不比使用客户端程序来得连贯。
   
7. 运用AJAX，可在用户进行操作的同时通过事件触发JavaScript，在后台连接到服务器得到数据，然后在不刷新整个页面的情况下动
8. 态地改变页面的数值，其过程如下图所示：
   
9. （省略）
   
10. 用户在用户页面上做操作，比如在输入框内输入、点击按钮……这些都会产生事件，并触发JavaScript。JavaScript执行时可通过
11. XMLHttpRequest向服务器发送Http Request，并从服务器得到Http Response，根据Http Response的内容在不刷新页面的情况下动
12. 态地改变页面的内容。XMLHttpRequest是浏览器里已定义的对象，它是AJAX技术的核心组成部分，JavaScript通过它和服务器通讯
13. ，并通过它来解析从服务器传回来的XML文件。XMLHttpRequest最早由微软作为一个ActiveX对象实现，之后其它流行的浏览器步其
14. 后尘都实现了XMLHttpRequest。在定义XMLHttpRequest对象时，IE和别的浏览器略有不同，这在后面的例子中会有说明。
    
15. 学习使用AJAX
    
16. 本文将用一个例子来进一步说明AJAX。在这个例子中，服务器端有一个Servlet会生成0~100的整数。在用户端的用户会被要求输入
17. 框中输入一个0~100的数，如果这个数和服务器端自动生成的数一致，页面则会出现“恭喜，您猜对了！”的字样。在用户输入的
18. 同时，在输入框的右端有提示告诉用户，输入的数是大了还是小了。这些提示都是在不刷新页面的情况下，动态完成的。
    
19. 如下图所示：
    
20. （省略）
    
21. 接下来，我们这边编程序边学习AJAX。
    
22. 准备工作一：建立服务器的Servlet
    
23. 在例子中，这个Servlet叫“ValidateGuess”，它的URL pattern是/ValidateGuess，这个Servlet可以做以下几件事：
    
24. 1，随即产生一个0~100之间的整数。
    
25. 2，在收到Http Request的时候，从Http Request中拿到传入的数，将它和上一步产生的整数比较，并通过Http Response传回比较
26. 结果，结果的形式是一段XML文本，比如：
    
27. <message>
    
28. tooSmall
    
29. </message>
30. 
    
31. 准备工作二：建立用户页面Ajax.jsp页面很简单，如图所示，要注意两点：
    
32. 1，输入框的定义是<input type="text" id="guess" name="id" onkeyup="validate()">
    
33. onkeyup定义了validate()函数为keyup事件的listener，当用户在输入框输入时，validate()函数就会被调用。
34. validate()函数的程序如下：
    
35. function validate(){
    
36.     var aNumber = document.getElementById("guess");
    
37.     var url="[url=http://localhost:8080/AJAX/ValidateGuess?guess=]http://localhost:8080/AJAX/ValidateGuess?guess="[/url]+escape(aNumber.value);
    
38.     initRequest();
    
39.     sendRequest(url);
    
40. }
    
41. initRequest()和sendRequest()函数在下文会做进一步解释。
    
42. 2，在输入框右侧有一个<div id="messageText"></div>，这在JSP初始时是看不到的，它的内容会随用户的输入动态地出现并改变。
    
43. 准备工作做好了，现在我们就可以在Ajax.jsp中加入JavaScript来实现AJAX了。
    
44. 第一步：建立XMLHttpRequest对象
    
45. 前面已提到XMLHttpRequest是浏览器里已定义的对象，它先由微软在IE5里实现，后来其它主流的浏览器也加入了对它的支持，所以
46. 在定义这个对象时IE和别的浏览器略有不同，如以下的程序所示（在文中只包括了主要的程序片断）：
    
47. ......
    
48. var req;
    
49. function initRequest(){
    
50.     if(window.XMLHttpRequest){
    
51.         req=new XMLHttpRequest();
    
52.     }else if(window.ActiveXObject)
    
53.     {
    
54.         req=new ActiveXObject("Microsoft.XMLHTTP");
    
55.     }
    
56. }
    
57. ......
    
58. 至此，在JavaScript里就得到了一个XMLHttpRequest对象，以下的程序就可以对这个名为"req"的XMLHttpRequest的对象进行操作了。
    
59. 第二步：用XMLHttpRequest来向服务器发Request
    
60. function sendRequest(url){
    
61.     req.open("GET",url,true);
    
62.     req.onreadystatechange=handleResponse;
    
63.     req.send(null);
    
64. }
    
65. 这一步骤中调用了几个重要的XMLHttpRequest函数和参数：
    
66. ・open("method","URL"[,asyncFlag[,username,[password]]])
    
67. open是XMLHttpRequest的函数，此函数有五个参数，后三个为可选参数。
    
68. method――Http需求方式，支持"Post"和"Get"。
    
69. URL――服务器端程序的URL。
    
70. asyncFlag――定义Request是否是并发；如果asyncFlag=true，send()函数在发送Request后马上返回；如果asyncFlag=false，send()
71. 函数必须在收到回执后才返回。缺省值是true。
    
72. username――用户名，有些URL要求request带有用户名，一般不会用到。
    
73. password――密码，一般不会用到。
    
74. ・readyState
    
75. readyState是XMLHttpRequest对象的参数，用户表示此对象的状态，可能的状态有五个：
    
76. 0 UNINITIALIZED――表示open()函数还未调用。
    
77. 1 LOADING――表示send()函数还未调用。
    
78. 2 LOADED――表示send()函数已调用。
    
79. 3 INTERACTIVE――表示send()函数调用后，但需求还未被满足时的状态。
    
80. 4 COMPLETED――需求被满足。
    
81. XMLHttpRequest对象被建立之后，它的状态就在这五个值之间转换，每次状态转变都会触发一个readStateChange的事件，
82. 可定义listene来对事件进行处理。
    
83. onreadystatechange=handleResponse
    
84. onreadystatechange是XMLHttpRequest对象的参数，用来定义此对象状态改变事件发生时的listener，它的值对应一个JavaScript
85. 函数――在这个例子中我们的listener叫“handleResponse”。注意，但要保证onreadystatechange的值和你自己定义的函数名一致。
    
86. XMLHttpRequest还有其它的参数和函数，想要进一步了解的读者可在
87. [url=http://ww.xmlplanet/]http://ww.xmlplanet[/url].com/references/objref/XMLHttpRequest.html找到关于XMLHttpRequest的详细文本。
    
88. 第三步：处理readyStateChange事件
    
89. 前面提到XMLHttpRequest的onreadystatechange的参数被定为handleResponse，每当XMLHttpRequest的状态改变时，这个函数都会被
90. 调用，但我们只对readyState=4(COMPLETED)感兴趣。handleResponse的程序如下：
    
91. function handleResponse(){
    
92.     if(req.readyState==4){
    
93.         if(req.status==200){
    
94.             processMessage();
    
95.         }
    
96.     }
    
97. }
    
98. ・status
    
99. status是XMLHttpRequest的参数，代表Http request的状态，比如说404是没有找到服务器，500是服务器端出错，200代表一切OK。
100. 当XMLHttpRequest的readyState是4，并且HttpRequest的状态是200时，就可调用processMessage()函数来对服务器返回的结果进
101. 行处理了，processMessage()的程序如下：
     
102. function processMessage(){
     
103.     var messageElement=req.responseXML.getElementsByTagName("message")[0];
     
104.     var message=messageElement.childNodes[0].nodeValue;
     
105.     var mdiv=document.getElementById("messageText");
     
106.     if(message=="tooBig")
     
107.         mdiv.innerHTML="<div style="color:red">太大</div>";
     
108.       else if(message=="tooSmall")
     
109.         mdiv.innerHTML="<div style="color:red">太小</div>";
     
110.       else if(message=="invalid")
     
111.         mdiv.innerHTML="<div style="color:red">不是数字</div>";
     
112.       else if(message=="outOfRange")
     
113.         mdiv.innerHTML="<div style="color:red">超出范围</div>";
     
114.       else
     
115.         mdiv.innerHTML="<div style="color:green">恭喜，您猜对了！</div>";
     
116.   
     
117.     }
     
118. }
     
119. processMessage函数做了两件事：
     
120. 1，解析了服务器的返回值
     
121. XMLHttpRequest自动地把从服务器端返回的Http Response中的XML，转换成了树状的DOMDocument结构并存在responseXML参数里，
122. 通过它可解析返回的XML文件并最终获得返回值。
123. 读者可到[url=http://www.xulplanet.com/references/objref/Document.html找到详细的关]http://www.xulplanet.com/references/objref/Document.html找到详细的关[/url]于DOM Document的文本。
124. 
     
125. 2，动态地更新页面
     
126. 前面提到在页面的输入框右侧有一个<div id="messageText">，processMessage()通过mdiv.innerHTML动态地改变它的内容。
     
127. 至此，一个完整的AJAX程序就开发完毕。只要把完整的源程序进行编译并部署到服务器上就可以运行了。AJAX能开发出
128. 像Google Map那样完美的应用，但它的基本原理是很简单的，熟悉JavaScript的读者在原来的基础上只需要再学习使用
129. XMLHttpRequest就行了。但要把AJAX的潜力发挥得淋漓尽致，开发出像Google Map那样熟练的应用程序还得下很大的功
     
130. 夫。
     
131. AJAX的注意事项
     
132. AJAX作为一种新一代的网络页面开发架构，使我们开发具有丰富人机交互功能的页面成为可能。但AJAX也有它的不足之处，在您决
133. 定使用AJAX之前，一定要确定下列AJAX的不足不会对您的应用程序的开发造成影响：
     
134. 1，只有比较新的网络浏览器支持AJAX，如果您的程序运用需要支持比较老的网络浏览器，或者是基于移动设备的浏览器，AJAX将不
135. 是个好的选择。以下是支持AJAX的浏览器：
     
136. ・Microsoft IE 5.0以上
     
137. ・Apple Sfari 1.2以上
     
138. ・Firefox 1.0以上
     
139. ・Netscape 7.1以上
     
140. ・Opera 7.6以上
     
141. 2，因为AJAX的运作是在不刷新页面的情况下进行的，浏览器中的地址栏将不再反映当前页面的状态，所以书签功能将不能保证用户
142. 在下一次访问时，可得到相同的内容，同时AJAX也会打乱浏览器里的"Back"键。
     
143. 3，如果使用不当，AJAX会不必要地增大网络数据的流量，从而降低整个系统的性能。
     
144. 4，AJAX的JavaScript在客户端执行，和服务器端的代码不同，AJAX的代码会被下载到客户端，要注意不要在AJAX的代码中放入敏感
145. 信息，以免造成泄密。
     
146. ※ 转载:・武汉白云黄鹤站 bbs.whnet.edu.cn

复制代码