设计网页录入信息与自己定义server数据接收

Posted brucemengbm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了设计网页录入信息与自己定义server数据接收相关的知识,希望对你有一定的参考价值。

需求:设计一个注冊网页用于录入username和登录password。并将数据传入server并显示出来。

1、前言:网页提交的 get 和 post 两种方式。

  (1)对于get提交方式,以本文中样例为例。server接收到的完整信息为:

</pre><pre name="code" class="java"><span style="font-size:14px;">GET /?

username=admin&password=admin HTTP/1.1(请求头和请求体在一起) Accept(表示可以接受的类型): application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */* Accept-Language: zh-cn(表示接收的为中文) User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2) Accept-Encoding(接收编码): gzip(压缩程序), deflate Host: 192.168.3.100:10000(server的IP及port号) Connection: Keep-Alive(保持连接) </span>

  我们发送的实质数据(username=admin&password=666)称为请求体,其他的称为请求头,能够发现get方式是将请求体放在了请求头内部。由于请求头和请求体就像文章的标题和内容一样。标题必然不能有太多数据,而内容数据大小却没有限制。

所以请求头数据容量非常小。一般仅仅有8k,所以假设将请求体放在请求头内部时。不能用于传输图片、音频、视频等大型数据,而放在请求头外部则对数据大小没有限制。

  所以能得出 get 方式提交特点为:数据有限制,可是由于放在了请求头,首先被提交。所以提交速度非常快这个和网络传输中的UDP协议(请猛点这里)特点非常类似。

  get方式提交另一个缺点就是:被提交的内容会在地址栏中显示。如:

技术分享

  (2)对于 post 提交方式,以本文中样例为例,server接收到的完整信息为:

<span style="font-size:14px;">POST / HTTP/1.1(我是请求头開始)
	Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
	Accept-Language: zh-cn
	User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
	Content-Type: application/x-www-form-urlencoded
	Accept-Encoding: gzip, deflate
	Host: 192.168.3.100:10000
	Content-Length: 29
	Connection: Keep-Alive
	Cache-Control: no-cache(我是请求头结束)
	
	username=admin&password=admin(我是请求体)

</span>
  能够看见,post方式中请求头和请求体是分开的,中间隔了两个空行(说明隔了两个“ / r / n”。这将是后面server提取请求体内容的重要根据) 。由于请求体中的数据大小没有限制。所以post提交方式的特点为:

  特点:传输数据大小无限制,可是传输速度慢。并且没有地址栏暴露用户信息的缺陷。

2、设计网页

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">     <span style="font-family: Arial, Helvetica, sans-serif;"><!-- 这个页面的头部表示了w3c的规范信息。

--></span> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>用户登录</title> </head> <body> <form action="http://192.168.3.100:888888" method="post"> //表示将要訪问IP地址为<span style="font-family: Arial, Helvetica, sans-serif;">192.168.3.100的server上port为888888的应用程序,这里设置为post 方式提交</span> <table border="1" align="center" width="40%"> <caption>用户登录</caption> <tr> <td>用户名:</td> <td> <input type="text" name="username" id="username" /> //文本框用于输入文本 </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="password" id="password" /> //密码框用于输入密码 </td> </tr> <tr> <td>邮箱:</td> <td> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td colspan="2" align="center"> //合并两列,格式为居中 <input type="submit" value="登录" /> //提交button,值设为登录      <input type="reset" value="重置" /> //重置button </td> </tr> </table> </form> </body> </html> </span>

  实现网页效果为:

技术分享

3、自己定义server(如果我输入的username为admin。password为666)

<span style="font-size:14px;">public class LoginServer {
	public static void main(String[] args) throws IOException {
		// 创建serverSocket对象,port设置为888888
		ServerSocket ss = new ServerSocket(888888);

		// 监听client连接
		Socket s = ss.accept();
		System.out.println("连接成功"); //假设有对象成功连接到server。输出信息提示

		// 获取输入流
		InputStream is = s.getInputStream();
		byte[] bys = new byte[1024]; //用字符数组接收,大小设置为1024字节
		int len = is.read(bys); //定义len为每次实际读到的内容长度
		String data = new String(bys, 0, len); //由于是post方式提交,所以此处得到的data内容是标题1中post方式提交server得到的完整数据状态
		
		//由于post提交,请求体通过连续两次的\r\n和请求头隔开,而我们须要的数据是请求体。

所以我们获取请求体内容步骤为: int index = data.indexOf("\r\n\r\n"); //<span style="font-family: Arial, Helvetica, sans-serif;">首先获取连续两次的\r\n的索引位置</span> String newData = data.substring(index+4); //获得请求体。此时newData实际内容为:<span style="font-family: Arial, Helvetica, sans-serif;">username=admin&password=666</span> //将请求体分解 String username = getParameter("username",newData); //调用<span style="font-family: Arial, Helvetica, sans-serif;">getParameter方法获取newData中的username内容</span> String password = getParameter("password",newData); //<span style="font-family: Arial, Helvetica, sans-serif;">调用</span><span style="font-family: Arial, Helvetica, sans-serif;">getParameter方法获取newData中的password内容</span> String email = getParameter("email",newData); //<span style="font-family: Arial, Helvetica, sans-serif;">调用</span><span style="font-family: Arial, Helvetica, sans-serif;">getParameter方法获取newData中的email内容</span> //获取输出流。在网页中返回信息 PrintWriter pw = new PrintWriter(s.getOutputStream(),true); //得到打印流对象 pw.println("用户登录成功<br/>"); //在网页中输出登陆成功提示 pw.println("用户名是:<font color=red>"+username+"</font><br/>"); //显示用户注冊名 pw.println("密码是:"+password+"<br/>"); //显示用户注冊密码 pw.println("邮箱是:"+email+"<br/>"); //显示用户注冊邮箱 pw.close(); //关闭打印流对象,由于server须要全天候处于开启状态。所以不关闭socket对象 } private static String getParameter(String key, String newData) { //自己定义getParameter方法。用于获取请求体中的对象 String[] datas = newData.split("&"); //将数据按&分为两部分并存入datas数组中,当中datas[0]=(username=admin)。datas[1]=(password=666) for(String data : datas){ //增强for遍历datas数组 //username=admin String[] keyAndValue = data.split("="); //根据“=”进行数据拆分 if(keyAndValue[0].equals(key)){ //根据传入參数进行匹配 return keyAndValue[1]; } } return null; //假设没有则返回null } } </span>

  小结:网页数据提交主要有get和post两种方式。其各有利弊。get主要特点为速度快。容量小;post主要特点为速度慢,容量大。另外。在进行数据传送之前,要注意首先保证server已经开启并处于监听状态。

技术分享




以上是关于设计网页录入信息与自己定义server数据接收的主要内容,如果未能解决你的问题,请参考以下文章

javaweb简单的学生信息录入系统

后台界面设计之表单设计规范参考

万能的的权限框架组件

52. Socket Server 自定义协议的简单实现 | 厚土Go学习笔记

学生信息录入系统

Java网络编程代码开发工具数据库服务器架设和网页设计