专栏首页cwl_Java前端基础-Ajax框架的封装

前端基础-Ajax框架的封装

第6章 Ajax框架的封装

如果一个页面中有十几个地方用到Ajax,那么我们需要写十几次open()、十几次send()、十几次获取xhr对象; 代码重复相当多,而凡是有代码重复的地方,就有封装的可能;

创建新文件: ajax.js

6.1 餐前甜点

之前我们为了方便使用,封装过使用指定 id 获取DOM对象及获取xhr对象; 我们对之前的代码进行一次修改,使其更加优雅;

定义一个自调用匿名函数

(function(){
	//code……
})();

为什么 定义一个自调用匿名函数? 在实际项目开发中,如果一个项目同时引入了多个javascript框架,可能会产生命名的冲突问题, 如果使用自调用匿名函数来封装javascript框架,所有变量处于封闭状态,就可以避免这个问题。

封装一个$函数,用于获取指定id的dom对象

(function(){
	//封装$函数,获取指定 id 的DOM对象并返回给调用者
    var $ = function(id){
        return document.getElementById(id);
    }
})();

我们在前台代码中引入并使用ajax.js

<body>
   <div id="d">div</div>
</body>
<script src="ajax.js"></script>
<script>
    alert($('d'));
</script>

报错原因: 函数 $ 为局部变量;

让 $ 局部变量全局化

(function(){
    //封装$函数,获取指定 id 的DOM对象并返回给调用者
    var $ = function(id){
        return document.getElementById(id);
    }
    //将局部变量 $ 复制给顶层window对象,使其成为全局变量
    window.$ = $;
})();

6.2 封装get方法

ajax代码我们都会写,问题是: 如何把代码放进匿名函数中并且外部可以调用?

(function(){
    //封装$函数,获取指定 id 的DOM对象并返回给调用者
    var $ = function(id){
        return document.getElementById(id);
    }
    //将局部变量 $ 复制给顶层window对象,使其成为全局变量
    window.$ = $;

    //声明gets方法
    var gets = function(url){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                alert(xhr.responseText);
            }
        }
        xhr.open('get',url);
        xhr.send();
    }
    //将局部变量 gets 复制给顶层window对象,使其成为全局变量
    window.ajax_get = gets;
})();

这样写并没有语法错误,也可以正常调用,但是,随着功能的不断增加, 我们的window对象也会被赋予各种各样的值,最终还是会导致混乱;

在JavaScript中一切都是对象

$ 也可以被当作对象,我们就可以将ajax函数赋值给 $ ;

(function(){
    //封装$函数,获取指定 id 的DOM对象并返回给调用者
    var $ = function(id){
        return document.getElementById(id);
    }

    //声明ajax函数,并复制给$;
    $.get = function(url){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                alert(xhr.responseText);
            }
        }
        xhr.open('get',url);
        xhr.send();
    }
    window.$ = $;
})();

前台调用

<script>
    $.get('/test');
</script>

6.3 解决获取Ajax对象的兼容性

修改上节代码:

//获取Ajax对象
$.init = function(){
    try{return new XMLHttpRequest()}catch(e){};
    try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
}

//声明ajax函数,并复制给$;
$.get = function(url){
    var xhr = $.init(); //调用init,获取ajax对象
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            alert(xhr.responseText);
        }
    }
    xhr.open('get',url);
    xhr.send();
}

6.4 获取Ajax的返回值

前台调用:

<script>
    var cb = function(msg){
        $('d').innerHTML = msg;
    }
    $.get('/test',cb);
</script>

修改 ajax.js

$.get = function(url,callback){
    var xhr = $.init(); //调用init,获取ajax对象
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            callback(xhr.responseText);
        }
    }
    xhr.open('get',url);
    xhr.send();
}

前台调用修改:

<script>
    // var cb = function(msg){
    //     $('d').innerHTML = msg;
    // }
    $.get('09-1.php',function(msg){
        $('d').innerHTML = msg;
    });
</script>

6.5 配合后台获取不同的返回值类型

修改 ajax.js

//声明ajax函数,并复制给$;
$.get = function(url,callback,type=null){
    var xhr = $.init(); //调用init,获取ajax对象
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(type==null){
                callback(xhr.responseText);
            }
            if(type=='json'){
                var t = JSON.parse(xhr.responseText);
                callback(t);
            }
        }
    }
    xhr.open('get',url);
    xhr.send();
}

前台调用,代码修改:

<script>
    $.get('/test',function(msg){
        console.log(msg);
    },'json');
</script>

6.6 作业

封装 POST 方法到 ajax.js

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速学习Linux-MySQL5.7的安装

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • 速读原著-Android应用开发入门教程(使用am工具启动Android应用程序)

    除了在 GUI 界面中启动应用程序之外,在 Android 的命令行终端(可以使用 adb shell 进行连接)也可以使用 am 工具启动应用程序。

    cwl_java
  • 经典面试题-Java中,int和Integer有什么区别

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • Ajax与Comet

    Ajax(Asynchronous JavaScript + XML的简写)可以向服务器请求数据而无需卸载(刷新)页面,带来更好的用户体验。 Ajax技术的...

    奋飛
  • Python入门之并发编程IO模型

    Jetpropelledsnake21
  • 犀牛鸟人物 | 专访中国科学院计算技术研究所敖翔

    ? 【导读】敖翔,博士,中国科学院计算技术研究所,中科院智能信息处理重点实验室副研究员、硕士生导师。2018年获得CCF-腾讯犀牛鸟基金。主要研究领域为金融大...

    腾讯高校合作
  • 爱奇艺弹幕解码 JS+ArrayBuffer+ungzip+utf8ArrayToStr

    Eller
  • 记录一个基于ThinkPHP网站被入侵到溯源的过程

    知道这个情况后,立即翻身起来,让朋友发给我必要的信息,把网站的日志下载到本地,因为网站本身的访问量不是很大,所以直接使用 notepad++ 来手动分析。

    周俊辉
  • 知识点梳理

    小胖
  • CentOS7下mysql5.6修改默认编码

    参考原文教程:Centos7下修改mysql5.6编码方式 解决网站中文显示问号 解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券