WAP 2.0网站是用XHTML MP基础(手机网站开发基础技术)

来源:互联网 发布:bx5u3图文编辑软件 编辑:程序博客网 时间:2024/06/02 01:51
  1. 原文链接(英文):http://www.developershome.com/wap/xhtmlmp/
  2. 同时推荐的文章(英文)http://mobiforge.com/starting/story/a-beginners-guide-mobile-web-development
  3. 更多关于WAP CSS的信息请访问:http://www.developershome.com/wap/wcss/
  4. 当你阅读完本文后肯定想看看一个完整的手机静态网站的实例吧!下面的链接可以下载到你需要的实例:
  5. http://mobiforge.com/starting/story/site-templates
  6.  
  7.  
  8. 一:XHTML MP的语法规则
  9. 我们知道,我们通常用电脑访问的网站的网页是用html构建的。类似的,现在WAP 2.0网站是用XHTML MP(eXtensible HyperText Markup Language Mobile Profile)构建,以供手持设备的访问,如手机、PDA等。
  10. XHTML MP是XHTML的子集,因此继承了它的语法。
  11.  
  12. XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则:
  13.  
  14. 1:标签必须正确闭合!
  15. <p>XHTML MP 教程 段落 1</p>
  16. <p>XHTML MP tutorial paragraph 2</p>
  17. <p>XHTML MP tutorial paragraph 3</p>
  18. 有些标签是不含内容的(开始标签和结束标签之间的东东,如上面的XHTML MP tutorial paragraph 1),
  19. 就必须用这种形式:Line break<br/>。请注意一定要加上 斜杠
  20.  
  21. 2:标签和属性都必须是用小写
  22. 正确的写法:
  23. <p id="p1">XHTML MP tutorial paragraph 1</p>
  24. <p id="p2">XHTML MP tutorial paragraph 2</p>
  25. <p id="p3">XHTML MP tutorial paragraph 3</p>
  26.  
  27. 3:属性的值必须放置在双引号内
  28. <p id="p1">XHTML MP tutorial paragraph 1</p>
  29.  
  30. 4:不支持属性简写
  31. 在html中,如下写法是正确的:
  32. <input type="checkbox" checked />
  33.  
  34. 而xhtml中必须这样写:
  35. <input type="checkbox" checked="checked" />
  36.  
  37. 下面再举一个例子:
  38. <select multiple="multiple">
  39. <option>XHTML MP Tutorial Part 1</option>
  40. <option selected="selected">XHTML MP Tutorial Part 2</option>
  41. <option>XHTML MP Tutorial Part 3</option>
  42. </select>
  43.  
  44. 5:标签的嵌套必须正确
  45. 不支持标签的重叠,所以下面的写法是错误的!
  46. <p><b>XHTML MP tutorial paragraph 1</p></b>
  47. 应该这样子写:
  48. <p><b>XHTML MP tutorial paragraph 1</b></p>
  49. 二:XHTML MP的 MIME类型 和 文件扩展名
  50. XHTML MP支持下面三种MIME类型
  51. 1.  application/vnd.wap.xhtml+xml
  52. 2.  application/xhtml+xml
  53. 3.  text/html
  54. 第一种类型是一些wap浏览器所需要的(如某些诺基亚S60浏览器),以便正确显示XHTML MP文档。
  55. 第二种是XHTML系列文档的类型
  56. 第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档,而如果遇到上面的两种类型就会弹出一个对话框
  57. 让你保存这些文档。
  58. 动态选择MIME类型
  59. 比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xml MIME类型,那所有的XHTML MP文档就
  60. 都使用application/vnd.wap.xhtml+xml MIME类型发送给客户端。
  61. 要实现这个就必须通过服务器端编程,获取客户端HTTP请求的Header值,这里面的值包含客户端可以处理的所有MIME类型。
  62. 如果支持就设置XHTML MP的MIME类型为application/vnd.wap.xhtml+xml,如果支持其它的,就设置成其它的。
  63. 下面的例子是JSP的,但是你如果使用其它技术的话,原理是一样的,代码也是大同小异!
  64. <%
  65. String acceptHeader = request.getHeader("accept");
  66.  
  67. if (acceptHeader.indexOf("application/vnd.wap.xhtml+xml") != -1)
  68. response.setContentType("application/vnd.wap.xhtml+xml");
  69. else if (acceptHeader.indexOf("application/xhtml+xml") != -1)
  70. response.setContentType("application/xhtml+xml");
  71. else
  72. response.setContentType("text/html");
  73. %>
  74. 这里的代码很简单,我就不多加解释了!
  75. 文件的扩展名
  76. 静态XHTML MP文档的典型扩展名包括:.xhtml、.html和.htm。当然,你也可以使用其它扩展名,只要你在
  77. WAP 服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术(如JSP、PHP、ASP、SSI等),你就必须
  78. 使用相应的扩展名,如PHP使用.php,SSI使用.shtml。
  79. 三:XHTML MP文档结构
  80. 第一个例子    一个典型的XHTML MP文档结构
  81. <?xml version="1.0"?>
  82. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  83.  
  84. <html xmlns="http://www.w3.org/1999/xhtml">
  85. <head>
  86. <title>XHTML MP Tutorial</title>
  87. </head>
  88.  
  89. <body>
  90. <p>Hello world. Welcome to our XHTML MP tutorial.</p>
  91. </body>
  92. </html>
  93. 讲解:
  94. <?xml version="1.0"?>
  95. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  96. 前面的预声明不是XHTML MP元素的一部分,所以不必遵守XHTML MP的约定。
  97. 剩下的内容和普通的html没有什么不同了。
  98. 记住:XHTML MP必须包含<html><head><title>, 和 <body>元素。
  99. 四:XML声明和字符编码
  100. <?xml version="1.0" encoding="UTF-8"?>
  101. 所有的XHTML MP文档都是XML文档,因此开始都会有一个XML声明。这里也可以指定文档的字符编码。
  102. 如果文档的字符编码是UTF-8 or UTF-16的话,其实可以省略掉。
  103. 虽然这个XML声明是可以省略的,但是我们不建议这么做,因此这样可能导致某些索爱的WAP浏览器产生错误。
  104. 五:DOCTYPE声明
  105. 这个<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  106. 声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息,可供验证工具验证你写的XHTML MP文档的语法正确性。
  107. 这些验证工具集成在很多IDE中了。
  108. 六:各标记简析
  109. <html>是XHTML MP的根标记。目前,该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值,这个用来保证
  110. 严格遵守XHTML MP标准。但是即使缺失了这个标记,大部分浏览器还是能正常显示页面。
  111. <head>标记用来存放关于文档本身的信息。比如<title><link>,还有<meta>,这几个标记的功能和在传统的html里面的功能是一样的!
  112. 这里不再废话了。
  113. 还有<body>标记也不重复解释了。
  114. <p>标记的text-align属性已经被取消了,你可以在css中定义实现这个功能,如:
  115. p {
  116. text-align: right
  117. }
  118. 七:XHTML MP 的 Metadata
  119. 先看下面的例子:
  120. <head>
  121. <title>XHTML MP Tutorial</title>
  122. <meta name="author" content="Andrew"/>
  123. </head>
  124. WAP浏览器会自动忽略你自定义的meta属性(它不会显示在你的页面中),如这里的name,这并不会对你的页面的界面有任何影响。
  125. 八:XHTML MP的缓存控制
  126. 这里的缓存就是客户端用来临时存储XHTML文档的空间,如果浏览器发现缓存里面有这个页面了而且没有过期,那它就
  127. 直接显示这个页面,而不需要再次联网下载,这样节省了时间。
  128. 当然,你可以禁止缓存,你可以这样做:
  129. <head>
  130. <title>XHTML MP Tutorial</title>
  131. <meta http-equiv="Cache-Control"  content="no-cache"/>
  132. </head>
  133. 上面的也可以这样写:<meta http-equiv="Cache-Control" content="max-age=0"/>
  134. 如果你要设置缓存时间是300秒的话,可以这么做:
  135. <head>
  136. <title>XHTML MP Tutorial</title>
  137. <meta http-equiv="Cache-Control" content="max-age=300"/>
  138. </head>
  139. 还要注意的一点是,上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的,所以你设置了也未必能起到作用。
  140. 面对这种情况,更好的方法是通过服务器端编程技术设置HTTP header和HTTP response。
  141. 九:XHTML MP的定时刷新
  142. <head>
  143. <title>XHTML MP Tutorial</title>
  144. <meta http-equiv="Cache-Control" content="no-cache"/>
  145. <meta http-equiv="refresh" content="15"/>
  146. </head>
  147. 上面的代码让页面每隔15秒刷新一次!
  148. 注意:必须包含这句:<meta http-equiv="Cache-Control" content="no-cache"/>
  149. 如果没有的话,那可能刷新后只是看到缓存中的副本,并没有重新从服务器下载页面。
  150.  
  151. 还有一个用法就是用来URL自动跳转,例子如下:
  152. <head>
  153. <title>XHTML MP Tutorial</title>
  154. <meta http-equiv="refresh" content="3;URL=http://blog.csdn.net/patriot074/"/>
  155. </head>
  156. 需要注意的是,不是所有浏览器都支持refresh,如:诺基亚 浏览器4.0和Ericsson T610 和 T68i
  157. 不过,阿佛使用的Windows Mobile手机是支持的,所以推荐使用。
  158. 随着智能手机的降价,上面的那些不支持的也很快要淘汰了吧。
  159. 十:注释
  160. 和html的一样啦:
  161. <!-- This is a comment in XHTML MP -->
  162. 十一:换行
  163. <BR/>, 例子:
  164. <body>
  165. <p>
  166. Line 1<br/>
  167.  Line 2<br/><br/>
  168.  Line 3
  169.  </p>
  170. </body>
  171. 十二:<hr/>标记
  172. 这个标记会给你的页面添加一条水平线。注意:
  173. 这个标记不能在<p></p>标记之间使用!!!
  174. 例子:
  175. <body>
  176. <p>
  177.  Table of Contents:<br/>
  178.  </p>
  179.  <hr/>
  180.  <p>
  181.  Part 1 XHTML MP Introduction<br/>
  182.  Part 2 Development of Wireless Markup Languages<br/>
  183.  Part 3 Advantages of XHTML MP<br/>
  184.  Part 4 WML Features Lost in XHTML MP
  185.  </p>
  186. </body>
  187. 十三:标题标记
  188. <h1><h2><h3><h4><h5>, 和 <h6>
  189. 浏览器将以不同的大小显示置于此标记中的文字,具体效果你可以测试下面的代码:
  190. <body>
  191. <h1>Level 1 Heading</h1>
  192.  <h2>Level 2 Heading</h2>
  193.  <h3>Level 3 Heading</h3>
  194.  <h4>Level 4 Heading</h4>
  195.  <h5>Level 5 Heading</h5>
  196.  <h6>Level 6 Heading</h6>
  197.  </body>
  198.  
  199. 十四:文字样式
  200. 首先声明的是有些浏览器并不支持XHTML MP支持的标记。
  201. 例子:
  202. <body>
  203. <p>
  204.  <b>Bold</b><br/>
  205.  <i>Italic</i><br/>
  206.  <b><i>Bold italic</i></b><br/>
  207.  <small>Small</small><br/>
  208.  <big>Big</big><br/>
  209.  <em>Emphasis</em><br/>
  210.  <strong>Strong</strong>
  211.  </p>
  212.  </body>
  213. 你还可以通过WAP  CSS进行更精确的控制,比如把文字大小设置为12pt。
  214. 更多关于WAP CSS的信息请访问:(下面将不再重复声明)
  215. http://www.developershome.com/wap/wcss/
  216. 十五:预格式文本
  217. 在XHTML MP中,段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子:
  218. <body>
  219. <p> Hello, welcome 
  220. to 
  221. our
  222. XHTML MP tutorial. </p>
  223. </body>
  224. 为了能够保持你希望的格式,可以使用<pre>标签:
  225. <body>
  226. <pre> Hello, welcome 
  227. to 
  228. our
  229. XHTML MP tutorial. </pre>
  230. </body>
  231. 这样最后显示的格式就和上面代码中排列的一样了。
  232. 十六:列表标签
  233. 使用<ul>标签来建立无序列表,每个列表项前将显示一个小圆点。
  234. <li>标签用来包围每个列表项。
  235. 请看下面的例子:
  236. <body>
  237. <p>Table of Contents:</p>
  238.  <ul>
  239.  <li>Part 1 XHTML MP Introduction</li>
  240.  <li>Part 2 Development of Wireless Markup Languages</li>
  241.  <li>Part 3 Advantages of XHTML MP</li>
  242.  <li>Part 4 WML Features Lost in XHTML MP</li>
  243.  </ul>
  244. </body>
  245. 使用<ol>标签来建立有序列表,请看下面的例子:
  246. <body>
  247. <p>Table of Contents:</p>
  248.  <ol>
  249.  <li>XHTML MP Introduction</li>
  250.  <li>Development of Wireless Markup Languages</li>
  251.  <li>Advantages of XHTML MP</li>
  252.  <li>WML Features Lost in XHTML MP</li>
  253.  </ol>
  254. </body>
  255. 其中,在<ol>标签中可以设置start属性的值来决定列表序号的起始值,例如:
  256. <ol start="4">
  257. 通过WAP CSS你可以对列表的外观进行更精确的控制。例如,可以修改显示序号的方式,
  258. 比如使用i ,ii ,iii来替代1,2,3。
  259. 十七:显示图片
  260. 和HTML中一样,使用<img>标签来显示图片。height和width属性用来指定图片的高和宽(像素)。
  261. WAP2.0支持常用的GIF、JPG、PNG图像格式,当然这还跟用户所有设备有关,一些设备只能显示
  262. 其中的一部分格式。要想知道客户端支持的图片格式,很容易,和先前讲过的一样,可以通过检查
  263. HTTP Header,请看下面的代码:
  264. <?xml version="1.0"?>
  265. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  266.  
  267. <html xmlns="http://www.w3.org/1999/xhtml">
  268. <head>
  269. <title>Image in XHTML MP</title>
  270. </head>
  271.  
  272. <body>
  273. <p>
  274. <img src="monkey.gif" alt="coolMonkey" height="50" width="50" /><br/>
  275. Hello, welcome to our XHTML MP tutorial.
  276. </p>
  277. </body>
  278. </html>
  279. 其中alt属性在图片无法显示的时候会显示其设置的文本值。
  280. 十八:大图片问题
  281. 很多WAP浏览器没有水平滚动条(我的WM IE也是,但是它会自动缩放图片到合适尺寸)。因此如果图片超过设备的屏幕尺寸,
  282. 很多浏览器就只能显示局部图片,这样从用户看来很糟糕!还有注意的就是height和width属性设置只是影响外观,加载图片的时间
  283. 和图片大小有关,与你设置的height和width的值无关。使用大图片将让你的访问用户掏更多钱(并花费更多的时间)去支援移动,因为大图片带来大流量,
  284. 移动的疯狂收费已经吓住了不少潜在的客户(你不希望你的网站吓走用户吧)。阿佛的哥哥就是个例子,移动的1元包月5M套餐,
  285. 而他超过了流量(不少普通用户根本没有流量的概念),移动收了几十元,从此就再也不敢用手机GPRS上网了。
  286. 因此从优化XHTML MP页面图像的角度来看,控制图片的大小有下面几招:
  287. 1:使用PS等图片处理软件减小图片的尺寸,而不是传送大图片给无线设备,然后通过height和width来设定显示尺寸。
  288. 2:如果使用的GIF格式的图片,那么请使用小型颜色调色板,使用小型调色板会降低图片的质量,不过你可以在二者
  289. 之间做一个较好的平衡。
  290. 3:如果图片是JPG格式,你应该用合适压缩比率来压缩。这个平衡(图片尺寸和显示质量)也要你来控制。
  291. 4:期待移动降低上网资费并提高龟速网络(这仅仅是期待)。
  292. 更好的提高你的手机网站性能方式是先处理页面的文档请求,再接着处理图片的显示。但是如果构建这样的网站已经超过了本文要
  293. 描述的范围,如果你感兴趣的话请自行搜索关键字:Multipart messages
  294. 十九:表格
  295. 创建表格所使用的标签和HTML中使用的没有区别。所以请直接看下面的例子:
  296. <body>
  297. <table>
  298. <tr>
  299.   <td>Cell A</td>
  300.   <td>Cell B</td>
  301.   <td>Cell C</td>
  302. </tr>
  303.  
  304. <tr>
  305.   <td>Cell D</td>
  306.   <td>Cell E</td>
  307.   <td rowspan="2">Cell F</td>
  308. </tr>
  309.  
  310. <tr>
  311.   <td colspan="2">Cell G</td>
  312. </tr>
  313. </table>
  314. </body>
  315. 这里显示出来的效果是不带边框的表格。如果你要显示,可以使用WAP CSS来控制。
  316. <head>标签里面加入如下代码:
  317. <style>
  318.     td {
  319.   border: thin solid black
  320. }
  321. </style>
  322. 二十:超链接
  323. 超链接是用来导航的,你可以点击一个连接然后跳转到其他XHTML MP页面。这个html中的一样,请看下面的例子:
  324. <a href="http://blog.csdn.net/patriot074/">阿佛的博客首页</a>
  325. 下面再讲讲当前页面的定位(滚动到当前页面的指定位置):
  326. 请看下面的例子:
  327. <body>
  328. <p><a id="top">Table of Contents:</a></p>
  329. <ul>
  330. <li>Part 1 XHTML MP Introduction</li>
  331. <li>Part 2 Development of Wireless Markup Languages</li>
  332. <li>Part 3 Advantages of XHTML MP</li>
  333. <li>Part 4 WML Features Lost in XHTML MP</li>
  334. <li>如果页面不够长,无法显示效果的话就再多几个列表项</li>
  335. <li>如果页面不够长,无法显示效果的话就再多几个列表项</li>
  336. <li>如果页面不够长,无法显示效果的话就再多几个列表项</li>
  337. <li>如果页面不够长,无法显示效果的话就再多几个列表项</li>
  338. </ul>
  339. <p><a href="#top">Back to top</a></p>
  340. </body>
  341. 从上面的例子可以看出,要定位到指定位置,可以通过<a href="#top">Back to top</a>
  342. 来实现,#号加上要跳转到位置的 <a>标记的id值就可以了。
  343. 一些老的机器和浏览器不支持这个,如索爱的T610 和 T68i(02年的,应该没什么人用了吧)
  344. 二十一:使用更短的URL
  345. 我们知道手机输入比用电脑键盘慢多了。因此你应该让你的网站的url尽可能的短,看看下面的几种方法:
  346. 1:好好利用子域名。使用http://wap.somedomain.com/来代替http://www.somedomain.com/wap/。还可以使用
  347. 更短的域名:  http://somedomain.com/ 。
  348. 2:让你的web站点和wap站点使用相同的URL。
  349. 使用"http://www.somedomain.com/" 或者 http://somedomain.com/来代替http://www.somedomain.com/wap/"作为
  350. WAP站点的域名。如果一个HTTP 请求来自手机,那么将把WAP版本的站点发送给这个请求用户,否则将返回web版本的站点。
  351. 3:设置站点的默认文档。这样就可以通过http://wap.somedomain.com/来访问http://wap.somedomain.com/index.xhtml页面。
  352. 二十二:图形化链接
  353. 这里的技巧和HTML的一样。你可以在<a>标签中放一个<img>标签,这样就可以在你点击图片的时候进行页面跳转了。
  354. <body>
  355. <p>
  356. This is page 1.<br/>
  357. <a href="linksEg5.xhtml"><img src="to2.gif" alt="Go to linksEg5.xhtml"/></a>
  358. </p>
  359. </body>
  360. 二十三:设置超链接的访问快捷键
  361. <body>
  362. <p>
  363. This is page 1.<br/>
  364. <a accesskey="1" href="linksEg7.xhtml"><img src="to2.gif" alt="Go to linksEg7.xhtml"/></a>
  365. </p>
  366. </body>
  367. 属性accesskey用来设置快捷键,当你按下这个键的时候就相当于点击了这个超链接(而在PC上浏览器仅仅是让这个超链接获得焦点)。
  368. accesskey属性的可用值是:*, #, 0, 1, 2, 3, 4, 5, 6, 7, 8, 和 9。
  369. 二十四:下拉选择框
  370. 这个也和HTML中一样,所以直接上代码:
  371. <body>
  372. <form method="get" action="xhtml_mp_tutorial_proc.asp">
  373. <p>
  374. <select name="selectionList">
  375. <option value="tutorial_A">XHTML MP Tutorial Part A</option>
  376. <option value="tutorial_B">XHTML MP Tutorial Part B</option>
  377. <option value="tutorial_C">XHTML MP Tutorial Part C</option>
  378. </select>
  379. </p>
  380. </form> 
  381. </body>
  382. 默认选择的代码是:
  383. <option value="tutorial_B" selected="selected">XHTML MP Tutorial Part B</option>
  384. 支持多选的代码是:(在WM IE中无效)
  385. <select name="selectionList" multiple="multiple">
  386. 二十五:Input元素
  387. 和HTML一样,XHTML MP也拥有各种获取用户输入的input元素。
  388. input元素必须放置在<form>标记之间。
  389. <input>标记的 type 属性定义了input元素的类型。name属性定义了input元素的名称,可供服务器端检索。
  390. 二十六:文本域
  391.     文本域用来获取字母和数字数据。请看下面的例子:
  392. <input type="text" name="name_for_this_element"/>
  393. type的默认属性就是text,所以可以忽略。
  394. 你可以使用 maxlength属性来控制文本域可输入的字符数,例如:
  395. <input type="text" name="myTextField" maxlength="16"/>
  396. 你还可以使用value属性来设置文本域的默认值,例如:
  397. <input type="text" name="myTextField" maxlength="16" value="Jack"/>
  398. XHTML MP不再支持<input>标签的format属性,你可以使用WAP CSS的-wap-input-format来控制。
  399. 例如,限制输入格式为最多10个数字:
  400. input {
  401. -wap-input-format: "10N"
  402. }
  403. 下面再来介绍一下密码域:
  404. 在密码域中所有的字符通过星号来显示,请看例子:
  405. <input type="password" name="name_for_this_element"/>
  406. 二十七:复选框和单选按钮
  407. 复选框和HTML中也类似,例如:
  408. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="1"/>
  409. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="2"/>
  410. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="3"/>
  411. value的值将被发送服务器端(当有选中该复选框)。
  412. 你也可以通过checked属性设置复选框是否选中,代码如下:
  413. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="1" checked="checked"/>
  414. 下面的标记代码创建一个单选按钮:
  415. <input type="radio" name="name_for_this_element"/>
  416. 和复选框按钮类似,拥有相同name属性值的单选按钮将被分在同一个组,例如:
  417. <input type="radio" name="xhtml_mp_tutorial_chapter" value="1"/>
  418. <input type="radio" name="xhtml_mp_tutorial_chapter" value="2"/>
  419. <input type="radio" name="xhtml_mp_tutorial_chapter" value="3"/>
  420. name和value对是相关联的,这个将在form提交后用来后台取值。和复选框一样,checked属性用来指定是否选中该项。
  421. 二十八:隐藏字段
  422. 隐藏字段将不会在页面中显示。它用来存储状态信息的。例如:
  423. <input type="hidden" name="temp_id" value="123456"/>
  424. value属性会被回发到服务器端。
  425. 二十九:提交窗体数据到服务器端
  426. 在前文中,我们讲到了很多input元素,它们可以获取用户输入的数据。那么服务器端该如何获取这些输入的数据呢?
  427. 你需要把这些标签和提交按钮置于<form></form>标签中。例如:
  428. <?xml version="1.0"?>
  429. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  430.  
  431. <html xmlns="http://www.w3.org/1999/xhtml">
  432. <head>
  433. <title>XHTML MP Tutorial</title>
  434. </head>
  435.  
  436. <body>
  437. <h1>Registration Form</h1>
  438. <form method="get" action="processing.asp">
  439. <p>
  440. Username:<br/>
  441. <input name="username"/><br/>
  442.  
  443. Password:<br/>
  444. <input type="password" name="password"/><br/>
  445.  
  446. Gender:<br/>
  447. <input type="radio" name="gender" value="m"/>Male
  448. <input type="radio" name="gender" value="f"/>Female<br/>
  449.  
  450. Country:<br/>
  451. <select name="country">
  452. <option value="ca">Canada</option>
  453. <option value="cn">China</option>
  454. <option value="fr">France</option>
  455. <option value="de">Germany</option>
  456. <option value="in">India</option>
  457. <option value="it">Italy</option>
  458. <option value="jp">Japan</option>
  459. <option value="kr">Korea</option>
  460. <option value="uk">United Kingdom</option>
  461. <option value="us">United States</option>
  462. </select><br/>
  463.  
  464. Which part of our XHTML MP tutorial do you like?<br/>
  465. <input type="checkbox" name="tutorial_part" value="1"/>Part 1
  466. <input type="checkbox" name="tutorial_part" value="2"/>Part 2
  467. <input type="checkbox" name="tutorial_part" value="3"/>Part 3
  468. <input type="checkbox" name="tutorial_part" value="4"/>Part 4
  469.  
  470. <input type="hidden" name="temp_id" value="123456"/>
  471. </p>
  472.  
  473. <hr/>
  474.  
  475. <p>
  476. <input type="submit"/>
  477. <input type="reset"/>
  478. </p>
  479. </form>
  480. </body>
  481. </html> 
  482. 三十:Form元素
  483. <form>标记是form控件的容器。下面继续介绍<form>标记的两个方法POST和GET。
  484. 先介绍get方法:
  485. <form method="get" action="processing.asp">
  486. 使用get方法,数据将追加到URL中发送。由于URL携带的字符量是有限制的,这也成了get方法的一大缺点。
  487. 还有一个问题是为了避免编码问题(当有非ASCII字符时),你应该使用POST方法替代get方法。而使用POST方法
  488. 数据时,数据将插入到请求到一起发送。
  489. 接下来再讲解一下action属性,该属性指定了哪个页面用来处理提交的数据,你可以在该页面编写后台处理代码。
  490. 三十一:提交按钮和重置按钮
  491. 在XHTML MP中,而每个form都应该包含一个submit按钮。当点击这个按钮后,窗体数据就会被提交到服务器进行处理。
  492. 下面来看看这个按钮:
  493. <input type="submit" value="OK"/>
  494. value属性用来指定这个按钮的标题。如果没有设置这个属性的话,那么将显示默认的 submit (如果是中文浏览器,会显示提交)
  495. 接着再来介绍一下重置按钮。当按下重置按钮时,form中包含的控件值将回到初始状态。例如:
  496. <input type="reset"/>
  497. 如果没有设置重置按钮的value值,那么将默认显示reset或者重置。
  498. 三十二:服务器端
  499. 你可以使用你熟悉的服务器端技术来处理这些<input><select>属性。流行的技术包括ASP/ASP.NET 、Java Servlet/JSP 、Perl和PHP。
  500. 下面提供一个简单的获取客户端传过来的值的样例,关于ASP的。在现实中服务器端要做更复杂的处理。例如,把窗体发送过来的数据存储到数据库中。
  501. <?xml version="1.0"?>
  502. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  503.  
  504. <Response.ContentType = "application/vnd.wap.xhtml+xml" %>
  505.  
  506. <html xmlns="http://www.w3.org/1999/xhtml">
  507. <head>
  508. <title>XHTML MP Tutorial</title>
  509. </head>
  510.  
  511. <body>
  512. <p>
  513. Data received at the server:<br/>
  514. Username: <% =Request.QueryString("username") %><br/>
  515. Password: <% =Request.QueryString("password") %><br/>
  516. Gender: <% =Request.QueryString("gender") %><br/>
  517. Country: <% =Request.QueryString("country") %><br/>
  518. Which part of our XHTML MP tutorial do you like?
  519. <%
  520. for i=1 to Request.QueryString("tutorial_part").Count
  521. Response.Write(Request.QueryString("tutorial_part")(i) & " ")
  522. next
  523. %>
  524. <br/>
  525. temp_id: <% =Request.QueryString("temp_id") %>
  526. </p>
  527. </body>
  528. </html>
0 0
原创粉丝点击