JavaScript封裝Ajax（類JQuery中$.ajax()方法）

最後更新：2015-07-02 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：javascript ajax

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>

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

JavaScript封裝Ajax（類JQuery中$.ajax()方法）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More