html5_ajax

html5-ajax

1、html5表单
1）指向表单元素：如<input>标签等可以不被<form>包起来
<form id="myForm" action="http://www.baidu.com"></form>
<input type="text" form="myForm">
2）关于email：在网页中可以验证Email的格式，但只是验证是否有@和.的符号
<form id="myForm" action="http://www.baidu.com"></form>
<input type=email name=email form="myForm">
3）关于url：在网页中可以验证输入的网址格式是否正确，其确认以“http：//”开头为正确格式。
<form id="myForm" action="http://www.baidu.com"></form>
<input type=url name=url form="myForm">
4）关于时间：在网页中可以进行时间的选择，如月份，第几周
<input type="date">
<input type=time>
<input type=month>
<input type=week>
5）关于number：max;设置最大数值，min：设置最小数值，step：设置数字之间的转换相差2，value:设置默认显示的数字
<input type="number" max=10 min=0 step=2 value="5"/>
6）关于placeholder：文本框中的默认文本在鼠标点击时会消失
<input id=placeholders placeholder="点击我会清除">
7）关于maxLength：设置输入内容的最大值
<textarea id="notes" name="notes" maxLength="10"></textarea>
8）关于提示文字：oninvalid="setCustomValidity('aaaa')" 。可以自定义提示文字的内容
<input id=placeholder name=require1 required="required" oninvalid="setCustomValidity('aaaa')"  form="myForm">
9)关于autofocus自动获得焦点：在网页上光标自动在文本框中，以提示用户。
maxLength<textarea id="notes" name="notes" maxLength="10" autofocus="true"></textarea>
2、Ajax
优势：
1：使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
2：AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
执行流程：
1：ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数，对状态的改变事件(readyStatechange)监听)
2：等待用户执行操作(例如点击)
3：触发了事件处理代码
4：调用ajax引擎
5：发送请求，ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6：服务器接受到了处理请求--开始处理
7：服务器将处理结果(xml或者文本)返回给了ajax引擎
8：监听相应数据
9：监听器对GUI数据更新
重要参数：
onreadystatechange——注册一个监听器(绑定时间处理函数)
readyState返回与服务器通讯状态码Number类型
0对象创建，但是没有初始化
1对象建立但是没有调用
2发送数据(send方法被调用)
3数据传送中
4响应结束
responseText——服务器返回的文本
responseXML——服务器返回的xml dom对象
status 获得状态码
示例：
<button οnclick="fun()">点击</button>
            <script type="text/javascript">
                //判断兼容性问题
            function getXmlHttpRequest(){
                var xhr=null;
                if((typeof XMLHttpRequest)!='undefined'){
                    xhr=new XMLHttpRequest();//dom
                }else{
                    xhr=new ActiveXObject('Microsoft.XMLHttp');//IE
                }
                return xhr;
            }
    function fun() {
        //获得ajax核心对象
        var xhr = getXmlHttpRequest();
        //打开一个新的请求
        xhr.open('get','students.json',true);
        //添加一个监听器
        xhr.onreadystatechange = function () {
            if(xhr.status == 200 && xhr.readyState == 4) {
                var data = xhr.responseText;//responseText——服务器返回的文本
                var stus = eval(data);//用函数eval()将字符串转化为object——students.json中的内容为字符串
                alert(stus[0].name);//显示查询内容
            }
        }
        //发送请求
        xhr.send(null);
    }
</script>
3、localStorage用法
1）测试浏览器兼容性
if(window.localStorage){
  alert('这个浏览器支持本地存储');
}else{
alert('这个浏览器支持不本地存储');
}
2）localStorage增，删 ，查，改
localStorage.a=3;//设置a为"3"
localStorage["a"]="sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
4、Cookie
<cookie名>=<值>，用字母和数字命名。不能直接删掉一个 Cookie，但是可以用设定失效日期早于现在时刻的方法来间接删掉它。Cookies 只能由本站点下的网页来访问，来自其他站点或同一站点下未经授权的区域的网页，是不能访问的。
1）设置cookie，可以把下面这样一个字符串赋值给document.cookie：
document.cookie="userId=828 "
2）用escape()函数进行编码，能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”
document.cookie="str="+escape("I love ajax");
一般来说，如果设定 Cookie 时不用 escape()，那获取 Cookie 时也不用 unescape()。
3）如果要改变一个cookie的值，只需重新赋值
document.cookie="userId=929";——这样就将名为userId的cookie值设置为了929。
4）获取cookie的值
var strCookie=document.cookie;——这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie
5）将多cookie切割为多个名/值对
var arrCookie = strCookie.split(";");
6）取得单个cookie值
var arr = arrCookie[0].split("=");
7）给cookie设置终止日期
设置为10天后过期，可以这样实现：
<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>
8）删除cookie，可以将其过期时间设定为一个过去的时间
<script language="JavaScript" type="text/javascript">
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-1000);
//将userId这个cookie删除   重置
document.cookie="userId=828; expire="+date.toGMTString();
</script>