Report, I want to speak! XP has been eliminated by history, IE6 says goodbye, I’m so damn happy, I won’t be compatible with IE6 from now on, hahahahahahahahahahahahahahahahahahahahahahahahahaha

Report, I want to speak! Why wasn't this sb IE killed earlier? I heard that IE compatibility was required when I was looking for a job, so I immediately softened up, alas, alas, alas, alas,

report, I want to speak! Jquery is too rich. I only use a few functions. Damn, it is not cost -effective, ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ... oh, good, words belong to home. Regarding the idea of ??sorting out the ajax design plan, the reasons are as follows:

Thinking from the perspective of rational utilization of resources and website optimization, it is not cost-effective to reference a framework every time just for those few functions

I read the ajax design plan of w3c , including the specifications of level1 and level2, there is a feeling of sudden enlightenment

A friend encountered the cross-domain solution of ajax, and was tangled in his heart, which made him feel uncomfortable

The bottom layer of his own framework also needs to use the foundation of ajax Function, (get post request, not used for level2 upload yet)

The most important thing is that I was very vague about this concept before, so I started to sort out the design plan for ajax

Introduce some concepts:

Browse The same origin policy of the browser: the most basic security function of the browser. The same origin means that the domain name, protocol and port are the same (so the interface deployment ports I wrote are 1122 and 2211 respectively, which means they are not of the same origin and are cross-domain)

ajax : It is a technical solution that relies on CSS/HTML/Javascript. The core dependency is the XMLHttpRequest object provided by the browser. This object allows the browser to issue HTTP requests and receive HTTP responses.

XMLHttpRequest Level 1 mainly has the following shortcomings:

Restricted by the same origin policy, cross-domain requests cannot be sent;

cannot send binary files (such as pictures, videos, audios, etc.), and can only send plain text data ;

During the process of sending and obtaining data, progress information cannot be obtained in real time, and you can only judge whether it is completed;

XMLHttpRequest Level 2 has added the following functions:

You can send cross-domain requests, which are allowed on the server side

Supports sending and receiving binary data;

Added formData object to support sending form data;

You can get progress information when sending and getting data;

You can set the timeout of the request;

XMLHttpRequest The compatibility is as follows:

nginx: It is a high-performance HTTP and reverse proxy server

IIS: a server developed by Microsoft, which comes with the window system

Start preparation as follows:

Pure front-end code

nginx reverse proxy server (for front-end and back-end separation)

Backend 2 sockets (port: 1122, port: 2211) PS: One copy must support cross-domain requests

IIS server (deployment backend interface)

chrome plug-in postman (Interface test)

IE, chrome, firefox, Opera, safari, edge 6 major browsers, do compatibility testing

XMLHttpRequest sending request steps:

Instantiate the XMLHttpRequest object (IE8-9 is the ActiveXObject encapsulated by Microsoft (' Microsoft. Call the send method of the instance to send an http/https request

server callback, the client receives it, and does response processing

The key points of the code are as follows:

//創(chuàng)建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);

    //參數(shù)處理（get和post）,包括xhr.open     get:拼接好url再open   post:先open，再設(shè)置其他參數(shù)
    ajaxSetting.data === ""?(null):(xhr = dealWithParam(ajaxSetting,this,xhr));

    //設(shè)置超時時間（只有異步請求才有超時時間）
    ajaxParam.async?(xhr.timeout = ajaxSetting.time):(null);

    //設(shè)置http協(xié)議的頭部
    each(ajaxSetting.requestHeader,function(item,index){xhr.setRequestHeader(index,item)});

    //判斷并設(shè)置跨域頭部信息
    (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每次變化一個狀態(tài)所監(jiān)控的事件（可拓展）
    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事件，只能放在此處處理回調(diào)結(jié)果
                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參數(shù)
        xhr.abort();  //關(guān)閉請求
    };

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

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

The test code is as follows:

Front-end same-origin test code

ajax.post("/api/ajax1/ajaxT1/",{"name":"測試異步post請求","age":"success"},function(data){alert(data)});  //該接口在1122上

Front-end cross-domain test code

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

Back-end cross-domain interface code

/// <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;
   }

Back-end same-origin interface code

/// <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;
}

The following are tests on various browsers Results (only same-origin post requests and cross-domain post requests are provided):

Original test:

chrome

IE8-9

IE10+

firefox

opera

safari

edge

Cross-domain testing:

chrome

IE8-9

IE10+

firefox

opera

safari

edge

The specific code has been encapsulated into a js library for everyone to develop and customize according to project needs, but I have encapsulated some common requests:

Asynchronous get request -- ajax.get

Asynchronous post request--ajax.post

synchronous get request--ajax.get_sync

synchronous post request--ajax.post_sync

cross-domain get request--ajax.get_cross

cross-domain post request -- ajax.post_cross

Common configuration request -- ajax.common

The code and test page have been uploaded to github. If you want to test the backend interface, just write one yourself. The backend code will not be uploaded. Key compression It’s all over, only 4K!