HTML5中的表单+Ajax+localStorage+Cookie

（一）关于表单
1、新的写法，表单里面的东西不用包裹在<from>标签内，但必须在各元素中写入表单元属性，如下所示：
<form id="myForm" action="http://www.baidu.com"></form>
<input type="text" form="myForm">
<input type="submit" form="myForm">


2、关于表单中的email，在HTML5中新增了type=email的属性，并且还有自动验证功能
<form id="myForm" action="http://www.baidu.com"></form>
<input type=email name=email form="myForm">
<input type="submit" form="myForm">



3、关于表单中的url
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
<input type="submit" form="myForm">



4、关于时间
<input type="date">
<input type=time>
<input type=month>
<input type=week>
<input type=datetime>
<input type=datetime-local/>
后边两个支持率相当差，不推荐使用


5、关于number
<input type="number" max=10 min=0 step=2 value="5"/>


6、关于range
<input type="range" value="100" />
<input type="range" max=10 min=0 step=1 value=5>


7、关于color，在页面上可以手动选择你所需要的颜色
<input type="color" value="#34538b" />


8、placeholder，设置input输入框中的默认值
<input id=placeholders placeholder="点击我会以清除">


9、required默认验证规则，required为非空验证
<input id=placeholder name=name required form="myForm">
<input id=placeholder name=require1 required="required" form="myForm">
（1）自定义验证
     <input name=require2 pattern="^[1-9]\d{5}$" form="myForm">


10、关于提示文字
<input id=placeholder name=require1 required="required" oninvalid="setCustomValidity('滚蛋')"  form="myForm">
<input name=require2 pattern="^[1-9]\d{5}$" οninput="setCustomValidity('gun')" form="myForm">


11、autofocus自动获得焦点


=======================================================================================
（二）关于Ajax
1、简单的来说，AJAX 可以使网页实现异步更新
2、目的：使用ajax从json中读取数据
3、难点：ajax的使用流程
4、ajax的执行过程：
（1）获取ajax的核心对象（注意浏览器的兼容问题）
          function getXmlHttpRequest(){
                var xhr=null;
                if((typeof XMLHttpRequest)!='undefined'){
                    xhr=new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject('Microsoft.XMLHttp');
                }
                 return xhr;
           }
（2）打开一个新的请求
          xhr.open('get','findAllEmp',true);
（3）设置监听器
          xhr.onreadystatechange=function(){
                //状态码来监听
                    //xhr.status---服务器响应状态   xhr.readyState---ajax状态码
                if(xhr.status==200&&xhr.readyState==4){
                    //响应成功
                    var data=xhr.responseText;
                    var stus=eval(data);
                    alert(stus[0].name)
                }
            }
（4）发送请求
           xhr.send(null);


=============================================================================
（三）localStorage的使用
1、localStorage用法
    if(window.localStorage){
       alert('这个浏览器支持本地存储');
    }else{
       alert('这个浏览器支持不本地存储');
    }
2、
（1）设置值：
   localStorage.a=3;
   localStorage["a"]="sfsf";//覆盖上面的值（即是：修改值）
   localStorage.setItem("b","isaac");
（2）获取值
   var a1=localStorage["a"];
   var a2=localStorage.a;
   var b=localStorage.getItem("b");
（3）删除值
   localStorage.removeItem("a");
（4）查询值
   通过localStorage.key(i)---取出所有key
          
=============================================================================
（四）Cookie的使用
1、cookie不适合大量的数据存储
2、cookie的生命周期在关闭浏览器时就结束了
3、cookie中的空格被解析为：%20（在cookie中尽量避免使用空格，以免乱码【新的浏览器不会出现此问题】）
4、
（1）增：document.cookie="userId=828";
（2）查：
         a、var strCookie=document.cookie;——查询所有的
         b、var strCookies=document.cookie;
            var arr=strCookies.split(";")——使之经过切割后变为数组
            alert（arr[0]）
            alert（（arr[0].split（“=”））[0]）


5、设置cookie的过期时间（只能用格林尼治时间）
       <script language="JavaScript" type="text/javascript">
            //获取当前时间
            var date=new Date();


            //用户再次刷新的时间
            var expireDays=30;
 
            //将date设置为10天以后的时间
            date.setTime(date.getTime()+expireDays*24*3600*1000);——现在的时间+延长的时间


            //将userId和userName两个cookie设置为10天后过期
            document.cookie="userId=828; expires="+date.toGMTString();
       </script>