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