AJAX与传统Web开发的不同之处

前言

   初次接触AJAX，对它认识比较深刻的地方是，自己安装Tomcat服务器，还有关于Tomcat相关的插件，以及JDK环境的配置，这些在《NetBeans IDE 之Tomcat服务器安装》博客中已经做了总结，有兴趣到博友，可以点击文章进行浏览。

   这次的总结是结合实例，来真实体验一下AJAX与传统Web开发的不同之处。

比较AJAX与传统Web项目

一、用户体验角度

1.从下面的表格中，我们看出AJAX只在一个页面进行操作，这是一个显著的区别。

2.从本质分析

   AJAX使用了XMLHttpRequst对象，使得AJAX能够实现异步操作。

3.实例说明 

（1）使用AJAX技术，实现的用户名校验，结果显示在当前页面。

（2）使用传统技术实现的Web页面，结果出现在两个页面

   

二、从服务端Servlet看（.java文件）

1.表格内容分析服务器端的servlet的区别，AJAX返回到的是数据。

  

2.代码比较

（1）传统方式，返回页面Classic.html  

  protected void processRequest(HttpServletRequest request, HttpServletResponse response)
               throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try{
            /* TODO output your page here. You may use following sample code. */
           //1.接收请求数据
            String old=request.getParameter("name");
           //2.进行校验操作
            if (old==null||old=="") {
                //3.输出结果和校验页面地址
                out.println("用户名不能为空");
                //4.输出返回地址
                out.println("返回校验界面");
            }else{
               String name=new String(old.getBytes("ISO8859-1"),"gb2312");
               System.out.println(name);
                if (name.equals("1")) {
                    out.println("用户名["+name+"]已经存在，请使用其他用户名");
                 }else{
                    out.println("用户名["+name+"]尚未存在，可以使用该用户名注册");
                }
                out.println("返回校验界面");
            }
        }finally{
             out.close();
        }
    }

（2）AJAX方式，返回数据name

 protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        try(PrintWriter out = response.getWriter()) {
            /* TODO output your page here. You may use following sample code. */
            //1.接收请求数据
            String old=request.getParameter("name");
            //2.进行校验操作
            if ("".equals(old)) {
                out.println("用户名不能为空");
            }else{
               //String name=new String(old.getBytes("ISO8859-1"),"gb2312");
               //中文乱码解决的服务端解码
               String name=URLDecoder.decode(old,"utf-8");
               //3.输出结果
               System.out.println(name);
                if (name.equals("1")) {
                    out.println("用户名["+name+"]已经存在，请使用其他用户名");
                 }else{
                    out.println("用户名["+name+"]尚未存在，可以使用该用户名注册");
                }
                
            }
        }
    }

三、从页面端看（HTML）

1.从表格中可以看出，传统方式，页面代码比较简单，浏览器做主要的工作。

2.代码分析

（1）传统方式，直接使用表单form进行连接服务器，就可以了。

（2）AJAX方式，使用了XMLHttpRequest五步访问法，与数据库连接。

小结

   通过这三个方面的比较，使得小编对于AJAX方式的编译代码，有了进一步的认识，关键是了解到XMLHttpRequest的使用方法，还有NetBeans工具建立程序与Tomcat服务器交互的过程的熟悉。

感谢您的访问！