Posts Tagged ‘xhtml mp’

 
21
一

手机使用AJAX

作者： boke ，分类： JavaScript, markup language, mobile web

没有评论 Comments

测试一下手机浏览器对AJAX的支持：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>title</title>
</head>
<body>
<div id="a"></div>
<div id='b'></div>
<input type="button" onclick="startXMLHttp();" value="发送GET" />
<div id="a1"></div>
<div id='b1'></div>
<input type="button" onclick="startXMLHttp1();" value="发送POST" />

<script type="text/javascript">
 //<![CDATA[
  var xmlHttp;
  function createXMLHttp()
  {
    if (window.XMLHttpRequest)
    {
      xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      try
      {
        xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(e)
      {
        try
        {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e) {};
      }
    }
  }
  
  function startXMLHttp()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23";
    sendStr = encodeURI(sendStr);
  var t1 = document.createTextNode(sendStr);
    document.getElementById('a').appendChild(t1);
    xmlHttp.onreadystatechange = doSomething;
    xmlHttp.open('GET','ajaxtest.php?'+sendStr,true);
    xmlHttp.send(null);
  }
  
  function doSomething()
  {
    
    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
    var t2 = document.createTextNode(xmlHttp.responseText);
        document.getElementById('b').appendChild(t2);
    //document.getElementById('b').innerHTML = xmlHttp.responseText;
      }
    }
  }
  
  function startXMLHttp1()
  {
    createXMLHttp();
    var sendStr = "name=博科&age=23";
    sendStr = encodeURI(sendStr);
  var t3 = document.createTextNode(sendStr);
    document.getElementById('a1').appendChild(t3);
    xmlHttp.onreadystatechange = doSomething1;
    xmlHttp.open('POST','ajaxtest1.php',true);
    xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xmlHttp.send(sendStr);
  }
  
  function doSomething1()
  {
    if (xmlHttp.readyState == 4)
    {
      if (xmlHttp.status == 200)
      {
        var ret = eval('('+xmlHttp.responseText+')');
        var t4 = document.createTextNode('你的名字是'+ret.name+'，年龄是'+ret.age); 
        document.getElementById('b1').appendChild(t4);
        //document.getElementById('b1').innerHTML = xmlHttp.responseText;
      }
    }
  }
 //]]>
</script>
</body>
</html>

由于是xhtml，如果服务器返回的数据里面有“&”，“<”等特殊字符，以及html标签等，就会提示解析错误，所以我们不能使用document.getElementById(‘b1′).innerHTML = xmlHttp.responseText了，这里需要注意。
推荐在服务器端将数据组装成JSON格式，然后在客户端使用createElement()，appendChild()等DOM方法生成所需的样式。

20
一

xhtml mp的事件支持测试

作者： boke ，分类： markup language, mobile web

2条评论 Comments

以下是xhtml mp支持的事件，其中onload和onclick事件是规范规定浏览器必需支持的，其它为可选。具体哪种元素支持哪些事件，因浏览器不同而不同，可以修改以下代码进行测试。还附加了个XMLHttpRequest对象检测。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//OMA//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>DOM Events Test For XHTML Mobile Profile</title>
</head>
<body>
ajax:<label id="ajax"></label><br />
onload:<label id="load"></label><br />
onunload:<label id="unload"></label><br />
onclick:<label id="click"></label><br />
ondblclick:<label id="doubleclick"></label>
onmousedown:<label id="mousedown"></label><br />
onmouseup:<label id="mouseup"></label>
onmouseover:<label id="mouseover"></label><br />
onmousemove:<label id="mousemove"></label>
onmouseout:<label id="mouseout"></label><br />
onfocus:<label id="focus"></label>
onblur:<label id="blur"></label><br />
onkeypress:<label id="keypress"></label>
onkeydown:<label id="keydown"></label><br />
onkeyup:<label id="keyup"></label>
onsubmit:<label id="submit"></label><br />
onreset:<label id="reset"></label>
onselect:<label id="select"></label><br />
onchange:<label id="change"></label><br />

<form action="" method="get" id="f1">
  <input type="button" value="点击我" id="b1" />
  <input type="text" value="点击我" id="t1" />
</form>
<script type="text/javascript">
//<![CDATA[
  /**
   * Ajax支持判断
   */
  var xmlHttp;
  function createXMLHttp()
  {
    if (window.XMLHttpRequest)
    {
      xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
      try
      {
        xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(e)
      {
        try
        {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e) {};
      }
    }
  }
  createXMLHttp();
  if (xmlHttp)
  {
    document.getElementById('ajax').innerHTML = "支持";
  }
  else
  {
    document.getElementById('ajax').innerHTML = "不支持";
  }
  /**
   * 从这里开始
   */
  function $(id)
  {
    return document.getElementById(id);
  }
  window.onload = function()
  {
    $('load').innerHTML = "支持";
    if (window.onresize)
    {
      $('resize').innerHTML = "支持";
    }
  }
  $('b1').onclick = function()
  {
    $('click').innerHTML = "支持";
    $('f1').onsubmit();
    $('f1').onreset();
  }
  $('b1').ondblclick = function()
  {
    $('doubleclick').innerHTML = "支持";
  }
  $('b1').onmousedown = function()
  {
    $('mousedown').innerHTML = "支持";
  }
  $('b1').onmouseup = function()
  {
    $('mouseup').innerHTML = "支持";
  }
	$('b1').onmouseover = function()
  {
    $('mouseover').innerHTML = "支持";
  }
	$('b1').onmousemove = function()
  {
    $('mousemove').innerHTML = "支持";
  }
	$('b1').onmouseout = function()
  {
    $('mouseout').innerHTML = "支持";
  }
	$('t1').onkeydown = function()
  {
    $('keydown').innerHTML = "支持";
  }
	$('t1').onkeypress = function()
  {
    $('keypress').innerHTML = "支持";
  }
	$('t1').onkeyup = function()
  {
    $('keyup').innerHTML = "支持";
  }
	$('t1').onfocus = function()
  {
    $('focus').innerHTML = "支持";
  }
	$('t1').onblur = function()
  {
    $('blur').innerHTML = "支持";
  }
	$('t1').onselect = function()
  {
    $('select').innerHTML = "支持";
  }
	$('t1').onchange = function()
  {
    $('change').innerHTML = "支持";
  }
	$('f1').onsubmit = function()
	{
		$('submit').innerHTML = "支持";
		return false;
	}
	$('f1').onreset = function()
  {
    $('reset').innerHTML = "支持";
    return false;
  }
//]]>
</script>
</body>
</html>
18
一

mobile ok checker

作者： boke ，分类： markup language, mobile web

没有评论 Comments

http://validator.w3.org/mobile/ 检查所写的mobile web page 是否符合标准。其实我觉得不用完全符合，呵呵。

18
一

手机web开发资料

作者： boke ，分类： markup language, mobile web

1条评论 Comments

3G牌照发了，近期要开始仔细研究手机端的web开发了，在网上找了找资料，中文的真不是一般的少，简直就是没有，唉，还是看E文的吧。

把找到的网站整理一下，以便查找。

1. http://www.openmobilealliance.org/ OMA，WapForum与前OMA合并后的组织，WML及XHTML MP的制订者。不过我在者没找到啥东西，http://www.openmobilealliance.org/Application/Search/?search=xhtmlmp 这个链接是关于xhtml mp的pdf文档。

2. http://www.w3c.org W3C，XHTML Basic 制定者，http://www.google.com/custom?q=XHTML+Basic+1.1&sitesearch=www.w3.org&domains=www.w3.org 这个链接可以找到w3c上关于xhtml basic的内容。http://www.w3.org/TR/mobileOK-basic10-tests/ ，http://www.w3.org/TR/mobile-bp/ .当然，还有更多内容，http://www.w3.org/TR/ ，http://www.w3.org/Mobile/

3. http://www.developershome.com/ Developers’ Home ，网站上有些关于手机web开发的教程和文章，http://www.developershome.com/wap/xhtmlmp/ 这个链接是关于xhtml mp的部分。

4. http://dev.opera.com/articles/mobile/ Opera，上面有些Opera提供的关于mobile的内容，http://dev.opera.com/articles/view/mobile-markup-xhtml-basic-1-1/ 这是一篇讲XHTML Basic 1.1的。

5. http://en.wikipedia.org/wiki/XHTML_Mobile_Profile ，http://en.wikipedia.org/wiki/XHTML ，维基百科上关于xhtml mp，xhtml，xhtml basic的部分。

6. http://www.passani.it/gap/ Global Authoring Practices for the Mobile Web

7. http://developer.openwave.com/documentation/xhtml_mp_css_reference/index.html openwave上关于xhtmlmp的文档。

8. http://mobilewebbook.com/ Cameron Moll的一本书，有预览版，没找着下载的地方，先放在这，以后再找。http://cameronmoll.com/ ，他的网站。
另一本书Mobile Web Development

9.  http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/ 闲人们组织了个大会，讨论了一下09年手机web的发展趋势。

10. http://mobiforge.com/

先这些，找着新的再补。