简单Ajax例子

一、概述

1.程序执行流程：

(1)点击id="testBtn"的按钮，触发validate();

(2)validate()中有调用request.open方法与server交互(在url指定的jsp页面中，调用writer编写了xml文件并以responseXML返回给request);

(3)交互状态有变时会调用callback函数，callback判定状态，若交互成功则读取responseXML中的值;

(4)根据读取到的responseXML中的值动态生成innerHTML返回给页面。

二、代码

1.index.html

 <html>
 <head>
     <script>

         function validate(){
             var idField = document.getElementById("testBtn");
             var url = "validate.jsp?id="+escape(idField);
             req = new XMLHttpRequest();
             req.open("GET", url, true);
             req.onreadystatechange = callback;
             req.send(null);

         }

         function callback(){
             if(req.readyState == 4){
                 //alert(req.status);
                 //alert(req.responseXML);
                 //alert( msg);
                 if(req.status == 200){
                     var msg = req.responseXML.getElementsByTagName("msg")[0];
                     setMsg(msg.childNodes[0].nodeValue);
                 }
             }
         }

         function setMsg(msg){
             var mdiv = document.getElementById("ajaxMsg");
             if(msg == "abc"){
                 mdiv.innerHTML = "<div>America Born Chinese</div>";
             }else if(msg == "123"){
                 mdiv.innerHTML = "<div>阿拉伯数字</div>";
             }

         }
     </script>
 </head>
 <body>
     <input type="submit" id="testBtn" onclick="validate()" value="mybutton"/>
     <span id="ajaxMsg"></span>
 </body>
 </html>

2.validate.jsp

 <%
 response.setContentType("text/xml");
 response.setHeader("Cache Control", "no store");
 response.setHeader("Pragam","no-cache");
 response.setDateHeader("Expires", 0);
 response.getWriter().write("<msg>abc</msg>");
 %>

三、运行结果