zoukankan      html  css  js  c++  java
  • 设计网页录入信息与自己定义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提交,请求体通过连续两次的
    和请求头隔开,而我们须要的数据是请求体。

    所以我们获取请求体内容步骤为: int index = data.indexOf(" "); //<span style="font-family: Arial, Helvetica, sans-serif;">首先获取连续两次的 的索引位置</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已经开启并处于监听状态。

  • 相关阅读:
    团队项目-第一阶段冲刺7
    团队项目-第一阶段冲刺6
    Spring Boot 揭秘与实战(七) 实用技术篇
    Spring Boot 揭秘与实战(七) 实用技术篇
    Spring Boot 揭秘与实战(六) 消息队列篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(四) 配置文件篇
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/6920007.html
Copyright © 2011-2022 走看看