注册 | 登陆
您的位置:阿里西西 > 前端技术 > 脚本技术 > 详细内容

几个封装Ajax代码的JS脚本实例

  稿源:本站整理   2018-09-05   点击:   撤稿纠错
AJAX的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。

阿里西西web开发网为大家整理了这篇几个封装Ajax代码的JS脚本实例,如果这篇文章在您的工作或学习中有帮助,欢迎常回来看看哦,更多精彩的教程请访问我们的主页,以下是教程浏览:

这两天仔细理解了一下Ajax,然后整理封装了一下,如果有什么不对的地方,请指教,谢谢!

AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

XHR 的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。
虽然Ajax 中的x 代表的是XML,但Ajax 通信和数据格式无关,也就是说这种技术不一定使用XML。

首先是创建一个XHR对象:

function createXHR() {
     if( typeof XMLHttpRequst !== 'undefined') { 
            return new XMLHttpRequest(); 
        } else if( typeof ActiveXObject !== 'undefined') {//否则判断ActiveXObject ,IE6及以下
            if( typeof arguments.callee.activeXString != 'string') {
                var versions = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                for(var i = 0, len = versions.length; i < len; i++) {
                    try {
                         new ActiveXObject(versions[i]);
                         arguments.callee.activeXString = versions[i];
                         break;
                    } catch(ex) {
                        //跳过
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else{
            throw new Error('No XHR object available');
        }
}

IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象,在这些浏览器中创建XHR 对象可以直接实例化XMLHttpRequest 即可,如果是IE6 及以下,那么我们必须还需要使用ActiveX 对象通过MSXML 库来实现。在低版本IE 浏览器可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。将这三个不同版本放在一个数组 里,然后循环尝试创建一个XHR对象,成功则跳出循环,若都不支持则抛出一个错误。具体可以查阅JavaScript 高级程序设计(第3版)。

这里我们要进行封装,然后通过引入调用:

//调用ajax
JR.ajax({
    method : 'post',
    url : 'demo.php',
    data : {
        'name' : 'JR',
        'age' : 22
    },
    timeout : 5000,
    success : function (response) {
        alert(response);
    },
    error : function (status,statusText) {
        alert('获取数据错误!错误代号:' + status + ',错误信息:' + statusText);
    },
    complete : function () {
        alert("请求完成");
    },
    async : true
});

对于封装,自己搜索了一些资料,但还是不是很透彻,所以如果我的封装方式有问题,还望指正,非常感谢!

JR.ajax = function(obj){
    //初始化对象,没填某项时使用默认值代替
    obj = { 
            //请求方法,默认POST
            method: obj.method "POST", 
            //请求的URL 
            url:obj.url "", 
            //发送的请求数据参数 
            data: obj.data "",
            //请求超时的时间,默认5秒
            timeout: obj.timeout 5000, 
            //请求成功时执行的函数
            success: obj.success function(){}, 
            //请求失败时执行的函数 
            error: obj.error function(){}, 
            //请求完成(不管成功还是失败都会调用)时执行的函数 
            complete: obj.complete function(){}, 
            //同步还是异步,默认异步
            async : obj.async true
        }; 
    //创建XHR对象
    var xhr = (function(){
        if( typeof XMLHttpRequst !== 'undefined') { 
            return new XMLHttpRequest(); 
        } else if( typeof ActiveXObject !== 'undefined') {//否则判断ActiveXObject
            if( typeof arguments.callee.activeXString != 'string') {
                var versions = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                for(var i = 0, len = versions.length; i < len; i++) {
                    try {
                         new ActiveXObject(versions[i]);
                         arguments.callee.activeXString = versions[i];
                         break;
                    } catch(ex) {
                        //跳过
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        } else{
            throw new Error('No XHR object available');
        }
    })();
    var requestDone = false,//标志请求是否完成
    //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
    obj.url = obj.url + '?rand=' + Math.random();
   //将名值对转换成字符串
    obj.data = (function(data){
        var arr = [];
        for (var i in data) {
            //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
        }
        return arr.join('&');
    })(obj.data);
    //若是GET请求,则将数据加到url后面
    if (obj.data !== '' && obj.method === 'get') {
        obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
    }
    //在使用XHR对象时,必须先调用open()方法,
    //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
    xhr.open(obj.method, obj.url, obj.async);
    //初始化一个5秒的回调函数,用于取消请求(如果尚未完成的话) 
    setTimeout(function(){ 
        requestDone = true; 
    }, obj.timeout);

    if (obj.async === true) {  //true表示异步,false表示同步
        //使用异步调用的时候,需要触发readystatechange 事件
        //监听文档状态的更新 
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && !requestDone) {   //判断对象的状态是否交互完成
                callback();         //回调
            }
        };
    }
    if (obj.method === 'post') {
        //post方式需要自己设置http的请求头,来模仿表单提交。
        //放在open方法之后,send方法之前。
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);        //post方式将数据放在send()方法里
    } else {
        xhr.send(null);        //get方式则填null
    }
    if (obj.async === false) {  //同步
        callback();
    }
    function callback() {
        if (xhr.status == 200) {  //判断http的交互是否成功,200表示成功
            obj.success(xhr.responseText);            //成功
        } else {
            obj.error(xhr.status,xhr.statusText)    //失败
        }
        //调用完成回调函数 
        opt.complete();
        //避免内存泄漏,清理文档 
        xhr = null;
    }

    return this;
};

如果有自己封装的JS库的话,这个可以作为一个插件引入,至于这点,我将继续努力,将常用到的JS方法封装成自己的JS库,加油!

PS:Ajax请求中POST方式和GET方式的对比:

POST方式

GET方式

每次都执行 同一个地址不重复执行
不可缓存 可被缓存
通过HTTP POST机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址,用户看不到这个过程 把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一 一对应,在URL中可以看到
服务器端用Request.Form 获取提交的数据 服务器端用Request.QueryString 获取变量的值
传送的数据量较大,一般被默认为不受限制,但理论上,因服务器的不同而异 传送的数据量较小,不能大于2KB
安全性较高 安全性非常低
method 为post时,action页面后边带的参数列表不忽视,故不一样 method 为get时,action页面后边带的参数列表会被忽视
数据是放在HTTP主体中的,其组织方式不止一种,有&连接方式,也有分隔符方式,可隐藏参数,传递大批数据,比较方便 它将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数之间用&区分

End. 教程到这里讲完了,阅读是否有所收获呢?本站还提供有封装 ajax 相关的内容,欢迎继续阅读。

更多关于 封装 ajax 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示