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。然后就:
这样就实现了一个登陆系统的实现(伪),因为这里并没有涉及到连接数据库的操作,仅仅是实现了前后端的交互。而且这里还有很多没有得到完善,比如登录页面美化等方面。所以,任重而道远,诸君也加油吧!