• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    自己动手封装的 ajax
    以前开发用了很多AJAX的技术比如EXT,prototype,jQuery等等,但都是开源封装好的AJAX框架。从没真正用过纯正的AJAX,故参照prototyp面向对象思想自己封装了一个AJAX框架。希望能给读者参考、帮助、评价。
    复制代码 代码如下:

    /*
    * 自己封装的ajax
    *
    *
    * @author 姜松
    * @version 1.00 $date:2009-07-02
    *
    * history:
    *
    */
    Object.extend = function(destination, source) {
    for (var property in source) {
    destination[property] = source[property];
    }
    return destination;
    };
    Object.extend(String.prototype, {
    include: function(pattern) {
    return this.indexOf(pattern) > -1;
    },
    startsWith: function(pattern) {
    return this.indexOf(pattern) == 0;
    },
    endsWith: function(pattern) {
    return this.lastIndexOf(pattern) == (this.length - pattern.length);
    },
    empty: function() {
    return /^\s*$/.test(this) || this == undefined || this == null;
    }
    });
    Object.extend(Array.prototype, {
    each: function(iterator) {
    try {
    for (var i = 0, length = this.length; i length; i++) {
    iterator(this[i]);
    }
    } catch (e) {
    if (e != 'break') { throw e };
    }
    },
    clear: function() {
    this.length = 0;
    return this;
    },
    first: function() {
    return this[0];
    },
    last: function() {
    return this[this.length - 1];
    },
    indexOf: function(object) {
    for (var i = 0, length = this.length; i length; i++) {
    if (this[i] == object) {return i};
    }
    return -1;
    },
    size: function() {
    return this.length;
    },
    include: function(object) {
    var found = false;
    this.each(function(value) {
    if (value == object) {found = true; throw 'break';}
    });
    return found;
    }
    });
    function $(element) {
    if(arguments.length > 1) {
    for(var i = 0, elements = [], length = arguments.length; i length; i++) {
    elements.push($(arguments[i]));
    }
    return elements;
    }
    if(typeof element == 'string') {
    element = document.getElementById(element);
    }
    return element;
    };
    var ajax = {
    transport: new Object(),
    options: new Object(),
    getTransport: function() {
    if(window.ActiveXObject) {
    try {
    return new ActiveXObject('Msxm12.XMLHTTP');
    } catch(e) {
    try {
    return new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) {}
    }
    } else if(window.XMLHttpRequest) {
    try {
    return new XMLHttpRequest();
    } catch(e) {}
    }
    },
    setOptions: function(options) {
    ajax.options = {
    method: 'get',
    asynchronous: true,
    contentType: 'application/x-www-form-urlencoded',
    encoding: 'utf-8',
    parameters: ''
    };
    Object.extend(ajax.options, options);
    ajax.options.method = ajax.options.method.toUpperCase();
    },
    request: function(url, options) {
    ajax.transport = ajax.getTransport();
    ajax.setOptions(options);
    this.method = ajax.options.method;
    var params = ajax.options.parameters;
    if (!['GET', 'POST'].include(this.method)) {
    this.method = 'GET';
    }
    if (this.method == 'GET') {
    url = ajax.setParameters(url, params);
    }
    try {
    ajax.transport.open(this.method, url, ajax.options.asynchronous);
    ajax.transport.onreadystatechange = ajax.stateChange;
    ajax.setRequestHeaders();
    this.body = this.method == 'POST' ? params : null;
    ajax.transport.send(this.body);
    } catch (e) {}
    },
    stateChange: function() {
    try {
    var readyState = ajax.transport.readyState;
    if(readyState == 4) {
    var status = ajax.transport.status, transport = ajax, json = ajax.evalJSON();
    if(status == 200) {
    ajax.options['onSuccess'](transport, json);
    } else {
    ajax.options['onFailure'](transport, json);
    }
    }
    } catch (e) {}
    },
    setParameters: function(url, params) {
    if (params typeof params == 'string') {
    url += (url.include('?') ? '' : '?') + params;
    } else if (params typeof params == 'object') {
    for(var param in params) {
    url += (url.include('?') ? '' : '?') + param + '=' + params[param];
    }
    }
    return url;
    },
    setRequestHeaders: function() {
    var headers = {
    'X-Requested-With': 'XMLHttpRequest',
    'Accept': 'application/xml, text/xml, text/html, text/javascript, application/javascript, application/json, text/javascript, text/plain, */*',
    'If-Modified-Since': 'Thu, 01 Jan 1970 00:00:00 GMT'
    };
    this.method = ajax.options.method;
    if (this.method == 'POST') {
    headers['Content-type'] = ajax.options.contentType +
    (ajax.options.encoding ? '; charset=' + ajax.options.encoding : '');
    if (ajax.transport.overrideMimeType
    (navigator.userAgent.match(/Gecko\/(\d{4})/) || [0,2005])[1] 2005) {
    headers['Connection'] = 'close';
    }
    }
    for (var name in headers) {
    ajax.transport.setRequestHeader(name, headers[name]);
    }
    },
    evalJSON: function() {
    try {
    return eval('(' + ajax.transport.responseText + ')');
    } catch (e) {}
    }
    };
    var Form = {
    serialize: function(element) {
    var elements = $(element).all;
    var queryComponents = [];
    for(var i = 0; i elements.length; i++) {
    var parameter = null, method = elements[i].tagName.toLowerCase();
    if(['input', 'select', 'textarea'].include(method)) {
    parameter = Form.Serializers[method](elements[i]);
    }
    if(parameter != null parameter.constructor == Array) {
    var key = encodeURIComponent(parameter[0]);
    var value = encodeURIComponent(parameter[1]);
    queryComponents.push(key + '=' + value);
    }
    }
    return queryComponents.join('');
    },
    request: function(options) {
    var params = this.toQueryParams(options.parameters);
    options.parameters = this.serialize(this.form);
    if(params) {
    options.parameters = options.parameters.concat('' + params);
    }
    if($(this.form).method) {
    options.method = $(this.form).method;
    }
    return new ajax.request($(this.form).action, options);
    },
    toQueryParams: function(params) {
    var queryComponents = [];
    if (params typeof params == 'string') {
    queryComponents.push(encodeURIComponent(params));
    } else if (params typeof params == 'object') {
    for(var param in params) {
    var key = encodeURIComponent(param);
    var value = encodeURIComponent(params[param]);
    queryComponents.push(key + '=' + value);
    }
    }
    return queryComponents.join('');
    }
    };
    Form.Serializers = {
    input: function(element) {
    switch(element.type.toLowerCase()) {
    case 'checkbox':
    case 'radio':
    return this.inputSelector(element);
    default:
    return this.textarea(element);
    }
    },
    inputSelector: function(element) {
    if(element.checked) {
    return [element.name, element.value];
    }
    },
    textarea: function(element) {
    return [element.name, element.value];
    },
    select: function(element) {
    return this[element.type == 'select-one' ?
    'selectOne' : 'selectMany'](element);
    },
    selectOne: function(element) {
    var value = null, option, index = element.selectedIndex;
    if(index >= 0) {
    option = element.options[index];
    value = option.value == (undefined || '') ? option.text : option.value;
    }
    return [element.name, value];
    },
    selectMany: function(element) {
    var value = [];
    for(var i = 0; i element.length; i++) {
    var option = element.options[i];
    if(option.selected) {
    var optvalue = option.value == (undefined || '') ? option.text : option.value;
    value.push(optvalue);
    }
    }
    return [element.name, value];
    }
    };
    function $F(element) {
    this.form = element;
    }
    Object.extend($F.prototype, Form);
    /**************************************************************
    * 测试函数
    */
    function onTest() {
    //get提交方法
    var params = new Object();
    params.ss = '张三';
    new ajax.request('ajax.do?method=doGet', {
    onSuccess: function(transport) {
    alert(transport.evalJSON().xx)
    },
    parameters: params
    });
    //post form提交方法
    var params = new Object();
    params.idd = 1000;
    params.names = '张三'
    new $F('form').request({
    onSuccess: function(transport) {
    alert(transport.evalJSON().xx);
    },
    parameters: params
    });
    }
    您可能感兴趣的文章:
    • ajax的工作原理以及异步请求的封装介绍
    • js原生Ajax的封装和原理详解
    • 基于jQuery的ajax方法封装
    • 原生Javascript封装的一个AJAX函数分享
    • 封装了jQuery的Ajax请求全局配置
    • 一个封装的Ajax类
    • 关于Ajax的原理以及代码封装详解
    上一篇:ajax poller
    下一篇:Ajax 对象 包含post和get两种异步传输方式
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    自己动手封装的 ajax 自己,动手,封,装的,ajax,