• 原生js写Ajax


    //原生js写ajax就像打电话

    //打电话分下面4步
    //1.拿出手机
    //2.拨号
    //3.说话
    //4.挺对方说话

    //ajax也分下面4步
    //1.创建ajax对象
    //2.连接到服务器
    //3.发送请求(告诉服务器我要什么文件)
    //4.接收返回值

    下面是原生js写ajax的具体写法

    <script>
    window.onload=function()
    {
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function()
        {
            //1.创建ajax对象
            //只兼容非ie6的浏览器,在ie6浏览器上运行会提示没有被定义
            //var oAjax = new XMLHttpRequest();//这才是ajax实际的请求
            //alert(oAjax);
            
            //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用,会报错。
            //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
            //alert(oAjax);
            
            //鉴于上面出现的问题,可以采取下面的方法解决,用if判断是否为IE6浏览器
            if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6浏览器。()里面加window的原因下面会有描述。
            {
                var oAjax = new XMLHttpRequest();//创建ajax对象
            }
            else//如果没有XMLHttpRequest,那就是IE6浏览器
            {
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
            }
            
            //2.连接服务器
            //open(方法、文件名、异步传输)
            //方法:
                //传输方式是get方式还是post方式。
            //文件名
                //告诉服务器要读哪个文件
            //异步传输
                //异步:多件事一件一件的做
                //同步:多件事情一起进行
                //但是js里面的同步和异步和现实的同步异步相反。
                    //同步:多件事一件一件的做
                    //异步:多件事情一起进行
            //ajax天生是用来做异步的
            
            oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。
            
            //3.发送请求
            oAjax.send();
            
            //4.接收返回
            //客户端和服务器端有交互的时候会调用onreadystatechange
            oAjax.onreadystatechange=function()
            {
                //oAjax.readyState  //浏览器和服务器,进行到哪一步了。
                    //0->(未初始化):还没有调用 open() 方法。
                    //1->(载入):已调用 send() 方法,正在发送请求。
                    //2->载入完成):send() 方法完成,已收到全部响应内容。
                    //3->(解析):正在解析响应内容。
                    //4->(完成):响应内容解析完成,可以在客户端调用。
                if(oAjax.readyState==4)
                {
                    if(oAjax.status==200)//判断是否成功,如果是200,就代表成功
                    {
                        alert("成功"+oAjax.responseText);//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容
                    }
                    else
                    {
                        alert("失败");
                    }
                }
            };
        }
    };
    
    /*//上面if里面需要些window的原因
    //js里面的变量和属性
    
    var a = 12;
    alert(a);//页面上弹出12很正常,而实际上输出的是下面的写法,是属于window的,只是window能省就省了。
    alert(window.a);//输出结果是一样的
    window.alert(window.a);
    
    //想a这种全局变量实际上是winow的一个属性。
    //如果不定义一个变量a直接像下面那样输出a
    alert(a)//系统会报错,而不是undefind,因为没有定义变量a。
    alert(window.a);//如果是这样写,系统就不会报错了,会显示undefind。
    
    //出现上面的原因是因为直接写a从根上就找不到a,而前面加上window只是找不到window的属性a了。*/
    
    
    </script>

    但是,不能每次用ajax的时候都写那么多代码,要把这段ajax代码封装起来,方便使用。

    封装ajax

    //最后把代码封装起来,封装起来以后,要给这个函数加上一个参数url.参数是为了替换要读取的文件名
    function ajax(url,fnSucc)
    {
        if(window.XMLHttpRequest)
            {
                var oAjax = new XMLHttpRequest();
            }
            else
            {
                var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
            }
            oAjax.open("GET",url,true);//把要读取的参数的传过来。
            oAjax.send();
            oAjax.onreadystatechange=function()
            {
                if(oAjax.readyState==4)
                {
                    if(oAjax.status==200)
                    {
                        fnSucc(oAjax.responseText);//成功的时候调用这个方法
                    }
                    else
                    {
                        if(fnfiled)
                        {
                            fnField(oAjax.status);
                        }
                    }
                }
            };
    }

    将封装的ajax调用

    <script src="new_ajax.js"></script>//引用封装的ajax文件
    <script>
    window.onload=function()
    {
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function()
        {
            ajax('a.txt',function(str){//读取a.txt文件里面的内容
                    alert(str);//将读取的内容输出
                })            
        }
    };
    
    </script>
  • 相关阅读:
    MySql
    Zookeeper
    Kafka
    Mybatis
    Spring/Spring MVC
    Spring Boot/Spring Cloud
    网络
    设计模式
    Strassen algorithm(O(n^lg7))
    dynamic programming:find max subarray
  • 原文地址:https://www.cnblogs.com/Strive-count/p/6386074.html
Copyright © 2020-2023  润新知