web2.0(html css php javascript)课件_9 服务器浏览器交互

SE-805Web2.0Programming()SchoolofSoftware,SunYat-senUniversity第九讲服务端与客户端的交互Web2.0Programming–ServerBrowserInteractions2/25June26,2011概要更多HTML表单提交数据在PHP中处理表单数据Web2.0Programming–ServerBrowserInteractions3/25June26,2011Reset按钮按下后,所有表单控件重置为它的初始值通过设定它的value属性指定它显示的文本Web2.0Programming–ServerBrowserInteractions4/25June26,2011输入栏分组:fieldset,legendfieldset把相关的输入栏组合在一起,并加上边界;legend则提供标题Web2.0Programming–ServerBrowserInteractions5/25June26,2011表单控件样式属性选择器:只匹配有相应属性值的元素因为大部分表单控件使用相同的元素(input),这时非常有用Web2.0Programming–ServerBrowserInteractions6/25June26,2011隐藏输入栏当表单被提交时,这个不可见的参数仍然会传递给服务器作用:传递一个不希望被用户修改的参数特别地,当需要在相邻的网页请求中传递参数时,将会非常有用Web2.0Programming–ServerBrowserInteractions7/25June26,2011概要更多HTML表单提交数据在PHP中处理表单数据Web2.0Programming–ServerBrowserInteractions8/25June26,2011提交数据时的问题这个表单提交数据到测试页面params.php这个表单看似正确,但当你提交的时候...[cc]=on,[startrek]=Jean-LucPicardWeb2.0Programming–ServerBrowserInteractions9/25June26,2011value属性如果该控件被选定,相应value属性的值将会被提交到服务器[cc]=visa,[startrek]=kirkWeb2.0Programming–ServerBrowserInteractions10/25June26,2011URL编码某些特定字符不允许出现在URL的查询参数中:•例如:,/,=,&当参数被传递时,它是URL编码的(参考列表)•“Eric’scool!?→“Eric%27s+cool%3F%21你一般不需要担心以下事项:•在传递参数前,浏览器会自动对它们进行编码•PHP的$_REQUEST数组会自动对它们解码•...但有时会出现编码后的版本(例如在Firebug)Web2.0Programming–ServerBrowserInteractions11/25June26,2011把数据提交到Web服务器尽管浏览器基本上只是检索信息,但有时你需要提交数据到服务器上•Hotmail:传送一条信息•Flickr:上传一个照片•GoogleCalendar:创建一个计划这些数据使用HTTP请求的方式提交给服务器•HTML表单•预定义URL•Ajax(稍后将会见到)这些数据以参数的方式放置于请求中Web2.0Programming–ServerBrowserInteractions12/25June26,2011HTTPGETvs.POST请求GET:向服务器请求网页或者数据,如果请求中含有参数,这些参数被包含在URL中,以查询字符串的形式被传送.POST:向服务器提交数据并且获取服务器的应答,如果请求含有参数,会被存入发送HTTP请求时产生的数据包里,而不是包含在URL中•提交信息时,POST请求比把参数嵌在URL中的GET请求更合适•URL的长度是有限的(~1024字符)•URL不能包含未经编码的特殊字符•URL中的私密数据会被看到Web2.0Programming–ServerBrowserInteractions13/25June26,2011表单POST例子Web2.0Programming–ServerBrowserInteractions14/25June26,2011GET还是POST?有一些PHP网页能处理GET和POST两种请求想要知道正在处理的请求类型,我们可以查看—•全局$_SERVER数组中的“REQUEST_METHOD”元素Web2.0Programming–ServerBrowserInteractions15/25June26,2011上传文件可以使用type属性为file的input标签,在表单中上传文件必须设定表单的enctype属性当你按下提交按钮后,具体发生了什么事情?Web2.0Programming–ServerBrowserInteractions16/25June26,2011概要更多HTML表单提交数据在PHP中处理表单数据Web2.0Programming–ServerBrowserInteractions17/25June26,2011PHPsuperglobal数组(全局变量)包含请求的信息,服务器的信息等这些特别类型的数组叫做关联数组.“Superglobal”数组数组描述$_GET,$_POST传递到GET和POST请求的参数$_REQUEST通过各种请求传递的参数$_SERVER,$_ENV网页服务器的信息$_FILES通过网页请求上传的文件$_SESSION,$_COOKIE“cookies”用于识别用户(稍后将会见到)Web2.0Programming–ServerBrowserInteractions18/25June26,2011关联数组关联数组(或者叫映像,字典,哈希表):使用非数字索引把一个唯一的”键”和一个值关联起来•例如键“marty”映射为206-685-2181在解释性字符串里嵌入一个关联数组元素的语法:Web2.0Programming–ServerBrowserInteractions19/25June26,2011在PHP里处理一个上传文件上传的文件放在全局数组$_FILES,而不是$_REQUEST$_FILES里每一个元素自身是一个关联数组,包含:•name:用户所上传的本地文件名•type:上传数据的MIME类型,例如image/jpeg•size:文件大小,以byte为单位•tmp_name:存储在服务器的临时副本的文件名•为了永久保存这个文件,需要从这个临时位置移动到其它地方Web2.0Programming–ServerBrowserInteractions20/25June26,2011上传细节例子:如果你上传参数名为avatar的borat.jpg,•$_FILES[“avatar”][“name”]会是borat.jpg•$_FILES[“avatar”][“type”]会是image/jpeg•$_FILES[“avatar”][“tmp_name”]会是类似“/var/tmp/phpZtR4TI“的东西Web2.0Programming–ServerBrowserInteractions21/25June26,2011处理上传的文件,例子用于处理上传文件的参数:•is_uploaded_file(filename)如果给定的文件名是由用户上传的话,返回TRUE•move_uploaded_file(from,to)把文件从一个临时位置移动到一个永久位置惯用做法:检查is_uploaded_file,然后使用move_uploaded_fileWeb2.0Programming–ServerBrowserInteractions22/25June26,2011总结更多HTML表单•reset,hidden•fieldset,legend提交数据•value(radio,option)•URL编码•GETvs.POST•上传文件在PHP中处理表单数据•superglobal数组•处理上传文件•includeWeb2.0Programming–ServerBrowserInteractions23/25June26,2011练习写一个模仿Topcoder注册页面的PHP文件取得原版HTML•把它转换为一个php页面.该页面只有当你提交的Firstname是”Eric”的时候才显示你提交的所有数据,否则只会显示”Strangersinformationhidden”.Web2.0Programming–ServerBrowserInteractions24/25June26,2011阅读材料W3CXHTML控件:W3SchoolsHTML表单指南PHP主页:W3SchoolsPHP指南:PHP编程实践:PHP手册:有趣的CSS表单:–ServerBrowserInteractions25/25June26,2011谢谢!