一路拾遗
Collect By Finding All The Way ......
posts - 81,comments - 41,trackbacks - 0
AJAX技术初探

一、连接的建立

<script type="text/javascript">
    var request;
    window.onload = function()
    {
        listApi();
    }
    
    function createRequest()
    {
        try{
            request = new XMLHttpRequest();
          }catch (trymicrosoft){
            try{
              request = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (othermicrosoft){
                try{
                  request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (failed) {
                  request = false;
                }
            }
          }
        if(!request)
            alert("Error initializing XMLHttpRequest!");
    }

二、服务器端Servlet 

        这是doGet方法，即将参数写在调用串中。

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {


        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        request.setCharacterEncoding("GBK");
        response.setCharacterEncoding("UTF-8");
        int restMethodId = Integer.parseInt(request.getParameter("restMethodId"));

        String xml_start = "<methodDetail>";
        String xml_end = "</methodDetail>";
        StringBuilder xml = new StringBuilder();
        
        xml.append(xml_start);
        
        RestDao restDao = new RestDao();
        RestMethod restMethod = restDao.getRestMethod(restMethodId);
        
        xml.append("<name>");
        xml.append(zhuanYi(restMethod.getRestMethodName()));
        xml.append("</name>");
        
        xml.append(xml_end);
        
        String xmlString = xml.toString();
        xmlString = xmlString.replace("&nbsp;", " ");
        xmlString = xmlString.replace("&", "&amp;");


        response.getWriter().write(xmlString);
    }

三、页面发送请求

        这里调用的Servlet的Get调用，即调用doGet方法。这种方式适合于参数是简单数据，这样可以把参数卸载调用url中。
        对于参数是复杂的数据对象时，应该调用doPost方法，即在调用串中不包含调用参数，而是把调用参数写在request.send(参数对象)中，doGet调用时此处为null。

function getMethodDetail(methodId)
    {
        var id = methodId.substr(6);
        var url = "servlet/getMethodDetail?restMethodId=" + escape(id);
        call(url);
    }
    
    function call(url)
    {
        createRequest();

        if(request){
            request.open("GET",url,true);
            request.onreadystatechange = callback;
            request.send(null);
        }
    }

四、回调函数

 function callback(){
        if(request.readyState ==4){
            if(request.status ==200){
                parseMessage();
            }else{
                alert("不能得到方法信息:" + req.statusText);
            }
        }
    }

五、解析返回XML、操作Dom以实现页面动态变化

 //解析返回xml的方法
    function parseMessage()
    {
        var xmlDoc = request.responseXML.documentElement;
        
        if(xmlDoc.nodeName == "apis")
        {
            updateApi(xmlDoc);
        }
        else if(xmlDoc.nodeName == "methods")
        {
            updateMethod(xmlDoc);
        }
        else if(xmlDoc.nodeName == "methodDetail")
        {
            updateMethodDetail(xmlDoc);
        }
         else
        {
            alert("NO Api");
        }
    }
    
    function updateApi(xmlDoc)
    {
        var apis = xmlDoc.getElementsByTagName("api");
        var apiul = document.getElementById("apiul");
        equalCount(apis.length, apiul);
        
        var apiliArray = apiul.getElementsByTagName("li");
        
        for(var i=0; i<apiliArray.length; i++)
        {
            apiliArray[i].onclick = function(){listMethod(this.id);}
            
            var apiId = apis[i].childNodes[0].firstChild.nodeValue;
            apiliArray[i].id = "api" + apiId;
            
            var apiName = apis[i].childNodes[1].firstChild.nodeValue;
            var nameText=document.createTextNode(apiName);
            
            apiliArray[i].removeChild(apiliArray[i].childNodes[0]);
            
            apiliArray[i].appendChild(nameText);
        }
    }

posted on 2009-12-04 11:07 胖胖泡泡 阅读(142) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 胖胖泡泡 Powered By博客园 模板提供：沪江博客