首先，我很清楚 jQuery , zepto 等框架的包裝并沒有問題。所以雖然我做得還挺符合 jQuery 規(guī)范的，但其實(shí)我做得這個(gè)事情并沒有實(shí)際上的生產(chǎn)意義，只能用于令人更了解實(shí)現(xiàn)側(cè)的過程，同時(shí)對(duì)我個(gè)人而言算是一種娛樂……
對(duì)于我做得項(xiàng)目，只有很輕小以致于整個(gè)項(xiàng)目代碼也到不了 jquery-min.js 文件大小的情況，才會(huì)使用我自寫的這個(gè)發(fā)起器，并且不會(huì)用源碼版，會(huì)用壓縮版。另外我覺得做一個(gè)前后端連用的框架，所有請(qǐng)求都通過 jsonp 的方式，也許反倒可以簡潔一些。

成都創(chuàng)新互聯(lián)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！為您提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、成都網(wǎng)頁設(shè)計(jì)、微信平臺(tái)小程序開發(fā)、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都app軟件開發(fā)公司是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)公司，等你一起來見證！

var _shaneAjaxRef = { };
/**
 * @author  Shane Loo Li
 * @version 1.1.0, 2019-7-18 Thursday
 * @param   configObj   { }
 * url
 * type
 * data
 * async
 * dataType xml, html, script, text will return text itself. json wil return object. jsonp will run return text as JavaScript.
 * success  function
 * error    function
 * complete function
 */
var shaneAjax = function(configObj)
{
    if (!configObj || !configObj.url) { return; }
    try
    {
        if (configObj.dataType && configObj.dataType == 'jsonp')
        {
            _shaneAjaxRef.goJsonp(configObj);
        }
        else
        {
            _shaneAjaxRef.goRealAjax(configObj);
        }
    }
    catch (err)
    {
        if (configObj.error)
        {
            configObj.error(xmlhttp, '' + err, err);
        }
        if (configObj.complete)
        {
            configObj.complete(xmlhttp, 'error');
        }
    }
};
_shaneAjaxRef.buildNewXmlhttp = function()
{
    return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
}
_shaneAjaxRef.buildDataStr = function(data)
{
    if (!data) return '';
    var result = '';
    for (var key in data)
    {
        if (data[key] instanceof Array)
        {
            var values = data[key];
            for (var i = -1; ++i != values.length; )
            {
                if (result) { result += '&'; }
                result += key + '=' + values[i];
            }
        }
        else
        {
            if (result) { result += '&'; }
            result += key + '=' + data[key];
        }
    }
    return result;
};
_shaneAjaxRef.goJsonp = function(configObj)
{
    var i = -1;
    while (++i != 65536 && window['jsonp' + i]) { }
    window['jsonp' + i] = function(responseDataObj)
    {
        if (configObj.success)
        {
            configObj.success(responseDataObj, 'success');
        }
        delete window['jsonp' + i];
    };

    var reqUrl = configObj.url;
    var dataStr = _shaneAjaxRef.buildDataStr(configObj.data);
    reqUrl += (reqUrl.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp' + i;
    if (dataStr)
    {
        reqUrl += '&' + dataStr;
    }

    var d_script = document.createElement('script');
    d_script.setAttribute('src', reqUrl);
    document.getElementsByTagName('head')[0].appendChild(d_script);
};
_shaneAjaxRef.goRealAjax = function(configObj)
{
    var xmlhttp = _shaneAjaxRef.buildNewXmlhttp();
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4)
        {
            var success = xmlhttp.status == 200;
            if (success)
            {
                if (configObj.success)
                {
                    var dataType = configObj.dataType ? configObj.dataType : 'json';
                    switch (dataType)
                    {
                        case 'xml':
                        case 'html':
                        case 'script':
                        case 'text':
                            configObj.success(xmlhttp.responseText, 'success');
                            break;
                        case 'json':
                            configObj.success(JSON.parse(xmlhttp.responseText), 'success');
                            break;
                        case 'jsonp':
                            configObj.success(eval(xmlhttp.responseText), 'success');
                    }
                }
            }
            else
            {
                if (configObj.error)
                {
                    configObj.error(xmlhttp, 'http status = ' + xmlhttp.status, null);
                }
            }
            if (configObj.complete)
            {
                configObj.complete(xmlhttp, success ? 'success' : 'error');
            }

        }
    };
    var reqMethod = configObj.type ? configObj.type : 'GET';
    var reqUrl = configObj.url;
    var dataStr = _shaneAjaxRef.buildDataStr(configObj.data);
    if (reqMethod == 'GET' && dataStr)
    {
        reqUrl += (reqUrl.indexOf('?') == -1 ? '?' : '&') + dataStr;
    }
    var reqAsync = configObj.async === false ? false : true;
    xmlhttp.open(reqMethod, reqUrl, reqAsync);
    if (reqMethod == 'POST' || reqMethod == 'PUT')
    {
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
    if ((reqMethod == 'POST' || reqMethod == 'PUT') && dataStr)
    {
        xmlhttp.send(dataStr);
    }
    else
    {
        xmlhttp.send();
    }
};

下面是一個(gè)測(cè)試程序。如果用 jsonp 就可以訪問，否則不行。

var test = function()
{
    console.log(1);
    // https://www.baidu.com/s?wd=ajax&rsv_spt=1&rsv_iqid=0xf9544c340001dd09&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&oq=jQuery%2520ajax&inputT=1899&rsv_t=25bdncCkCLyr12l2gBax5GxF5yjzYUnHj2M%2FMv%2Fd1YsIlJpcW4%2BYljBcIhDw8f9CnkkY&rsv_pq=8e82b6400002164e&rsv_sug3=32&rsv_sug1=20&rsv_sug7=101&rsv_sug2=0&rsv_sug4=2655
    shaneAjax({
        type: 'GET',
        url: 'http://www.baidu.com/s',
        data: {
            wd: 'ajax',
            rsv_spt: 1,
            rsv_iqid: '0xf9544c340001dd09',
            issp: 1,
            f: 8,
            rsv_bp: 1,
            rsv_idx: 2,
            ie: 'utf-8',
            rqlang: 'cn',
            tn: 'baiduhome_pg',
            rsv_enter: 1,
            oq: 'jQuery%20ajax',
            inputT: 1899,
            rsv_t: '25bdncCkCLyr12l2gBax5GxF5yjzYUnHj2M/Mv/d1YsIlJpcW4+YljBcIhDw8f9CnkkY',
            rsv_pq: '8e82b6400002164e',
            rsv_sug3: 32,
            rsv_sug1: 20,
            rsv_sug7: 101,
            rsv_sug2: 0,
            rsv_sug4: 2655
        },
        dataType: 'jsonp',
        success: function(result)
        {
            console.log(result);
        },
        complete: function()
        {
            console.log('complete');
        }
    });
    console.log(2);
};

本文題目：今天手動(dòng)編寫了一個(gè)簡易的ajax發(fā)起器（JavaScript）
本文地址：http://jinyejixie.com/article4/jojsie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信公眾號(hào)、商城網(wǎng)站、Google、網(wǎng)站營銷、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)