AJAX

AJAX开发步骤

步一：创建AJAX异步对象，例如：xmlhttp()
        var xmlhttp=null;
        if (window.XMLHttpRequest)
         {// code for all new browsers
          xmlhttp=new XMLHttpRequest();
         }
        else if (window.ActiveXObject)
         {// code for IE5 and IE6
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
    步二：准备发送异步请求，例如：ajax.open(method,url)
                           xmlhttp.open("POST","${pageContext.request.contextPath}/ajax2");
xmlhttp.send("name=tom");

    步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()
         xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
          如果是GET请求的话，无需设置设置AJAX请求头
    步四：真正发送请求体中的数据到服务器，例如：ajax.send()
       POST: xmlhttp.send("name=tom");
       GET：xmlhttp.send(null);
    步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数   
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }
    步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

<script type="text/javascript"> //定位button按钮，同时添加单击事件 document.getElementsByTagName("input")[0].onclick = function(){ //NO1)创建AJAX异步对象（每个浏览器内置的，无需第三方jar包） var ajax = createAJAX();//0 //NO2)AJAX异步对象准备发送请求 var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime(); var method = "GET"; ajax.open(method,url);//1 //NO3）AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示 var content = null; ajax.send(content);//2 //----------------------------------------等待 //NO4）AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数 //0-1-2-3-4,这些是可以触发函数的 //4-4-4-4-4，这些是不可以触发函数的 //以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的 ajax.onreadystatechange = function(){ //如果AJAX状态码为4 if(ajax.readyState == 4){ //如果服务器响应码是200 if(ajax.status == 200){ //NO5）从AJAX异步对象中获取服务器响应的结果 var str = ajax.responseText; //NO6）按照DOM规则，将结果动态添加到web页面指向的标签中 document.getElementsByTagName("span")[0].innerHTML = str; } } } } </script>

public class TimeServletAjax extends HttpServlet {
    public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        //注意：在Web2.0时代，即异步方式下，不能用转发或重定向
        //因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新
        //所以得用以输出流的方式将服务器的结果输出到浏览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
}