1.涉及到的知识
前端语言：javascript,html，如果可以的话，再来一个CSS用于设计样式
后端语言：Java
前端技术：ajax（可以用JQ框架，简单又高效。但是希望用原生代码来写，容易搞懂原理）
后端技术：servlet
2.前端
2.1 首先写一个HTML页面
建议写一个简单页面就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录系统设计</title>
</head>
<body>
<center>
<form id="forTest" style="top: 50%,left:50%">
<div>用户名：<input type="text" id="user"></div><br>
<div>密 码：<input type="text" id="pwd"></div><br>
<button onclick="ajax()">登录</button>
</form>
</center>
</body>
</html>以上就是一个简单的登录页面，用户名（id：user），密码（id：pwd），点击登录按钮的时候与ajax（）函数相连。
2.2 写传向后端的脚本
<script type="text/javascript">
//创建Ajax对象，不同浏览器有不同的创建方法，其实本函数就是一个简单的new语句而已。
function createXMLHttpRequest() {
var XMLHttpRequest1;
if (window.XMLHttpRequest) {
XMLHttpRequest_test = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
XMLHttpRequest_test = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpRequest_test = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpRequest_test;
}
function ajax() {
//param1与param2就是用户在输入框的两个参数
var userName=document.getElementById("user").value;
var psw=document.getElementById("pwd").value;
var XMLHttpRequest_test = createXMLHttpRequest();
//指明相应页面
var url = "ajaxForCSDN";
XMLHttpRequest_test.open("POST", url, true);
//请求头，保证不乱码
XMLHttpRequest_test.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//对于ajaxRequest，本js.html将会传递param1与param2给你。
XMLHttpRequest_test.send("userName1=" +userName+ "psw1=" + psw);
//对于返回结果怎么处理的问题
XMLHttpRequest_test.onreadystatechange = function() {
//这个4代表已经发送完毕之后
if (XMLHttpRequest_test.readyState == 4) {
//200代表正确收到了返回结果
if (XMLHttpRequest_test.status == 200) {
//弹出返回结果
alert(XMLHttpRequest_test.responseText);
} else {
//如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。
alert("网络连接中断！");
}
}
};
}
</script>以上脚本实际上是网络上都有的，我只是稍微改了一点点东西而已。其中注释已经讲解的很详细了，说白了就是：
1）new一个XMLHttpRequest实例对象
2）获取指定DOM节点的参数
3）指定servlet的位置（url），并且设定好传输的方式（get或者post），用open内嵌函数来实现指定
4）将参数send出去
5）onreadystatechange 即是准备好接受后端传回来的处理数据，并根据数据的状态来向前端页面展示不同的信息。
（PS：（1）和（2）步可以交换顺序）
2.3 前端整体的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录系统设计</title>
</head>
<body>
<center>
<form id="forTest" style="top: 50%,left:50%">
<div>用户名：<input type="text" id="user"></div><br>
<div>密 码：<input type="text" id="pwd"></div><br>
<button onclick="ajax()">登录</button>
</form>
</center>
<script type="text/javascript">
//创建Ajax对象，不同浏览器有不同的创建方法，其实本函数就是一个简单的new语句而已。
function createXMLHttpRequest() {
var XMLHttpRequest1;
if (window.XMLHttpRequest) {
XMLHttpRequest_test = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
XMLHttpRequest_test = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpRequest_test = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpRequest_test;
}
function ajax() {
//param1与param2就是用户在输入框的两个参数
var userName=document.getElementById("user").value;
var psw=document.getElementById("pwd").value;
var XMLHttpRequest_test = createXMLHttpRequest();
//指明相应页面
var url = "ajaxForCSDN";
XMLHttpRequest_test.open("POST", url, true);
//请求头，保证不乱码
XMLHttpRequest_test.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//对于ajaxRequest，本js.html将会传递param1与param2给你。
XMLHttpRequest_test.send("userName1=" +userName+ "psw1=" + psw);
//对于返回结果怎么处理的问题
XMLHttpRequest_test.onreadystatechange = function() {
//这个4代表已经发送完毕之后
if (XMLHttpRequest_test.readyState == 4) {
//200代表正确收到了返回结果
if (XMLHttpRequest_test.status == 200) {
//弹出返回结果
alert(XMLHttpRequest_test.responseText);
} else {
//如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。
alert("网络连接中断！");
}
}
};
}
</script>
</body>
</html>以上只是一个练习，平常还是需要以模块化思想来写
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。然后就：
这样就实现了一个登陆系统的实现（伪），因为这里并没有涉及到连接数据库的操作，仅仅是实现了前后端的交互。而且这里还有很多没有得到完善，比如登录页面美化等方面。所以，任重而道远，诸君也加油吧！