、基本概念:

CGI(Common Gate Interface,通用网关接口)

HTML均是静态网页,它无法实现一些复杂的功能,而CGI可以为我们实现。

get方式提交表单:

当表单被发送到服务器断后,表单中的数据被保存在服务器上一个叫做QUERY_STRING的环境变量中。这种表单的处理相对简单,只要读取环境变量就可以了。

post方式提交表单:

对于POST类型的表单,其内容被送到CGI程序的标准输入,而被传送的长度被放在环境变量 CONTENT_LENGTH中。因而我们要做的就是,在标准输入中读入CONTENT_LENGTH长度的字符串。

、http

2.1  http协议

HTTP是Hyper Text Transfer Protocol(超文本传输协议),其结构如下图所示。

2.2  HTTP组成

http请求由三部分组成,分别是:请求行、消息报头、请求正文

HTTP请求数据举例:

HTTP应答数据举例

2.3  http编码
form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。
当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url
后面,用?分割,加载这个新的url。当action为post时候,浏览器把form数据封装到http body中,然后发送到server。
在网页中将表单进行上传的时候,就会进行编码,例如我们点击保存的时候。下图就是我是使用colasoft,科来抓包软件抓取的结构,当然你也可以使用wireshark进行抓取。

、网页设计

在javascript中,完成中英文切换,并且在实现同一个框架中不同页面之间的访问。

//标志位,用于后面的判断

var isEng=false;

//创建中文和英文数组

tree_en=new Arrary(“hello world”,”welcome to China”);

tree_en=new Arrary(“你好”,”欢迎”);

function changeLanguage()

{

//获取表单

var cf = document.forms[];

isEng = !isEng;

//更改框架中顶层按键中的按键值

document.all.language.value= isEng ? "中文" : "English";

var i=,j=;

//chrome浏览器不支持在本地使用parent.xxx类似的操作,而firefox支持。

//在服务器中两种浏览器都支持该操作。下面的语句作用是获取父框架左边的的网页。

//下面几条语句都可以在一个框架中的网页中访问另外一个框架中的数据。

//var frame_left = window.parent["left"];

var obj=window.parent.frame_left;

//var obj=parent.frame_left;

var cf=obj.contentWindow.document;

//cf.getElementById("AllOpen_1").innerHTML="hello";

//更改tree

var tree_arr=cf.getElementsByTagName("a");

var length=tree_arr.length;

//tree_text引用,这里就完成了中英文切换。tree_text根据isEng这个标志位的不同指向 //不同的数组,在更改网页中的内容就行了。后面要怎么操作就随自己了。

var tree_text=isEng?tree_en:tree_ch;

for(i=;i<length;i++)

{

tree_arr[i].innerHTML=tree_text[i];

}

//获取url中的文件名称

function getFileName(hr){

  var url = hr.location.href

//  var url = this.location.href

  var pos = url.lastIndexOf("/");

  if(pos == -){

   pos = url.lastIndexOf("\\")

  }

  var filename = url.substr(pos +)

  return filename;

}

http和网页设计的更多相关文章

  1. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  2. 自适应网页设计(Responsive Web Design)

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  3. 手机web——自适应网页设计(html/css控制)

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...

  4. 15个前卫的 HTML5 & CSS3 网页设计作品

    今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...

  5. 经典网页设计:20个与众不同的国外 HTML5 网站

    大家都都知道, HTML5 具备所有最新的技术和功能,帮助我们创造平滑过渡,花式图像滑块和动画.如果你正在考虑使用HTML5 来设计自己的网站,那么这个集合能够帮助你. 在过去的10年里,网页设计师使 ...

  6. 经典网页设计:20个华丽的 iPhone 应用程序演示网站

    一个物品销售很好,重要的原因之一是它的包装,因为这是最重要的细节,可以把一个人转变成购买者.一个好的包装设计和良好的表现比产品本身更重要,因此被分配了大量的金钱和资源,以创造伟大的东西. 因此,为了销 ...

  7. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  8. PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程

    PS网页设计教程--30个优秀的PS网页设计教程的中文翻译教程   作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作 ...

  9. 韩国网页设计资料《网页设计大师2》JPG+PSD+TXT等 73.89G 百度云下载

    < 网页设计大师2 >超越第一代版本,提供更新更精美的网页素材模板.全部由国际顶级设计师精选打造,完全展示走在潮流 之前的设计风格.是网页设计师/UI交互界面设计师必备工具. < 网 ...

  10. HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

随机推荐

  1. [Unity2D]精灵

    精灵是Unity2D里面对通过图片纹理实现的游戏对象,通常会是游戏里面的玩家,敌人之类的,在Unity里面创建一个精灵的操作非常简单,直接把图片资源拖放到Hierarachy视图就可以完成了精灵的创建 ...

  2. ERROR 2013 (HY000): Lost connection to MySQL server at 'waiting for initial communication packet', system error: 2

    ERROR (HY000): Lost connection to MySQL server at 'waiting for initial communication packet', system ...

  3. C#并行编程--命令式数据并行(Parallel.Invoke)---与匿名函数一起理解(转载整理)

    命令式数据并行   Visual C# 2010和.NETFramework4.0提供了很多令人激动的新特性,这些特性是为应对多核处理器和多处理器的复杂性设计的.然而,因为他们包括了完整的新的特性,开 ...

  4. python中迭代器和生成器

    l=[1,2,3,4] for n in l: print n 在看上面这段代码的时候,我们没有显式的控制列表的偏移量,就可以自动的遍历了整个列表对象.那么for 语句是怎么来遍历列表l的呢?要回答这 ...

  5. WPF 傻瓜生成 .dbml文件,以及文件用途原理是什么

  6. php广告显示设置存放记录的目录代码

    <?php #########随机广告显示########## function myads(){ $dir="ads"; #设置存放记录的目录 //$dir="a ...

  7. Ubuntu 启动停止脚本

    /etc/init.d 目录下的开机启动脚本 1. more redis_8010 #/bin/sh #Configurations injected by install_server below. ...

  8. Redis在windows环境下的部署

    一.下载 官网地址:http://redis.io/download Git地址:https://github.com/MSOpenTech/redis 注:官方无windows版本,需要window ...

  9. Web 在线文件管理器学习笔记与总结(2)显示文件列表(名称,类型,大小,可读,可写,可执行,创建时间,修改时间,访问时间)

    主要函数: filetype() 判断文件类型 filesize() 得到文件大小(字节) is_readable() 判断文件是否可读 is_writeable() 判断文件是否可写 is_exec ...

  10. jQuery Ajax 确定 form 表单 submit 提交成功

    使用 jQuery 提交表单,可以使用 同步方式(async: false). a.html 是 html 文件,a.php 是服务端文件,把 a.html 中表单的数据提交到 a.php 中,在提交 ...