Ajax-Designplan
- 高洛峰Original
- 2016-11-30 14:32:121318Durchsuche
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; >
Sie können das Timeout der Anfrage festlegen; XMLHttpRequest-Kompatibilität ist wie folgt:nginx: ist ein leistungsstarkes HTTP und umgekehrt Proxyserver 
IIS-Server (Bereitstellungshintergrundschnittstelle) Chrome Plug-in Postman (Schnittstellentest)IE, Chrome, Firefox, Opera, Safari, Edge 6 wichtige Browser, Kompatibilitätstests durchführen XMLHttpRequest-Schritte zum Senden einer Anfrage: Instanziieren Sie das XMLHttpRequest-Objekt (IE8-9 ist Microsofts gekapseltes ActiveXObject ('Microsoft. >Konfigurieren Sie bei Bedarf Nachrichten und verschiedene Ereignisse (Erfolg). , Fehler, Zeitüberschreitung usw.) Rufen Sie die Sendemethode der Instanz auf, um http/https-Anfragen zu senden Serverrückruf, Client empfängt und führt die Antwortverarbeitung durch Die wichtigsten Punkte des Codes sind wie folgt:
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;
}
Die folgenden sind vielfältig Browser Testergebnisse (es werden nur Post-Anfragen gleicher Herkunft und domänenübergreifende Post-Anfragen bereitgestellt): Originaltest: /// <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!