AJAX 学习（一）总结

1. 通过button提交form表单

通常使用submit

为何button？

因为submit太丑，button可以修饰，也容易扩展功能；

怎样使用button提交？

通过javascript，控制button表单可以实现提交。（事件处理）

2. 传统web服务的问题

从jsp页面跳转到servelt，在servlet中获取资源存入域对象，转发回jsp页面，并从域对象中取值

    当前时间：${requestScope.currentTime}

    

    

servlet

public class TimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("GET");
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String nowTimeString = sdf.format(new Date());
        request.setAttribute("currentTime", nowTimeString);
        //转发到time.jsp，从域对象中取值
        request.getRequestDispatcher("/time.jsp").forward(request, response);
    }
}

传统的web会把页面全部缓存到history对象中。改进：

静态资源不缓存在历史中。只缓存动态资源。

3. AJAX概述

JavaScript特点：基于对象、事件驱动、解释性、基于浏览器的动态交互网页技术、嵌入在HTML标签中、弱类型

局部刷新的服务器异步请求

XMLHttpRequest对象（ObjectXActive）

4. GET方式

jsp:

    当前时间:

    


    

---

Servlet

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 nowTime = sdf.format(new Date());
        System.out.println(nowTime);

        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.write(nowTime);
        pw.flush();
        pw.close();
        System.out.println(nowTime);
    }
}

5. POST方式

jsp：

用户名[POST方式获取]：

servlet：

public class PostServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        String flag = null;
        if (username.equals("BJTShang")) {
            flag = "images/MsgSent.gif";
        } else {
            flag = "images/MsgError.gif";
        }

        response.setContentType("text/html;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.write(flag);
        pw.flush();
        pw.close();
    }
}

6. 总结

6.1 what：什么是ajax？

Asynchronous Javascript and XML：客户端与服务端进行异步交互的编程模式；采用异步请求响应的工作机制，实现浏览器局部变化数据的刷新。

6.2 why：为什么要用AJAX？

1. 浏览器不需要重复加载一些静态数据，减轻浏览器负担，改善用户体验；
2. ajax不是整个web页面的刷新，历史栏不会记录已经访问过的局部数据，状态栏也没有刷新。用户没有感觉到在与服务端交互，其实这是假象。

6.3 where？

1. 多级联动；
2. 用户注册验证；
3. 验证码；
4. 加入购物车；
5. 显示信息；
6. 。。。

6.4 how？使用步骤

1. 创建ajax对象（XMLHttpRequest）；
2. 准备发送（ajax.open），需要设置method和url；
3. 如果是GET方式，需要设置编码方式；如果是POST方式，需要设置请求头，包括请求头格式和内容；
4. 发送请求（ajax.send(null)/ajax.send(content)）；
5. ajax异步对象监听服务器状态变化
6. 从ajax对象中，接受服务器响应的数据（responseText/responseXML）；
7. 解析响应内容（html或者xml文档）