小试AJAX

 前段时间做项目的网站发布部分，遇到在页面中更新一部分数据的情况，如果整个页面刷新，看上去很不爽，正好同学有AJAX的小例子，就研究了一下，果然好用，问题解决了。所以想写写过程：

先简单介绍一下AJAX： 
　　AJAX（Asynchronous JavaScript and XML）是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest。其中：使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。

再说说我的问题：
    　看下面的图，先从三个RadioButton中选择归类方式，然后就把内容按归类显示在　　第一个ComboBox中，然后再从第一个ComboBox中选择一项，则属于该项的流域名称显示在第二个ComboBox中。

所有的数据都是从数据库中查询出并显示的，查询数据这一块用的是JavaBeans，在相应的.jsp中jsp:useBean。

用AJAX解决：
　　主要是用XMLHttpRequest的对象来解决传值问题。先看两个函数：

 

 

(1) function send_request(url) {   //初始化、指定处理函数、发送请求的函数

              //开始初始化XMLHttpRequest对象

              if(window.XMLHttpRequest) { 　　//Mozilla 浏览器

                     http_request = new XMLHttpRequest();

            ……

        else if (window.ActiveXObject) {    // IE浏览器

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

                ……

         http_request.onreadystatechange = processRequest;

(2) function processRequest() {

      var lyname;

        if (http_request.readyState == 4) { // 判断对象状态

            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息

　　　　　　 // responseText 是从 process_query.jsp 、 process_query2.jsp 中返回的数据

                lyname = http_request.responseText;

       ……

　每次点击RadioButton都调用函数

　function showResults(obj) { 　　　 // 显示数据库查询分类结果

           　　 send_request("process_query.jsp?columnName="+obj); }

将选择的分类方式传给process_query.jsp，利用JavaBean得到查询结果，将其传回来，就是function processRequest()中的lyname = http_request.responseText。

　　点击ComboBox的某项同理，也是用一个函数传值到一个.jsp，利用JavaBean得到查询结果，将其传回，再在本页面中进行处理，将其显示。

　　还没有深入研究AJAX，不过小小试验了一下，效果很不错，主要是值能来去自如，还不用刷新整个页面，写两句总结一下。