Native JS implements Ajax and GET and Post methods

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