HTTP - WEB 基础（3）

web开发就是基于HTTP的。

那么一个典型的WEB开发是怎么样的呢？

HTML页面

先整个HTML静态页面，如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>MyTest</title>

</head>
<body>
Test Image Upload<br><br>
<form action="img.php" method="post" enctype="multipart/form-data" name="upload_form">
  <label>Select Image</label>
  <input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
  <input name="upload" type="submit" value="Submit" />
</form>

Test login
<form name="frm" action="login.php" method="post">
    <table>
        <tr>
		<td>User name:</td><td><input type="text" name="username"  id="username"></td>
     	</tr>
        <tr>
        	<td>Password:</td><td><input type="password" name="password" id="password"></td>
        </tr>
        <tr><td colspan="2">
        	<input type="submit" value="Submit" />   
                <input type="reset" value="Reset"/></td>
        </tr>
    </table>
</form>

</body>

</html>

这个网页很简单，就是放了个登录框和图片上传。放浏览器里面看一下：

登录实现

先来看一下登录的form：

<form name="frm" action="login.php" method="post">
    <table>
        <tr>
		<td>User name:</td><td><input type="text" name="username"  id="username"></td>
     	</tr>
        <tr>
        	<td>Password:</td><td><input type="password" name="password" id="password"></td>
        </tr>
        <tr><td colspan="2">
        	<input type="submit" value="Submit" />   
                <input type="reset" value="Reset"/></td>
        </tr>
    </table>
</form>

通过POST形式往login.php发送。

那么怎么实现login.php呢？

<?
	$uname = $_POST["username"];
	$pwd = $_POST["password"];
	echo $uname.":".$pwd;
?>

上面是个例子，就是获取客户端POST上来的用户名和密码。这里只是简单的echo出来。实际上应该是查询数据库。

为了测试，我把html放到了一个服务器上。

http://182.254.240.48/ectest/tmp/test.html

用浏览器打开，然后输入用户名密码，可以看到

这个过程就是：

1. 浏览器提交了一些信息

2. login.php收到数据并且显示。

图片上传

写个img.php来接收图片文件：

<?
	if($_SERVER['REQUEST_METHOD'] == 'POST')
	{
		echo "received a POST<br>";
		if (!is_uploaded_file($_FILES["imgfile"]["tmp_name"]) )
		{
			echo "no file";
		}
		else
		{
			$tmp = $_FILES["imgfile"]["tmp_name"];
			move_uploaded_file($tmp, "./images/a.png");
		}		
	}
	else
	{
		echo "Not post method";
	}
?>
<img src="./images/a.png">

代码很很简单，就是把收到的图片移到当前images目录下，然后显示。

HTTP发送的数据

在上面的两个例子里面，到底客户端怎么发送的数据呢?

拿wireshark抓个包看看。

先看登录的例子：

从header可以看到action是POST, 还有其他一些信息。

body是username=abcd&password=1234。

图片发送的呢？

稍微复杂点，但是还是容易看懂。

总结，web应用本身就是基于HTTP协议的。所有的数据都通过HTTP协议发送接收。通过wireshare可以轻松的抓包。

那么HTTP这种方式就有一定的安全问题了，因为所有来回数据都可以明文看到，正因如此，才有了SSL （https）。

HTTP - WEB 基础 （3）

猜你喜欢

HTTP - WEB 基础（3）