1. 程式人生 > >設計網頁錄入信息與自己定義server數據接收

設計網頁錄入信息與自己定義server數據接收

dex 網絡 小結 win tar enter doctype iss flash

需求:設計一個註冊網頁用於錄入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數據接收