手把手实现：JS原生代码与Servlet的前后交互实现

1.涉及到的知识

前端语言：javascript,html，如果可以的话，再来一个CSS用于设计样式

后端语言：Java

前端技术：ajax（可以用JQ框架，简单又高效。但是希望用原生代码来写，容易搞懂原理）

后端技术：servlet

2.前端

2.1 首先写一个HTML页面

建议写一个简单页面就可以了。

    
    


    
        

            
用户名：

            
密  码：

            
            登录
        
    

以上就是一个简单的登录页面，用户名（id：user），密码（id：pwd），点击登录按钮的时候与ajax（）函数相连。

2.2 写传向后端的脚本

以上脚本实际上是网络上都有的，我只是稍微改了一点点东西而已。其中注释已经讲解的很详细了，说白了就是：

1）new一个XMLHttpRequest实例对象

2）获取指定DOM节点的参数

3）指定servlet的位置（url），并且设定好传输的方式（get或者post），用open内嵌函数来实现指定

4）将参数send出去

5）onreadystatechange 即是准备好接受后端传回来的处理数据，并根据数据的状态来向前端页面展示不同的信息。

（PS：（1）和（2）步可以交换顺序）

2.3 前端整体的代码

    
    


    
        

            
用户名：

            
密  码：

            
            登录
        
    

    

以上只是一个练习，平常还是需要以模块化思想来写

3.后端

3.1 先搞一个Servers

window->preferences->Server->Server Runtime Environment->add

具体怎么配置请自行百度！

3.2 建立一个工程

eclipse->File->new->Dynamic Web Project

这个自己设定好参数。如果不会就去百度吧。

注意！！

建好的Dynamic Web Project工程中，Java Resources用来存放所有的.java源程序（也就是你的servlet），WebContent文件夹里存放你的静态文件（也就是你的前端页面、js代码、css、imgae等）。新手（比如我）在这里仅仅看百度其它地方的指导，几乎都会在这里出错。所以我觉得我有必要重点画圈。

3.3 开始写一个servlet

首先在Java Resources的src文件夹建立好一个servlet文件。注意！！！！servlet的文件名请务必于前端中url指定的名字保持一致，不然前端页面永远找不到他对应的servlet！

在这里我用的是post方法，然后get方法就可以忽视。

package servletForMap;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ajaxForCSDN
 */
@WebServlet("/ajaxForCSDN")
public class ajaxForCSDN extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ajaxForCSDN() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.setContentType("text/html");
        
        request.setCharacterEncoding("utf-8");
        
        response.setCharacterEncoding("utf-8");
        
        PrintWriter out = response.getWriter();
        
        String userName = request.getParameter("userName1");
        String psw = request.getParameter("psw1");
        
        System.out.println(userName);
        System.out.println(psw);
        
        //out.write(userName+psw);  
        if(userName=="shuaibingbing" && psw == "123")
            out.write("登录成功！");
        else
            out.write("登录失败！");
        //out.flush();
        out.close();
        
    }

}

3.4 把server跑起来~

在eclipse的WebContent文件夹中，找到test_CSDN.html文件并右击，RUN As->Run On Server。然后就：

这样就实现了一个登陆系统的实现（伪），因为这里并没有涉及到连接数据库的操作，仅仅是实现了前后端的交互。而且这里还有很多没有得到完善，比如登录页面美化等方面。所以，任重而道远，诸君也加油吧！