、基本概念:

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. Linux压力测试工具

    1 http_load:http://www.oschina.net/p/http_load 命令行输入man http_load 或者 http_load -h可以看到工具的使用方式: 参数说明: ...

  2. hdu 4310 Hero

    这道题是道算是一道很简单的贪心题了,但是要注意排序的依据,这道题是按照dps/hp的从大到小排序的,然后计算总的sumhp即可. #include"iostream" #inclu ...

  3. Html - 仿Ios assistiveTouch 悬浮辅助球工具

    仿Ios assistiveTouch 悬浮辅助球工具 <!DOCTYPE html> <html> <head> <meta charset="u ...

  4. [转]发送邮件提示“551 User not local; please try ”错误的原因及解决办法

    本文转自:http://www.biglee.cn/blog/article.asp?id=204 一网站要嵌入一个客户反馈系统.为了方便收集反馈信息,并能及时查看信息,我决定以将反馈内容提交到邮箱. ...

  5. Leetcode | Parentheses 相关

    Generate Parentheses Given n pairs of parentheses, write a function to generate all combinations of ...

  6. HttpRequestDeviceUtils

    import javax.servlet.http.HttpServletRequest;public class HttpRequestDeviceUtils { /**Wap网关Via头信息中特有 ...

  7. POJ 2892 Tunnel Warfare(线段树单点更新区间合并)

    Tunnel Warfare Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 7876   Accepted: 3259 D ...

  8. 如何用Apache POI操作Excel文件-----如何在已有的Excel文件中插入一行新的数据?

    在POI的第一节入门中,我们提供了两个简单的例子,一个是如何用Apache POI新建一个工作薄,另外一个例子是,如果用Apache POI新建一个工作表.那么在这个章节里面,我将会给大家演示一下,如 ...

  9. java int转integer方法

    由于AutoBoxing的存在,以下代码在JDK1.5的环境下可以编译通过并运行. int i = 0; Integer wrapperi = i; 还有其他方法? JDK1.5为Integer增加了 ...

  10. Unity3D之游戏架构脚本该如何来写(转)

    这篇文章主要想大家说明一下我在Unity3D游戏开发中是如何写游戏脚本的,对于Unity3D这套游戏引擎来说入门极快,可是要想做好却非常的难.这篇文章的目的是让哪些已经上手Unity3D游戏引擎的朋友 ...