返回顶部

收藏

原始js实现ajax

更多

闲来无事,自从接触jquery后,就很少再这样写过js代码,今天突然手痒痒,随便写了几句,再者,想让自己回想起从前用原始js写代码的过程

window.lcq = {};
(function(obj) {
    String.prototype.trim = function() { return this.replace(/(^\\s*)|(\\s*$)/g, ""); }
    obj = {
        //根据ID,获取对象
        getObject: function(id) { return document.getElementById ? document.getElementById(id) : document.all(id); },
        ajax: function(_options) {
            var _xmlHttp = this.createXMLHttpRequest();
            _xmlHttp.open(_options.method, _options.url, true);
            _xmlHttp.setRequestHeader("cache-control", "no-cache");
            if (_options.method.toUpperCase() == "POST") { _xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); }
            _xmlHttp.onreadystatechange = function() {
                if (_xmlHttp.readyState == 4 && _xmlHttp.status == 200) {
                    var response = null;
                    switch (_options.dataType.toUpperCase()) {
                        case "json":
                            response = eval(_xmlHttp.responseText);
                            break;
                        case "xml":
                            response = _xmlHttp.responseXML;
                            break;
                        case "html":
                            response = _xmlHttp.responseText;
                            break;
                        default:
                            response = _xmlHttp.responseText;
                            break;
                    }
                    if (typeof (_options.success) != 'undefined') { _options.success(_xmlHttp.responseText); }
                }
                else if (_xmlHttp.readyState == 4) {
                    var codes = ['500', '501', '502', '503', '504', '505', '404'];
                    if (codes.join(',').indexOf(_xmlHttp.status.toString()) >= 0 && typeof (_options.error) != 'undefined') { _options.error(_xmlHttp.status, _xmlHttp.responseText); }
                }
            }
            var query = [], data;
            for(var key in _options.data) {query[query.length] = encodeURI(key) + "=" + encodeURIComponent(_options.data[key]);}
            data = query.join('&');
            //开始发送数据
            _xmlHttp.send(data);
        },
        //get方式请求
        get: function(_url,
                      _data,
                      callback) {
            this.ajax({ url: _url,
                data: _data,
                dataType: "html",
                method: "GET",
                success: callback
            });
        },
        //post方式请求
        post: function(_url,
                       _data,
                       callback) {
            this.ajax({ url: _url,
                data: _data,
                method: "POST",
                dataType: "html",
                success: callback
            });
        },
        createXMLHttpRequest: function() { if (window.ActiveXObject) { var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"]; for (var i = 0; i < aVersions.length; i++) { try { return new ActiveXObject(aVersions[i]); } catch (oError) { continue; } } } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } throw new Error("XMLHttp object could not be created."); }
    }
    //对象引用
    $ = obj;
})(window.lcq)
//简单的用法
function _testAjax(obj) {
    obj.disabled = true;
    obj.value = "正在提交......";
    $.ajax({ url: "/xmls/url.xml",
        method: "GET",
        data: "",
        dataType: "html",
        success: function(response) {
            obj.disabled = false;
            obj.value = "处理完毕";
            //show(response);
        },
        error: function(response) { alert(response); }

    });
}
function show(message) {document.getElementById("wraper").innerHTML = message;}
//html部分
<div id="wraper" style="border: solid 1px black; height: 100px; width: 600px;">
</div>
<input type="button" value="Ajax测试" onclick="_testAjax(this);" />
//该片段来自于http://outofmemory.cn

标签:javascript,基础

收藏

0人收藏

支持

0

反对

0

»更多 您可能感兴趣的代码
  1. 2012-11-05 21:59:42java获得随机数代码 by 怪兽狂殴奥特曼
  2. 2014-06-07 13:02:59不提示直接关闭窗口 by 冬夜微风
  3. 2014-06-07 16:12:19对象数组排序 by 奔小康
  4. 2014-06-07 21:32:54获取一年的第几周 by starstroll
  5. 2014-06-09 17:33:12最简方法,js得到标准时间格式 by GauSir
  6. 2014-06-11 14:56:48规则表达式 by amaker8
  7. 2014-06-11 18:46:29将人民币金额转换为大写 by amaker8
  8. 2014-06-12 12:07:14一般万能的表格光棒效果的代码 by arden
  9. 2014-06-15 19:27:06jQuery焦点图 by huwei
  10. 2014-06-17 15:55:10几种用来检查checkbox是否选中的方法 by 龙堂修罗
  11. 2014-06-18 14:49:07随机DOM元素 by tsl0922

发表评论