Those of you who have used jQuery should have some familiarity with the event binding method Ajax. This method is implemented in jTool, a human library. Here’s a look at the native implementation.

implementation

The following is an Ajax implementation in jTool, a human library. The code uses an underlying method object, Utilities, which is the base class of jTool. If you want to know more, you can click on the source code.

/*
 * ajax
 * typeGET: data format name=baukh&age=29 *type=== POST: data format {name:'baukh'* */ var extend = require(); / var extend = require(); / var extend = require(); / var extend = require()'./extend');
var utilities = require('./utilities');
functionAjax (options) {var defaults = {url: null,// request addresstype: 'GET',// Request type data: null,// pass data headers: {},// request header async:true,// Async beforeSend: utilities.noop,// Async beforeSend: utilities.noop,// Async beforeSend: utilities.noop Utilities. noop,// Execute event after request success error: Utilities. noop// execute event after request failure}; options = extend(defaults, options);if(! options.url) { utilities.error('jTool Ajax: URL cannot be empty ');
        return;
    }
    var xhr = new XMLHttpRequest();
    var formData = ' ';
    if (utilities.type(options.data) === 'object') {
        utilities.each(options.data, function (key, value) {
        if(formData ! = =' ') {
            formData += '&';
        }
        formData += key + '=' + value;
        });
    }else {
        formData = options.data;
    }
    if(options.type === 'GET' && formData) {
        options.url = options.url + (options.url.indexOf('? ') === -1 ?  '? ' : '&') + formData;
        formData = null;
    }
    xhr.open(options.type, options.url, options.async);
    for (var key in options.headers) {
        xhr.setRequestHeader(key, options.headers[key]);
    }
    // xhr.setRequestHeader("Content-Type"."application/x-www-form-urlencoded"); // Execute the pre-send event options.beforeSend(XHR); // Listen on onload and execute the completion event xhr.onload =function() { // jquery complete(XHR, TS) options.complete(xhr, xhr.status); }; // Listen on onreadyStatechange and execute the successful failed event xhr.onreadyStatechange =function() {
        if(xhr.readyState ! = = 4) {return;
        }
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // jquery success(XHR, TS)
            options.success(xhr.response, xhr.status);
        } else{ // jquery error(XHR, TS, statusText) options.error(xhr, xhr.status, xhr.statusText); }}; xhr.send(formData); }function post(url, data, callback) {
    ajax({ url: url, type: 'POST', data: data, success: callback });
}
function get(url, data, callback) {
    ajax({ url: url, type: 'GET', data: data, success: callback });
}
module.exports = {
    ajax: ajax,
    post: post,
    get: get
};
Copy the code

It was the best of times for the front-end, it was the worst of times for the front-end. There are so many front-end frameworks flying around, and as jQuery’s role in the front-end industry slowly weakens, there is always a sense of loss and comfort. Good luck to each other, gentlemen.

Another table component, gridManager, is recommended