AJAX的使用实例说明

linhaoran3000

在web2.0中，有一下比较新的技术，就是AJAX，它通过Javascript与xml异步请求服务器，实现了不刷新页面的情况下实时请求服务器的功能。
个人觉得还是比较有趣的，下面以一个例子来说明问题

实现的功能：
下拉选择框:学院school与类型type的关联

代码分析：
DormInput.jsp页面中
学院选择框：
---选择---
公开学院
继续教育学院
成人高考
类型选择框：
---选择---
当选择学院的时候，触发事件getTrainType(),其源代码如下：
function getTrainType() {
var semester=document.getElementById("dormitoryInput.semester").value;
var yearName=document.getElementById("dormitoryInput.yearName").value;
var schoolId=document.getElementById("dormitoryInput.schoolCode").value;
var url = "operation=majorSettingInput" + "&schoolId=" + schooled
+ "&yearName=" + yearName + "&semester=" + semester;
changeSelectOption(url,document.getElementById("typeCode"));
}
通过getTrainType()，将一些需要传递到服务器的参数串接成url变量，再调用changeSelectOption(3)函数。

JavaScript请求函数
changeSelectOption(3)函数实际上调用了sendRequest(2)函数，由sendRequest(2)向服务器请求服务。sendRequest(2)的函数如下：

01       function sendRequest(url , processFunction) {
02                     if(multilevel_menu_action!=null){
03                            url = multilevel_menu_action + url;
04                     }
05                if (window.XMLHttpRequest) {
06                        req = new XMLHttpRequest();
07                }else if (window.ActiveXObject) {
08                        req = new ActiveXObject("Microsoft.XMLHTTP");
09                }
10                if(req){
11                              req.onreadystatechange = processFunction;
12                        req.open("GET",url, true);
13                        req.send(null);
14                }
15       }
第03行，得到最终的url值，其中multilevel_menu_action的值如下：
multilevel_menu_action = "/Enroll/MultilevelMenuAction.do?op=xml&";
第05—09行, 为了用JavaScript向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例. 这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性.
　　因此, 为了创建一个跨浏览器的这样的类实例(对象), 可以应用第05—09行的代码.
其中，
http_request = new XMLHttpRequest();
为 Mozilla, Safari, ...浏览器所设，
而，
   http_request = new ActiveXObject("Microsoft.XMLHTTP");
   为 IE所设
第11行，决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名。这里就是changeSelectOption函数调用sendRequest函数时传递的参数，即函数名：receive_ajax_menu_change

第12—13行，发送请求，利用open（）与send（）函数。
open()
a)                     第一个参数是HTTP请求方式 – GET, POST, HEAD 或任何服务器所支持的您想调用的方式.
b)                     第二个参数是请求页面的URL.
c)                     第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.这就是"AJAX"中的"A".
send()　如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器,如下所示:
name=value&anothername=othervalue&so=on
这里选择了"GET",所以send()方法直接写成send(null)即可

服务器响应请求并返回结果
在 JavaScript请求函数中提到，页面通过open("GET",url, true)的方式向服务器请求服务。
服务器根据url定位到该Action，由Action调用下层服务，得到处理结果，最后返回结果。这里的Action是MultilevelMenuAction。
假设buf中存放着最后输出的具有约定格式的字符串，在Action的最后，执行如下代码：
JSPWriter out = response.getWriter();
out.write(buf);

JavaScript处理函数
在 JavaScript请求函数中第11行代码提到，javascript将利用函数receive_ajax_menu_change（）来处理服务器返回的结果。其主要代码如下：
01       if (req.readyState == 4) {
02            if (req.status == 200) {
03              var newOptions = req.responseXML.getElementsByTagName("option");
04              var labels=new Array();
05              var values=new Array();
06              labels[0]="--????--";
07              values[0]="k"
08            for(var i=0;i
09             labels[i+1]=newOptions.getElementsByTagName("label")[0].firstChild.data;
10             values[i+1]=newOptions.getElementsByTagName("value")[0].firstChild.data;  
11                } //end for
12           build_menu_change_select(labels,values,ajax_menu_change_select_id);
13          } // end if
14         ajax_menu_change_select_id == null;
15       } // end if

第01行，首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.
readyState的取值如下:
　　0 (未初始化)
　　1 (正在装载)
　　2 (装载完毕)
　　3 (交互中)
　　4 (完成)
第02行，函数会检查HTTP服务器响应的状态值。当值为200 表示响应OK。
第03行，在检查完请求的状态值和响应的HTTP状态值后, 就可以处理从服务器得到的数据了.有两种方式可以得到这些数据：
a)       http_request.responseText – 以文本字符串的方式返回服务器
b)      http_request.responseXML – 以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM函数
这里，用第二种方法取得数据
第04—14行，是对服务器返回的数据进行处理。实现了向类型选择框 添加的功能，从而在页面上看到了：类型选择框的是随学院选择框的值变化而变化的。


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/21616/showart_145409.html