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();
    }
}