JavaScript封装Ajax（类JQuery中$.ajax()方法）

最新推荐文章于 2021-09-12 16:53:15 发布

herbertyoung

最新推荐文章于 2021-09-12 16:53:15 发布

阅读量906

点赞数 1

分类专栏： JavaScript 文章标签： javascript ajax

本文链接：https://blog.csdn.net/yhb241/article/details/46728479

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

ajax.js

(function(exports, document, undefined){
    "use strict";
    function Ajax(){
        if(!(this instanceof Ajax)) return;
        return this;
    }
    Ajax.prototype = {
        init: function(opts){
            opts = opts || {};
            this.opts = opts;
            this.opts.type = opts.type || 'get';
            this.opts.url = opts.url || '';
            this.opts.data = opts.data || '';
            this.opts.dataType = opts.dataType || 'text';
            this.opts.async = opts.async || true;
            this.opts.success = opts.success || null;
            this.opts.error = opts.error || null;
            this.xhr = this.createXMLHttpRequest.call(this);
            this.initEvent.call(this);
            return this;
        },
        ajax: function(opts){
            this.init.apply(this, arguments);
            this.open.call(this);
            this.send.call(this);
        },
        createXMLHttpRequest: function(){
            var xhr;
            try{
                xhr = new XMLHttpRequest();
            }catch(e){
                console.log(e);
            }
            return xhr;
        },
        initEvent: function(){
            var _this = this;
            this.xhr.onreadystatechange = function(){
                if(_this.xhr.readyState == 4 && _this.xhr.status == 200){
                    if(_this.xhr.status == 200){
                        if(_this.opts.dataType === 'text' || _this.opts.dataType === 'TEXT'){
                            _this.opts.success && _this.opts.success(_this.xhr.responseText, 'success', _this.xhr);
                        }else if(_this.opts.dataType === 'xml' || _this.opts.dataType === 'XML'){
                            _this.opts.success && _this.opts.success(_this.xhr.responseXML, 'success', _this.xhr);
                        }else if(_this.opts.dataType === 'json' || _this.opts.dataType === 'JSON'){
                            _this.opts.success && _this.opts.success(JSON.parse(_this.xhr.responseText), 'success', _this.xhr);
                        }
                    }else if(_this.xhr.status != 200){
                        _this.opts.error && _this.opts.error(_this.xhr, 'error');
                    }
                }
            }
        },
        open: function(){
            if(this.opts.type === 'GET' || this.opts.type === 'get'){
                var str = (typeof this.opts.data === 'string') && this.opts.data || this.objectToString.call(this, this.opts.data),
                    url = (str === '') && this.opts.url || (this.opts.url.split('?')[0] + '?' + str);
                this.xhr.open(this.opts.type, url, this.opts.async);
            }else if(this.opts.type === 'POST' || this.opts.type === 'post'){
                this.xhr.open(this.opts.type, this.opts.url.split('?')[0], this.opts.async);
            }
            return this;
        },
        send: function(){
            if(this.opts.type === 'GET' || this.opts.type === 'get'){
                this.xhr.send();
            }else if(this.opts.type === 'POST' || this.opts.type === 'post'){
                var str = (typeof this.opts.data === 'string') && this.opts.data || this.objectToString.call(this, this.opts.data);
                this.xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                this.xhr.send(str);
            }
        },
        objectToString: function(data){
            if(typeof data !== 'object') return data;
            var str = '';
            for(var prop in data){
                str += '&' + prop + '=' + data[prop];
            }
            return str.slice(1);
        }
    }
    exports.Ajax = Ajax;
})(window, document);

ajax.php

<?php

$c = $_REQUEST['c'];
$arr = array(
    'a'=>2014,
    'b'=>array('c'=>$c)
);
echo json_encode($arr);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <script src="ajax.js"></script>
    <script>
        new Ajax().ajax({
            type: 'get',
            url: 'ajax.php?c=123',      // 如果是get方式并且url包含参数，其参数会被data替代
            // data: 'c=456',           // data参数格式可以为字符串或对象
            // data: {c: 456},
            dataType: 'json',
            async: false,
            success: function(data, status, xhr){
                console.log(data);
            },
            error: function(xhr, status){
                console.log(xhr);
            }
        });
        new Ajax().ajax({
            type: 'post',
            url: 'ajax.php?c=123',      // 如果是get方式并且url包含参数，其参数会被data替代
            data: 'c=456',              // data参数格式可以为字符串或对象
            // data: {c: 456},
            dataType: 'text',
            success: function(data, status, xhr){
                console.log(data);
            },
            error: function(xhr, status){
                console.log(xhr);
            }
        });
    </script>
</body>
</html>