一、ajax(与服务器进行局部异步刷新)
执行流程:
1:ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数,对状态的改变事件(readyStatechange)监听)
2:等待用户执行操作(例如点击)
3:触发了事件处理代码
4:调用ajax引擎
5:发送请求,ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6:服务器接受到了处理请求--开始处理
7:服务器将处理结果(xml或者文本)返回给了ajax引擎
8:监听相应数据
2,给localStorage赋值
3,获得localStorage的值
执行流程:
1:ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数,对状态的改变事件(readyStatechange)监听)
2:等待用户执行操作(例如点击)
3:触发了事件处理代码
4:调用ajax引擎
5:发送请求,ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6:服务器接受到了处理请求--开始处理
7:服务器将处理结果(xml或者文本)返回给了ajax引擎
8:监听相应数据
9:监听器对GUI数据更新
ajax的重要参数
重要参数:
onreadystatechange——注册一个监听器(绑定时间处理函数)
readyState返回与服务器通讯状态码Number类型
0对象创建,但是没有初始化
1对象建立但是没有调用
2发送数据(send方法被调用)
3数据传送中
4响应结束
responseText——服务器返回的文本
responseXML——服务器返回的xml dom对象
status 获得状态码
一段简单的ajax代码实例如下:
<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button οnclick="fun();">click me</button>
<script type="text/javascript">
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function fun(){
//1:获得ajax核心对象
var xhr=getXmlHttpRequest();
//打开一个新的请求
xhr.open('get','students.json',true);
//添加一个监听器
//监听器---ajax核心对象状态
xhr.onreadystatechange=function(){
//状态码来监听
//xhr.status---服务器响应状态 ---200 xhr.readyState---ajax状态码 4
if(xhr.status==200&&xhr.readyState==4){
//响应成功
var data=xhr.responseText;
var stus=eval(data);
alert(stus[0].name)
}
}
//发送请求
xhr.send(null);
}
</script>
</body>
</html></span>
注:1.cookie都是单会话cookie,浏览器关闭后这些cookie将会丢失
2.document.cookie="userId=828; expires=GMT_String";其中GMT_String是以GMT格式表示的时间字符串,这条语句就是将userId这个cookie设置为GMT_String表示的过期时间,超过这个时间,cookie将消失,不可访问。
二、cookie的用法
<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
/* //设置cookie,把字符串赋值给cookie
document.cookie ="name=luccy";
document.cookie ="age=32";
var strCookie=document.cookie;
alert(strCookie);
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
var userId;
//遍历cookie数组,处理每个cookie对</span>
<span style="font-size:18px;">for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
for(var j = 0;j< arr.length;j++){
alert(arr[j]);
}
}
*//**
* 获取当前事件
* 设置cookie过期时间
* *//*
var date=new Date();
var expireDays=10; //当用户再次登录刷新时间,十秒</span>
<span style="font-size:18px;"> //将date设置为10秒以后的时间
date.setTime(date.getTime()+expireDays*1000);
//将userId和userName两个cookie设置为10秒后过期
document.cookie="name=luccy; expires="+date.toGMTString();
*/
/* *
* 获取当前事件
* 删除/重置cookie
* */
/* var data = new data();
data.setTime(data.getTime()-1000);
document.cookie="name=luccy; expire="+date.toGMTString();*/
</script>
</html></span></span></span>
三、localStorage的用法
1.测试浏览器是否支持localStorage
<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:18px;">if(window.localStorage){
alert('这个浏览器支持本地存储');
}else{
alert('这个浏览器支持不本地存储');
}</span></span></span>
2,给localStorage赋值
<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:18px;"> ①.localStorage.name = "json";//方法一
②.localStorage["age"] = "18";//方法二
③.localStorage.setItem("age","32");//方法三</span></span></span>
3,获得localStorage的值
<span style="font-size:18px;"><span style="font-size:24px;"> <span style="font-size:14px;">①.var name = localStorage.name;//方式一
②.localStorage.getItem("age");//方式二</span>
</span></span>
4,清除ocalStorage的值
<span style="font-size:18px;"><span style="font-size:24px;"><span style="font-size:14px;"> ①.localStorage.removeItem("a")</span>
</span></span>
5.通过localStorage.key(i)---取出所有key ,代码如下
<span style="font-size:18px;"><span style="font-size:24px;">l<span style="font-size:18px;">ocalStorage.getItem( localStorage.key(i))--通过key取 出所有value
var localStorage=window.localStorage;
for(var i=0;i<localStorage.length;i++){
alert(localStorage.key(i)+" "+localStorage.getItem( localStorage.key(i)))
}</span></span></span>