• [Js]Ajax


    一、什么是Ajax

    不刷新的情况下读取数据或提交数据

    (最早出现ajax:谷歌地图,拖动一下出现一片新的视野)

    应用:用户注册、在线聊天、微博

    特性:只能从服务器上去读取数据(所以我们需要配置自己的服务器程序AMP)

    二、使用Ajax

    1.基础:请求并显示静态TXT文件

    btn.onclick=function(){

        ajax('abc.txt',function(str){     

            alert(str);

        });

    }

    ①Ajax里面文件的编码要和页面的编码一致

    ②缓存、阻止缓存(好处大于缺点,所以不能什么时候都清缓存)

    缓存能帮助我们加速网络访问,所谓缓存,就是服务器上这个文件,它只读一次,第二次就从你的硬盘里、缓存里直接去拿,而不是真的通过网络来请求

    有时候我们需要阻止缓存(比如服务器上东西变化了,但客户端请求来的还是原来的东西),办法如下,加时间戳:

    ajax('abc.txt?t='+new Date().getTime(),function(str){});    //new Date().getTime()为现在的毫秒数,用户绝对不可能在1毫秒内点两次,所以每次请求的t都不一样

    2.动态数据:请求Js(或json)文件

    Ajax从服务器上读取的所有东西都是以文本的形式(字符串)存在的,如何转换?

    eval()计算字符串里的值

    ajax('abc.txt',function(str){     

            var arr=eval(str);

            alert(arr);

    });

    例子:分页

    <ul id="list">

       

    </ul>

    <a href="#"></a>

    <a href="#"></a>

    <a href="#"></a>

    window.onload=function(){

        var oUl=getElementById("list");

        var aBtn=getElementsByTagName("a");

        var i;

        for(i=0;i<aBtn.length;i++){

            aBtn[i].index=i;

            aBtn[i].onclick=function(){

                ajax('page'+(this.index+1)+'.txt',function(str){

                    var aData=eval(str);

                    oUl.innerHTML='';

                    for(i=0;i<aData.length:i++){

                        var oLi=document.createElement("li");

                        oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';

                        oUl.appendChild(oLi);

                    }

                });

            };

        }

    };

    三、Ajax原理

    HTTP请求方法

    1.GET--用于获取数据(如浏览贴子) 把数据放在URL(网址)里面来提交     安全性低、容量低、便于分享(将网址发给别人)

    2.POST--用于上传数据(如用户注册) 把数据放在不是URL的地方     安全性一般、容量几乎无限、不便于分享

    四、封装一个自己的Ajax函数

    1.创建Ajax

    2.连接服务器

    3.发送请求

    4.接收返回

    function ajax(url,fnSucc,fnFaild){

        //1.创建

        var oAjax=null;

        if(window.XMLHttpRequest){       //对ie6来说,直接用XMLHttpRequest是不存在的会出错

            oAjax=new XMLHttpRequest();   //ie6以上

        }else{

            oAjax=new ActiveXObject("Microsoft.XMLHTTP");    //ie6

        }

        //2.连接服务器,open(方法,url,是否异步)

        oAjax.open('GET',url,true);

        //3.发送请求

        oAjax.send();

        //4.接收返回 OnReadyStateChange

        oAjax.onreadystatechange=function(){       //onreadystatechange事件

            if(oAjax.readyState==4){      //readyState属性:请求状态 4是完成(完成不代表成功)

                if(oAjax.status==200){      //status属性:请求结果 200代表成功

                    fnSucc(oAjax.responseText);    //responseText属性:服务器发回给我们的内容

                }

                else{

                    if(fnFaild){

                        fnFaild();

                    }

                }

            }

        };       

    };

  • 相关阅读:
    Python环境管理(虚拟环境)/包管理工具
    Java面试题集锦
    python跟踪脚本运行过程(类似bash shell -x)
    【ClickHouse问题】更新表字段类型为Nullable(Int32)的列值,最终结果都是固定一个值:93147008???
    【ClickHouse】0:clickhouse学习4之表相关操作
    【ClickHouse】0:clickhouse学习3之时间日期函数
    【ClickHouse】0:clickhouse学习2之数据类型
    【ClickHouse】0:clickhouse学习1之数据引擎(数据库引擎,表引擎)
    【ClickHouse】7:clickhouse多实例安装
    【ClickHouse】6:clickhouse集群高可用
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3598783.html
Copyright © 2020-2023  润新知