ajax

ajax(全称:Asynchronous JavaScript and XML--非同步JavaScript与XML)
    一:页面ajax代码流程(String传输):
        1.创建引擎
            IE6浏览器创建ajax引擎方式:
                if(window.XMLHttpRequest){
                      xmlreq = new XMLHttpRequest();
                  } else if(window.ActiveXObject){
                      xmlreq = new ActiveXObject("Microsoft.XMLHttp");
                  } 
              IE8+,FF8+浏览器穿件ajax引擎方式:
                  var xmlhttp = new XMLHttpRequest();
          2.设置请求参数:1,设置传送方式(get,post).2,设置url.3,设置是否异步传送
              get:
                  xmlhttp.open("get","${pageContext.request.contextPath }/login.do?userName="+document.getElementById("userName").value,true);
              post:
                  xmlhttp.open("post","${pageContext.request.contextPath }/login.do",true);
                  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          3.设置服务器的回应处理:
              1.onreadystatechange:可以监听到服务器的响应状态,以便于客户端浏览器实时监听到交互
              2.xmlhttp.readyState:交互状态  1,准备交互.2,开始交互.3,服务器运算中.4,处理结束
              3.xmlhttp.status:200,成功.404,资源未找到
              4.关羽XMLRequest引擎对象返回值问题:xmlhttp.responseText:普通文本.xmlhttp.responseXML:接收XML
              xmlhttp.onreadystatechange = function () {
                  if(xmlhttp.readyState == 4){
                      if(xmlhttp.status == 200){
                          document.getElementById("userNameSpan").innerText = xmlhttp.responseText;
                          }
                      }else{
                          alert("服务器出错...");
                      }
                  }
                  else{
                      alert("数据处理中");
                  }
              };
          4.传送数据:
              get:
                  xmlhttp.send(null);
              post:
                  xmlhttp.send("userName="+document.getElementById("userName").value);
      
      例子:
        function aMethod(){
              //1.创建Ajax引擎
              var xmlhttp = new XMLHttpRequest();
              //2.设置请求参数
              xmlhttp.open("post","${pageContext.request.contextPath }/login.do",true);
              xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
              //3.设置服务器的回应处理
              xmlhttp.onreadystatechange = function () {
                  if(xmlhttp.readyState == 4){
                      if(xmlhttp.status == 200){
                          var msg = xmlhttp.responseText;
                          document.getElementById("userNameSpan").innerText = msg;
                      }else{
                          alert("服务器出错...");
                      }
                  }
              };
              //4.发送数据
              xmlhttp.send("userName="+document.getElementById("userName").value);
          }
          页面中文本域挂失焦点事件:<input type="text" name="userName" onblur="aMethod()" id="userName"/>
          后台Action类中传送数据逻辑:
              boolean isOk = false;
            if("scott".equalsIgnoreCase(userName)){
                isOk = true;
            }
            response.getWriter().print(isOk);
            
    二:xml传送数据:
        页面代码:(解析xml格式数据)
             <script type="text/javascript">
                  function aMethod(){
                      var xmlhttp = new XMLHttpRequest();
                      xmlhttp.open("post","${pageContext.request.contextPath }/xml.do",true);
                      xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                      xmlhttp.onreadystatechange = function(){
                          if(xmlhttp.readyState == 4){
                              if(xmlhttp.status == 200){
                                  //如果传回的是xml格式的数据,要使用responseXML进行接收,此时接到的数据为xml对象
                                  var msg = xmlhttp.responseXML;
                                  //取得根元素
                                var rootElement = msg.documentElement;
                                //取得子元素方式:元素对象.getElementsByTagName("tagName");
                                var childElements = rootElement.getElementsByTagName("test");
                                //取得tbody
                                var tbody = document.getElementById("tbodyId");
                                //循环,取得每个元素--元素.getAttribute("");
                                for(var i=0;i<childElements.length;i++){
                                    var childElement = childElements[i];
                                    var id = childElement.getAttribute("id");
                                    var name = childElement.getAttribute("name");
                                    var age = childElement.getAttribute("age");
                                    var sex = childElement.getAttribute("sex");
                                    var birthday = childElement.getAttribute("birthday");
                                    
                                    var tr = document.createElement("tr");
                                    tr.align = "center";
                                    var td1 = document.createElement("td");
                                    var td2 = document.createElement("td");
                                    var td3 = document.createElement("td");
                                    var td4 = document.createElement("td");
                                    var td5 = document.createElement("td");
                                    
                                    td1.innerHTML = id;
                                    td2.innerHTML = name;
                                    td3.innerHTML = age;
                                    td4.innerHTML = sex;
                                    td5.innerHTML = birthday;
                                    
                                    tr.appendChild(td1);
                                    tr.appendChild(td2);
                                    tr.appendChild(td3);
                                    tr.appendChild(td4);
                                    tr.appendChild(td5);
                                    
                                    tbody.appendChild(tr);
                                }
                              }
                          }
                      };
                      xmlhttp.send("1=1");
                  }
             </script>
             <body onload="aMethod()">
                  <table border="2" cellspacing="0" bgcolor="blue" width="60%" align="center">
                      <thead>
                          <tr align="center">
                              <td>编号</td>
                              <td>姓名</td>
                              <td>年龄</td>
                              <td>性别</td>
                              <td>生日</td>
                          </tr>
                      </thead>
                      <tbody id="tbodyId">
                      </tbody>
                  </table>
             </body>
        后台Action类中:
            String xmlHeader = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
            xmlHeader +="<tests>";
            for(Test l : list){
                String test = "<test id='"+l.getId()+"' name='"+l.getName()+"' age='"+l.getAge()+"' sex='"+l.getSex()+"' birthday='"+l.getBirthday()+"' ></test>";
                xmlHeader += test;
            }
            xmlHeader +="</tests>";
            //发送数据:response.setContentType("application/xml;charset=utf-8");--以xml形式发送,设置编码utf-8
            response.setContentType("application/xml;charset=utf-8");
            response.getWriter().print(xmlHeader);
            response.getWriter().flush();