初识ajax

来源：互联网发布：c语言课程设计单词统计编辑：程序博客网时间：2024/05/29 10:17

Ajax之爱之初探

以前我们都是发送到服务器。然后服务器传参数过来全部整个网页全部刷新，而ajax要做的事是部分刷新。

<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>回顾传统Web应用请求和响应特点【显示当前时间】</title>  </head>  <body>    当前时间：${requestScope.nowStr}<br/>    <input id="buttonID" type="button" value="获取当前时间"/><p/>    <script type="text/javascript">        //定位按钮，同时添加单击事件        document.getElementById("buttonID").onclick = function(){            //发送请求到服务器            var url = "${pageContext.request.contextPath}/TimeServlet";            window.location.href = url;        }    </script>    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>  </body></html>

服务器端的代码：

package cn.itcast.javaee.js.time;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 回顾传统Web应用请求和响应特点【显示当前时间】  * @author AdminTC */public class TimeServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        //测试        System.out.println("GET");        //构造SimpleDateFormat对象        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");        //将当前日期按照指定格式输出成字符串        String nowStr = sdf.format(new Date());        //将结果绑定到request域对象中        request.setAttribute("nowStr",nowStr);        //转发到06_time.jsp页面        request.getRequestDispatcher("/06_time.jsp").forward(request,response);    }}

ajax版的刷新客户端
服务器端的代码：

package cn.itcast.javaee.js.time;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 无需刷新整个Web页面显示服务器响应的当前时间 * @author AdminTC */public class AjaxTimeServlet extends HttpServlet {    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");        String nowStr = sdf.format(new Date());        //以流的方式将结果响应到AJAX异步对象中        response.setContentType("text/html;charset=UTF-8");        PrintWriter pw = response.getWriter();        pw.write(nowStr);        pw.flush();        pw.close();    }}

动态刷新jsp

<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>无需刷新整个Web页面显示服务器响应的当前时间</title>  </head>  <body>    当前时间：<span id="time"></span><br/>    <input id="buttonID" type="button" value="获取当前时间"/><p/>    <script type="text/javascript">        //创建AJAX异步对象        function createAJAX(){            var ajax = null;            try{                //如果IE5=IE12的话                ajax = new ActiveXObject("microsoft.xmlhttp");            }catch(e1){                try{                    //如果是非IE的话                    ajax = new XMLHttpRequest();                }catch(e2){                    alert("你的浏览器中不支持异步对象，请换浏览器");                }            }            return ajax;        }    </script>    <script type="text/javascript">        document.getElementById("buttonID").onclick = function(){            //NO1)创建AJAX异步对象            var ajax = createAJAX();            //NO2)准备发送请求            var method = "GET";            var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime();            ajax.open(method,url);            //NO3)真正发送请求体的数据到服务器，如果请求体中无数据的话，就用null表示            ajax.send(null);            //-------------------------------------------------------------等待            //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】            //一定要状态变化后，才可触发function(){}函数            //如果状态永远是4-4-4-4-4，是不会触发function(){}函数的            ajax.onreadystatechange = function(){                //如果状态码为4的话                if(ajax.readyState == 4){                    //如果响应码为200的话                    if(ajax.status == 200){                        //NO5)从AJAX异步对象中获取服务器响应的HTML数据                        var nowStr = ajax.responseText;                        //NO6)将结果按照DOM规则，动态添加到web页面指定的标签中                        var spanElement = document.getElementById("time");                        spanElement.innerHTML = nowStr;                    }                }            }         }    </script>    静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本静态文本<br/>  </body></html>

0 0