ajax的简单介绍，

最新推荐文章于 2022-03-29 01:29:05 发布

lp_jung

最新推荐文章于 2022-03-29 01:29:05 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lp_607/article/details/48720373

一、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>