ajax的简单介绍，

来源：互联网发布：spss是什么软件编辑：程序博客网时间：2024/04/29 08:55

一、ajax（与服务器进行局部异步刷新）
执行流程：
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 onclick="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>

0 0