AJax的简单底层实现

最新推荐文章于 2023-02-15 09:44:34 发布

programisnewstar

最新推荐文章于 2023-02-15 09:44:34 发布

阅读量226

点赞数

分类专栏：前端 js 文章标签： ajax 前端 jquery ajax

本文链接：https://blog.csdn.net/isWaynenewlife/article/details/100570048

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

AJax的简单底层实现

ajax的全称是"Asynchronous javaScript and XMl"(异步的javaScript和XML)

作用

**提高web程序性能:**ajax与传统from表单提交数据不同,ajax通过XMLHttpRequest对象会根据用户的需求提交用户想要提交的数据

**提高用户体验:**由于明确了提交所需求数据的量,而不是整个页面所有数据重新刷新.界面响应的速度得到提升

**减轻服务器端和宽带的负荷:**ajax最大的作用来自于他的异步功能,ajax会单独在客户端开辟一个工作空间将传统模式下在服务器端的工作搬至自己的工作空间处理.一方面提高工作效率,另一方面会减少服务器与宽带的负担

底层的简单实现

//ajax封装
<body>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var obj={
            //请求地址
            url:"js/data.json?a=1",
            //请求方式
            type:"get",
            //是否异步?默认true
            asyn:"true",
            //请求的参数
            data:{
                name:"xuxiezou",
                pwd:"123456",
            },
            //响应成功后执行的代码
            success:function(result){
                console.log(result);
            }
        }
        //调用ajax
        ajax(obj);

        function ajax(obj){
            //1创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            //2准备请求
            //利用formatParams方法格式化参数:
            var params = formatParams(obj.data);
            //判断请求方式,如果为get则讲参数拼接到url之后
            if(obj.type.toUpperCase=="GET"){
                //如果准备的url中有?号则往后面用&拼接参数,如果没有则用?后拼接参数
                obj.url += obj.url.indexof('?') ==-1? '?'+params:'&'+params;
            }
            //准备请求:(请求方式,url,是否异步)
            xhr.open(obj.type,obj.url,obj.asyn);

            //3发送请求,如果请求方式为GET则传参为null
            if(obj.type.toUpperCase=="GET"){
                xhr.send(null);
            //反之则按POST方式,将参数传入xhr.send();
            }else{
                //如果使异步,则提交方式改变,需要使用XHR模仿表单提交
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send(params);
            }
            
            //4接收响应
            if(obj.asyn){
                //如果为异步,则监听接收响应状态的阶段
                xhr.onreadystatechange=function(){
                    //如果接收响应成功
                    if(xhr.readystate == 4){
                        //判断是否成功响应,成功则打印响应文本
                        callback();
                    }else{
                        consloe.log("接收响应失败");
                    } 
                }
            }else{
                //如果为同步,直接判断是否成功响应,成功则打印响应文本
                callback();
            }

            //回调函数,回调函数需要与调用函数写在同一作用域,不然不能共享属性
            function callback(){
                if(xhr.status == 200){
                    obj.success(xhr.responseText); 
                }else{
                    console.log("响应返回失败");
                }
            }
        }


        //拼接参数
        function formatParams(param){
            //准备数组
            var arr = [];
            //遍历参数对象
            for(var key in param){
                //将每个key与value用=连接成字符串
                var p=encodeURIComponent(key) + "=" + encodeURIComponent(param[key]);
                //将每个字符串追加至数组
                arr.push(p);
            }
            //join:使数组的值中间用&拼接成一个字符串
            var params = arr.join("&");
            //返回拼接好了的的参数
            return params;
        }
    </script>
</body>