Ajax-Designplan

Melden Sie sich, ich möchte sprechen! XP wurde durch die Geschichte eliminiert. „Say Goodbye“ ist seitdem nicht mehr mit IE6 kompatibel, hahahahahaha

Melden Sie sich, ich möchte reden! Warum wurde dieser IE nicht früher getötet? Als ich nach einem Job suchte, hörte ich, dass er mit IE kompatibel wäre, also wurde ich sofort weicher

Melden Sie sich, ich möchte sprechen! Jquery ist zu umfangreich, ich habe nur ein paar Funktionen genutzt, verdammt, es ist nicht kosteneffektiv, ahhhhhhhhhhhhhhhhh

...

Okay, kommen wir zur Sache. Bezüglich der Idee, Ajax-Designlösungen zu sortieren, gibt es folgende Gründe:

Aus der Perspektive der rationellen Nutzung von Ressourcen und der Website-Optimierung ist es nicht kosteneffizient, jedes Mal auf ein Framework zu verweisen wenige Funktionen

Nachdem ich den W3C-Ajax-Designplan einschließlich der Level1- und Level2-Spezifikationen gelesen hatte, fühlte ich mich plötzlich erleuchtet

Ein Freund stieß auf die domänenübergreifende Ajax-Lösung und war in alle möglichen verwickelt Dinge, die ihm Unbehagen bereiteten

Die unterste Ebene Ihres eigenen Frameworks muss auch die Grundfunktionen von Ajax verwenden (Post-Anfrage abrufen, die noch nicht für Level2-Uploads verwendet wird)

Die Das Wichtigste ist, dass ich vorher sehr vage über dieses Konzept war. Also begann ich, den Designplan für Ajax auszuarbeiten

Einige Konzepte vorstellen:

Derselbe Ursprung Richtlinie des Browsers: Die grundlegendste Sicherheitsfunktion des Browsers, der gleiche Ursprung bedeutet, dass der Domänenname, das Protokoll und der Port gleich sind (die von mir geschriebenen Schnittstellenbereitstellungsports sind also 1122 bzw. 2211, was bedeutet, dass sie nicht von sind). denselben Ursprung haben und domänenübergreifend sind)

Ajax: Es handelt sich um eine technische Lösung, die auf CSS/HTML/Javascript basiert. Die Kernabhängigkeit ist das vom Browser bereitgestellte XMLHttpRequest-Objekt. Dieses Objekt ermöglicht es dem Browser, HTTP-Anfragen auszugeben und HTTP-Antworten empfangen.

XMLHttpRequest Level 1 weist hauptsächlich die folgenden Mängel auf:

Aufgrund derselben Ursprungsrichtlinie können keine domänenübergreifenden Anforderungen gesendet werden

kann nicht gesendet werden. Binärdateien (wie Bilder, Videos, Audios usw.) können nur reine Textdaten senden.

Während des Prozesses des Sendens und Abrufens von Daten können Fortschrittsinformationen nicht in Echtzeit abgerufen werden Es wird nur beurteilt, ob es abgeschlossen ist.

Die folgenden Funktionen wurden zu XMLHttpRequest Level 2 hinzugefügt:

Kann domänenübergreifende Anfragen senden, sofern dies zulässig ist der Server;

Unterstützt das Senden und Empfangen von Binärdaten;

FormData-Objekt hinzugefügt, um das Senden und Empfangen von Daten zu unterstützen; >

nginx: ist ein leistungsstarkes HTTP und umgekehrt Proxyserver

Der Testcode lautet wie folgt:

Front-End-homologer Testcode

//创建xhr对象
    var xhr = createXhrObject();

    //针对某些特定版本的mozillar浏览器的BUG进行修正
    xhr.overrideMimeType?(xhr.overrideMimeType("text/javascript")):(null);

    //针对IE8的xhr做处理 PS：ie8下的xhr无xhr.onload事件，所以这里做判断
    xhr.onload===undefined?(xhr.xhr_ie8=true):(xhr.xhr_ie8=false);

    //参数处理（get和post）,包括xhr.open     get:拼接好url再open   post:先open，再设置其他参数
    ajaxSetting.data === ""?(null):(xhr = dealWithParam(ajaxSetting,this,xhr));

    //设置超时时间（只有异步请求才有超时时间）
    ajaxParam.async?(xhr.timeout = ajaxSetting.time):(null);

    //设置http协议的头部
    each(ajaxSetting.requestHeader,function(item,index){xhr.setRequestHeader(index,item)});

    //判断并设置跨域头部信息
    (ajaxSetting.crossDomain)?(xhr = addCoreHeader(xhr,ajaxSetting)):(null);

    //onload事件（IE8下没有该事件）
    xhr.onload = function(e) {
        if(this.status == 200||this.status == 304){
            ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText));
        }else{
            /*
             *  这边为了兼容IE8、9的问题，以及请求完成而造成的其他错误，比如404等
             *   如果跨域请求在IE8、9下跨域失败不走onerror方法
             *       其他支持了Level 2 的版本 直接走onerror
             * */
            ajaxSetting.error(e.currentTarget.status, e.currentTarget.statusText);
        }
    };

    //xmlhttprequest每次变化一个状态所监控的事件（可拓展）
    xhr.onreadystatechange = function(){
        switch(xhr.readyState){
            case 1://打开
                //do something
                break;
            case 2://获取header
                //do something
                break;
            case 3://请求
                //do something
                break;
            case 4://完成
                //在ie8下面，无xhr的onload事件，只能放在此处处理回调结果
                xhr.xhr_ie8?((xhr.status == 200 || xhr.status == 304)?(ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText))):(null)):(null);
                break;
        };
    };

    //ontimeout超时事件
    xhr.ontimeout = function(e){
        ajaxSetting.timeout(999,e?(e.type):("timeout"));   //IE8 没有e参数
        xhr.abort();  //关闭请求
    };

    //错误事件，直接ajax失败，而不走onload事件
    xhr.onerror = function(e){
        ajaxSetting.error();
    };

    xhr.send((function(result){this.postParam == undefined?(result =null):(result=this.postParam);return result;})(this.postParam));

Front-End-Cross-Domain-Testcode

ajax.post("/api/ajax1/ajaxT1/",{"name":"测试异步post请求","age":"success"},function(data){alert(data)});  //该接口在1122上

Back-End-Cross-Domain-Schnittstelle Code

ajax.post_cross("http://192.168.0.3:2211/api/weixin/ajaxT2/",{"name":"测试跨域post请求","age":"success"},function(data){alert(data)});

Backend-Schnittstellencode mit gleichem Ursprung

/// <summary>
   /// 测试跨域请求
   /// </summary>
   /// <param name="module"></param>
   /// <returns></returns>
   [Route("ajaxT2")]
   public String kuaAjaxT2([FromBody]TModule module)
   {
       String result = "跨域post传输成功："+module.name+"-"+module.age;
       return result;
   }

/// <summary>
/// 测试ajax同源请求
/// </summary>
/// <param qwer="code"></param>
/// <returns>result</returns>
[Route("ajaxT2")]
public String GetkuaAjaxT1(string name,string age)
{
    String result = "1J跨域成功:" + name + "-" + age;
    return result;
}

Chrome

IE8 -9

Firefox

Oper

Safari

Edge

Domänenübergreifende Tests:

Chrome

IE8-9

IE10+

Firefox

Oper

Safari

edge

Der spezifische Code wurde in eine js-Bibliothek gekapselt, damit jeder ihn entsprechend den Projektanforderungen entwickeln und anpassen kann. Ich habe jedoch einige häufige Anforderungen gekapselt:

Asynchrone Get-Anfrage – ajax.get

Asynchrone Post-Anfrage – ajax.post

Synchrone Get-Anfrage – ajax.get_sync

Synchronische Post-Anfrage – ajax.post_sync

Domainübergreifende Get-Anfrage – ajax.get_cross

Domainübergreifende Post-Anfrage – ajax.post_cross

Gemeinsame Konfigurationsanfrage – ajax.common

Der Code und die Testseite wurden auf Github hochgeladen. Wenn Sie die Backend-Schnittstelle testen möchten, schreiben Sie sie einfach selbst. Der Backend-Code wird danach nicht mehr hochgeladen Kompression!