Ajax 使用小结

大家好，好久没有上来写博客了，最近用到了点Ajax东东，好久没有弄了，需要来复习一下。
把写的东西晒出来大家分享一下。
主要是用ajax请求Servlet容器，采用了两种方式，一种是纯Ajax不依赖任何框架，另一种是Prototype框架。
下面是一些主要代码，希望对大家能有所帮助，如有问题可以 email me:[email protected]。

一。使用原生的Ajax（即不使用任何框架）

1.发送请求：
 function startRequest(mypara) {  
        　　 var url = "MyServlet?paraName="mypara;   
        　　 if (window.XMLHttpRequest) {   
        　　  req = new XMLHttpRequest();   
        　　 }else if (window.ActiveXObject) {   
        　　  req = new ActiveXObject("Microsoft.XMLHTTP");   
        　　 }   
        　　 if(req){   
                // 初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。  
            　　 req.open("GET",url, true);   
                // 每次 readyState 属性改变的时候调用的事件句柄函数  
            　　 req.onreadystatechange = complete;   
                // 发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。  
            　　 req.send(null);   
        　　 }   
        }   

2.接收返回的文本或xml，用js处理

 function complete(){  
        　　 if (req.readyState == 4) {   
        　　 if (req.status == 200) {   
            　　 var result = req.responseText;
                 alert(result);
                 var target = document.getElementById("output");
   // 将返回文本添加到如下div中
                 target.innerHTML = result;
   // js处理返回文本
            alert(target.id);
            var gallery = document.getElementById("img-gallery");
               gallery.style.display="none";
               var dynamic = document.createElement("div");
               var returnDiv = document.createElement("div");
               returnDiv.appendChild(document.createTextNode("return paihang"));
               dynamic.id="img-dynamic";
               var strs = result.split(",");
               for(k=0;k<strs.length;k++){
                  var img = document.createElement("img");
                  img.src="images/"+strs[k];
                  img-dynamic.appendChild(img);
               }
             target.appendChild(returnDiv);
             target.appendChild(dynamic);              
             
              var table = document.createElement("table");
              var strs = result.split(";");
              for(i=0;i<strs.length;i++){
                 var tr = document.createElement("tr");
                 var childStrs = strs[i].split(",");
                 for(j=0;j<childStrs.length;j++){
                   var td = document.createElement("td");
                   td.appendChild(document.createTextNode(childStrs[j]));
                   tr.appendChild(td);
                 }
                 table.appendChild(tr);
              }
              var p = document.createElement("p");
              p.appendChild(document.createTextNode(result));
              target.appendChild(p);
            　　 }  
        　　 }  
        }

二。使用prototype框架：

1.发送请求：
 var myAjax;
 (1).一般的请求发送方式，不能够处理返回值带有js脚本的响应：
 function startRequest(myName){
   var url = "PicServlet";
   var pars ="myName="sujun;
   myAjax = new  Ajax.Request(
          url,
          {method:"get",parameters:pars,onComplete:showResponse}
         );
 }
 (2).特殊请求，可以处理带有js脚本的响应：
 function startRequest(myName){
   var url = "PicServlet";
   var pars ="myName="sujun;
   myAjax = new  Ajax.Updater(
                              "output"
          url,
          {method:"get",parameters:pars,evalScripts:true,onComplete:showResponse}
         );
 }
两者区别:
a.使用的对象不同，一个是Request对象，一个是Updater对象
b.Updater对象需要设置container，即返回输出到那个容器，此处输出到id=output的div
c.需要设置参数：evalScripts:true，表明允许执行脚本，该脚本可以在此文件中，也可以在其它文件中，如在别处，需要引入。

2.接收返回的文本或xml，用js处理
 function showResponse(aa){
          var result = aa.responseText;
           alert(result);
       //document.getElementById("output").innerHTML = reseult;
        // document.write(result);
        var target = $('output');
        target.innerHTML = result;
        }
注意：
a.方法showResponse中的参数aa指代的是XMLHttpRequest对象
b.向某一个div中输出，只需要将返回值赋值给该容器的innerHTML属性即可。