{"id":19993684,"url":"https://github.com/GerryIsWarrior/ajax","last_synced_at":"2025-05-04T12:32:20.936Z","repository":{"id":53764805,"uuid":"75095075","full_name":"GerryIsWarrior/ajax","owner":"GerryIsWarrior","description":"ajax设计方案","archived":false,"fork":false,"pushed_at":"2024-09-11T02:21:46.000Z","size":590,"stargazers_count":265,"open_issues_count":2,"forks_count":77,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-10-14T06:38:20.680Z","etag":null,"topics":["ajax","js-ajax","xmlhttprequest"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GerryIsWarrior.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-29T15:33:27.000Z","updated_at":"2024-07-15T08:03:35.000Z","dependencies_parsed_at":"2022-09-26T20:40:44.176Z","dependency_job_id":null,"html_url":"https://github.com/GerryIsWarrior/ajax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerryIsWarrior%2Fajax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerryIsWarrior%2Fajax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerryIsWarrior%2Fajax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GerryIsWarrior%2Fajax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GerryIsWarrior","download_url":"https://codeload.github.com/GerryIsWarrior/ajax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224393944,"owners_count":17303725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","js-ajax","xmlhttprequest"],"created_at":"2024-11-13T04:52:54.185Z","updated_at":"2024-11-13T04:57:01.226Z","avatar_url":"https://github.com/GerryIsWarrior.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# 原生js的ajax设计方案(现已支持npm安装)\n\n#### npm安装，文档见底部\n    npm i ajax-js  /  yarn add ajax-js\n\n#### 整理ajax设计方案原因如下\n  1. 从资源合理利用的角度以及网站优化角度去想，每次为了那几个功能，去引用一个框架，不划算   \n  2. 拜读了w3c的ajax的设计方案，包括level1和level2的规范，有种豁然开朗的感觉    \n  3. 有朋友遇到ajax的跨域方案，各种纠结在心里，导致内心不能舒畅    \n  4. 自己的框架底层也要需要用到ajax的基础功能，（get post请求，对于level2的上传暂时没用到）   \n  5. 最关键的也是之前对这块概念十分模糊，所以开始整理ajax这块的设计方案    \n  \n#### 一些概念\n  * 浏览器的同源策略：浏览器最基本的安全功能，同源是指，域名，协议，端口相同（所以我写的接口部署端口分别为1122和2211即不是同源，属于跨域）\n  * ajax：是一种技术方案，依赖的是CSS/HTML/Javascript，最核心依赖是浏览器提供的XMLHttpRequest对象，这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。\n  * nginx：是一个高性能的HTTP和反向代理服务器\n  * IIS:微软开发的的服务器，window系统自带\n  * XMLHttpRequest 兼容性如下：\n\t![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129224459115-1023971996.png)\n  * XMLHttpRequest Level 1主要存在以下缺点:\n    1. 受同源策略的限制，不能发送跨域请求；\n    2. 不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；\n    3. 发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；\n  * XMLHttpRequest Level 2中新增了以下功能:\n    1. 可以发送跨域请求，在服务端允许的情况下；   \n    2. 支持发送和接收二进制数据；    \n    3. 新增formData对象，支持发送表单数据；   \n    4. 发送和获取数据时，可以获取进度信息；   \n    5. 可以设置请求的超时时间；   \n    \n#### 开始准备\n  * 纯前端代码\n  * nginx反向代理服务器（前后端分离用）\n  * 后台2套接口（端口：1122，端口：2211）  PS：一份必须支持跨域请求\n  * IIS服务器（部署后台接口）\n  * chrome插件postman（接口测试）\n  * IE、chrome、firefox、Opera、safari、edge 6大浏览器，做兼容性测试\n  \n### XMLHttpRequest发送请求步骤\n  1. 实例化XMLHttpRequest对象（IE8-9是微软封装的ActiveXObject('Microsoft.XMLHTTP')）获得一个实例\n  2. 通过实例open一个请求，设置发送类型和接口以及同异步\n  3. 如有需要配置报文，以及各种事件（success，error，timeout等）\n  4. 调用实例的send方法，发送http/https的请求\n  5. 服务器回调，客户端接收，并做响应处理\n  \n#### 关键代码\n\n    //每次清空请求缓存,并重新合并对象\n    var ajaxSetting = tool.checkParam(options), sendData = '';\n\n    //创建xhr对象\n    var xhr = tool.createXhrObject();\n\n    //针对某些特定版本的mozillar浏览器的BUG进行修正\n    xhr.overrideMimeType ? (xhr.overrideMimeType(\"text/javascript\")) : (null);\n\n    //针对IE8的xhr做处理    PS：ie8下的xhr无xhr.onload事件，所以这里做判断\n    xhr.onload === undefined ? (xhr.xhr_ie8 = true) : (xhr.xhr_ie8 = false);\n\n    //参数处理（get和post）,包括xhr.open     get:拼接好url再open   post:先open，再设置其他参数\n    if (ajaxSetting.data) {\n        switch (ajaxSetting.contentType) {\n            case '':\n                tool.each(tool.MergeObject(ajaxSetting.data, ajaxSetting.publicData), function (item, index) {\n                    sendData += (index + \"=\" + item + \"\u0026\")\n                });\n                sendData = sendData.slice(0, -1);\n                ajaxSetting.requestHeader['Content-Type'] = 'application/x-www-form-urlencoded'\n                break\n            case 'json':\n                sendData = JSON.stringify(tool.MergeObject(ajaxSetting.data, ajaxSetting.publicData))\n                ajaxSetting.requestHeader['Content-Type'] = 'application/json'\n                break\n            case 'form':\n                if (!tool.isEmptyObject(ajaxSetting.publicData)) {\n                    tool.each(ajaxSetting.publicData, function (item, index) {\n                        ajaxSetting.data.append(index, item)\n                    })\n                }\n                sendData = ajaxSetting.data\n                break\n        }\n        //请求前处理参数\n        sendData = ajaxSetting.transformRequest(sendData)\n\n        //判断请求类型\n        if (ajaxSetting.type === 'get') {\n            xhr.open(ajaxSetting.type, tool.checkRealUrl(ajaxSetting) + '?' + sendData, ajaxSetting.async)\n        } else {\n            xhr.open(ajaxSetting.type, tool.checkRealUrl(ajaxSetting), ajaxSetting.async)\n        }\n    } else {\n        xhr.open(ajaxSetting.type, ajaxSetting.baseURL + ajaxSetting.url, ajaxSetting.async)\n    }\n\n    xhr.responseType = ajaxSetting.responseType;\n\n    //设置超时时间（只有异步请求才有超时时间）\n    ajaxSetting.async ? (xhr.timeoutEvent = ajaxSetting.timeout) : (null);\n\n    //设置http协议的头部\n    tool.each(ajaxSetting.requestHeader, function (item, index) {\n        xhr.setRequestHeader(index, item)\n    });\n\n    //onload事件（IE8下没有该事件）\n    xhr.onload = function (e) {\n        if (this.status == 200 || this.status == 304) {\n            /*\n            *  ie浏览器全系列不支持responseType='json'，所以在ie下使用JSON.parse进行转换\n            * */\n            if (ajaxSetting.responseType === 'json') {\n                if (isNaN(tool.getIEVersion())) {\n                    ajaxSetting.successEvent(ajaxSetting.transformResponse(xhr.response));\n                } else {\n                    ajaxSetting.successEvent(ajaxSetting.transformResponse(JSON.parse(xhr.responseText)));\n                }\n            } else {\n                ajaxSetting.successEvent(ajaxSetting.transformResponse(xhr.response));\n            }\n        } else {\n            /*\n             *  这边为了兼容IE8、9的问题，以及请求完成而造成的其他错误，比如404等\n             *   如果跨域请求在IE8、9下跨域失败不走onerror方法\n             *       其他支持了Level 2 的版本 直接走onerror\n             * */\n            ajaxSetting.errorEvent(e.currentTarget.status, e.currentTarget.statusText);\n        }\n    };\n\n    //xmlhttprequest每次变化一个状态所监控的事件（可拓展）\n    xhr.onreadystatechange = function () {\n        switch (xhr.readyState) {\n            case 1://打开\n                //do something\n                break;\n            case 2://获取header\n                //do something\n                break;\n            case 3://请求\n                //do something\n                break;\n            case 4://完成\n                //在ie8下面，无xhr的onload事件，只能放在此处处理回调结果\n                if (xhr.xhr_ie8) {\n                    if (xhr.status == 200 || xhr.status == 304) {\n                        if (ajaxSetting.responseType == \"json\") {\n                            ajaxSetting.successEvent(ajaxSetting.transformResponse(JSON.parse(xhr.responseText)))\n                        }\n                    }\n                }\n                break;\n        }\n        ;\n    };\n\n    //ontimeout超时事件\n    xhr.ontimeout = function (e) {\n        ajaxSetting.timeoutEvent(\"000000\", e ? (e.type) : (\"timeoutEvent\"));   //IE8 没有e参数\n        xhr.abort();  //关闭请求\n    };\n\n    //错误事件，直接ajax失败，而不走onload事件\n    xhr.onerror = function (e) {\n        ajaxSetting.errorEvent(e)\n        //错误日志上传\n        // tool.uploadAjaxError({\n        //     errInfo: e.currentTarget.statusText,\n        //     errUrl: tool.checkRealUrl(ajaxSetting),\n        //     errLine: e.currentTarget.status,\n        //     Browser: navigator.userAgent\n        // })\n    };\n\n    //发送请求\n    xhr.send(ajaxSetting.type === 'get' ? '' : sendData);\n            \n### 测试代码\n#### 前端同源测试代码\n    ajax.post(\"/api/ajax1/ajaxT1/\",{\"name\":\"测试异步post请求\",\"age\":\"success\"},function(data){alert(data)});  //该接口在1122上\n#### 前端跨域测试代码\n    ajax.post(\"http://192.168.0.3:2211/api/weixin/ajaxT2/\",{\"name\":\"测试跨域post请求\",\"age\":\"success\"},function(data){alert(data)});\n#### 后端跨域接口代码\n    /// \u003csummary\u003e\n    /// 测试跨域请求\n    /// \u003c/summary\u003e\n    /// \u003cparam name=\"module\"\u003e\u003c/param\u003e\n    /// \u003creturns\u003e\u003c/returns\u003e\n    [Route(\"ajaxT2\")]\n    public String kuaAjaxT2([FromBody]TModule module)\n    {\n        String result = \"跨域post传输成功：\"+module.name+\"-\"+module.age;\n        return result;\n    }\n#### 后端同源测试代码\n    /// \u003csummary\u003e\n    /// 测试ajax同源请求\n    /// \u003c/summary\u003e\n    /// \u003cparam qwer=\"code\"\u003e\u003c/param\u003e\n    /// \u003creturns\u003eresult\u003c/returns\u003e\n    [Route(\"ajaxT2\")]\n    public String GetkuaAjaxT1(string name,string age)\n    {\n        String result = \"1J跨域成功:\" + name + \"-\" + age;\n        return result;\n    }\n### 以下是各种浏览器的测试结果（仅提供同源post请求和跨域post请求）\n##### 同源测试\n###### chrome\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230238927-2089656702.png)\n###### IE8-9\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230248709-1923043215.png)\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230306302-1703939611.png)\n###### IE10+\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230347068-1928619242.png)\n###### firefox\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230452615-113489743.png)\n###### opera\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230611365-1169854535.png)\n###### safari\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230713615-2040676482.png)\n###### edge\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230814818-1130849183.png)\n\n##### 跨域测试\n###### chrome\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230913599-1189375449.png)\n###### IE8-9\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230942302-1611540664.png)\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129230956990-1637046338.png)\n###### IE10+\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129231021209-1271264367.png)\n###### firefox\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129231044943-1370903842.png)\n###### opera\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129231104552-1637987456.png)\n###### safari\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129231127834-855103713.png)\n###### edge\n![](http://images2015.cnblogs.com/blog/801930/201611/801930-20161129231145693-678151401.png)\n\n#### 1.4 版本更新  ---   轮询技术的实现（需要后台接口支持）\n    /*\n     * 长轮询的实现\n     *   param: type  请求类型\n     *          url   请求接口地址\n     *          data  请求参数\n     *          successEvent(data,this)     成功事件处理  如果得到正确数据，则让轮询停止，则在第二个回调参数设置stop属性就好\n     *          timeFrequency               每隔多少时间发送一次请求\n     *          errorEvent                  错误事件\n     *          timeoutEvent                超时处理\n     * */\n    longPolling: function (type, url, data, successEvent, timeFrequency, errorEvent, timeoutEvent) {\n        var ajaxParam = {\n            type: type,\n            url: url,\n            data: data,\n            successEvent: function (dateCall) {\n                successEvent(dateCall, this);\n                if (!this.stop) {\n                    setTimeout(function () {\n                        tempObj.longPolling(type, url, data, successEvent, timeFrequency, errorEvent, timeoutEvent);\n                    }, timeFrequency);\n                }\n                ;\n            },\n            //如果走了error说明该接口有问题，没必要继续下去了\n            errorEvent: errorEvent,\n            timeoutEvent: function () {\n                timeoutEvent();\n                setTimeout(function () {\n                    tempObj.longPolling(type, url, data, successEvent, timeFrequency, errorEvent, timeoutEvent)\n                }, timeFrequency);\n            }\n        };\n        ajax.common(ajaxParam);\n    },\n\u003e 考虑到业务需求\n  \u003e\u003e 聊天系统会要一直需求轮询，不间断的向后台使用数据，所以isAll = true        \n  \u003e\u003e 等待付款业务只需要得到后台一次响应是否支付成功，所以使用回调参数中的第二个参数的stop属性，结束轮询        \n\n#### 1.5.0版本更新  ---   ajax的上传文件技术\n    /*\n     *   ajax上传文件 -- level2的新特性，请保证你的项目支持新的特性再使用\n     *       url                 文件上传地址\n     *       fileSelector        input=file 选择器\n     *       size                文件限制大小\n     *       fileType            文件限制类型 mime类型\n     *       successEvent             上传成功处理\n     *       errorEvent               上传失败处理\n     *       timeoutEvent             超时处理\n     *\n     *   return: status:  0      请选择文件\n     *                    1      超出文件限制大小\n     *                    2      非允许文件格式\n     * */\n    upload: function (url, fileSelector, size, fileType, successEvent, errorEvent, timeoutEvent) {\n        var formdata = new FormData(), fileNode = document.querySelector(fileSelector),\n            fileCount = fileNode.files.length, data = {}, result = {};\n        //以下为上传文件限制检查\n        if (fileCount \u003e 0) {\n            tool.each(Array.prototype.slice.call(fileNode.files), function (value) {\n                //检查文件大小\n                if (value.size \u003e size) {\n                    result[\"status\"] = 1;\n                    result[\"errMsg\"] = \"超出文件限制大小\";\n                } else {\n                    if (fileType != \"*\") {\n                        //检查文件格式.因为支持formdata，自然支持数组的indexof(h5)\n                        if (fileType.indexOf(value.type) === -1) {\n                            result[\"status\"] = 2;\n                            result[\"errMsg\"] = \"非允许文件格式\";\n                        } else {\n                            formdata.append(value.name, value);\n                        }\n                        ;\n                    } else {\n                        formdata.append(value.name, value);\n                    }\n                }\n                ;\n            });\n        } else {\n            result[\"status\"] = 0;\n            result[\"errMsg\"] = \"请选择文件\";\n        }\n        ;\n\n        if (result.status !== undefined) return result;   //如果有错误信息直接抛出去,结束运行\n\n        var ajaxParam = {\n            type: \"post\",\n            url: url,\n            data: formdata,\n            contentType: 'form',\n            successEvent: successEvent,\n            errorEvent: errorEvent,\n            timeoutEvent: timeoutEvent\n        };\n        ajax.common(ajaxParam);\n    },\n\n如果想要看文件上传具体内容和测试各种结果，请转到这片博客：http://www.cnblogs.com/GerryOfZhong/p/6274536.html\n\n#### 1.5.1版本更新  ---   ajax的大文件/超大文件上传技术  （需后台配合）\n    /*\n     *   ajax大文件切割上传(支持单个文件)  -- level2的新特性，请保证你的项目支持新的特性再使用\n     *       url                 文件上传地址\n     *       fileSelector        input=file 选择器\n     *       cutSize             切割文件大小\n     *       fileType            文件限制类型 mime类型\n     *       successEvent        上传成功处理\n     *       progressEvent       上传进度事件\n     *       errorEvent          上传失败处理\n     *       timeoutEvent        超时处理事件\n     *\n     *   return: status:  0      请选择文件\n     *                    1      非允许文件格式\n     * */\n    upload_big: function (url, fileSelector, cutSize, fileType, successEvent, progressEvent, errorEvent, timeoutEvent) {\n        var file = document.querySelector(fileSelector).files, result = {};\n        //以下为上传文件限制检查\n        if (file.length === 1) {\n            if (fileType != \"*\") {\n                if (fileType.indexOf(file.type) === -1) {\n                    result[\"status\"] = 1;\n                    result[\"errMsg\"] = \"非允许文件格式\";\n                }\n            }\n        } else {\n            result[\"status\"] = 0;\n            result[\"errMsg\"] = \"请选择文件/只能上传一个文件\";\n        }\n        ;\n\n        if (result.status !== undefined) return result;   //如果有错误信息直接抛出去,结束运行\n\n        //判断上传文件是否超过需要切割的大小\n        if (file[0].size \u003e cutSize) {\n            var fileArr = tool.cutFile(file[0], cutSize);  //切割文件\n            cutFile_upload(fileArr);\n        } else {\n            var fileForm = new FormData();\n            fileForm.append(\"name\", file[0].name);\n            fileForm.append(\"file\".name, file[0]);\n            fileForm.append(\"count\", 1);\n            fileForm.append(\"cutSize\", cutSize);\n            var ajaxParam = {\n                type: \"post\",\n                url: url,\n                data: fileForm,\n                contentType: 'form',\n                successEvent: function (data) {\n                    successEvent(data);\n                    progressEvent(1, 1);\n                },\n                errorEvent: errorEvent,\n                timeoutEvent: timeoutEvent\n            };\n            ajax.common(ajaxParam);\n        }\n        ;\n\n        /*\n         *   切割文件上传，配合后台接口进行对接\n         *       传输参数：\n         *           count   -- 当前传输part的次数\n         *           name    -- 做过处理的文件名称\n         *           file    -- 上传的.part的切割文件\n         *           isLast  -- 是否为最后一次切割文件上传（默认值：\"true\"  字符串，只有最后一次才附加）\n         * */\n        function cutFile_upload(fileArr, count) {\n            var formData = new FormData();\n            if (count == undefined) {\n                count = 0;\n                formData.append(\"name\", fileArr[0].name);\n                formData.append(\"file\".name, fileArr[0].file);\n            } else {\n                if (count === fileArr.length - 1) {\n                    formData.append(\"isLast\", \"true\")\n                }\n                ;\n                formData.append(\"name\", fileArr[count].name);\n                formData.append(\"file\".name, fileArr[count].file);\n            }\n            formData.append(\"count\", count);\n            formData.append(\"cutSize\", cutSize);\n            ;\n            var ajaxParam = {\n                type: \"post\",\n                url: url,\n                data: formData,\n                contentType: 'form',\n                successEvent: function (data) {\n                    /*\n                     *   data 参数设置  需要后台接口配合\n                     *       建议：如果后台成功保存.part文件，建议返回下次所需要的部分，比如当前发送count为0，则data返回下次为1。\n                     *             如果保存不成功，则可false，或者返回错误信息，可在successEvent中处理\n                     *\n                     * */\n                    progressEvent(count + 1, fileArr.length);   //上传进度事件，第一个参数：当前上传次数；第二个参数：总共文件数\n\n                    var currCount = Number(data);\n                    if (currCount) {\n                        if (currCount != fileArr.length) {\n                            cutFile_upload(fileArr, currCount);\n                        }\n                        ;\n                    }\n                    ;\n                    successEvent(data);  //成功处理事件\n                },\n                errorEvent: errorEvent,\n                timeoutEvent: timeoutEvent\n            };\n            ajax.common(ajaxParam);\n        }\n    }\n\n如果想要看文件上传具体内容和测试各种结果，请转到这片博客：http://www.cnblogs.com/GerryOfZhong/p/6295211.html\n\n备注：ajax的上传技术，在es5+之后支持，浏览器的兼容性就是除了IE10以下，大部分都支持了       \n\n#### \u003cdel\u003e1.6版本更新  ---   集成promise规范，更优雅操作异步（主要增加了promise代码）\u003c/del\u003e   注意：该迭代已经废弃，请移步1.9.2迭代\n\n\u003cdel\u003e如果想要看文件上传具体内容和测试各种结果，请转到这片博客：http://www.cnblogs.com/GerryOfZhong/p/7096792.html\u003c/del\u003e\n\n#### 1.7版本更新  --- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布\n\n由于内容比较多，比较难粘贴代码，如果想要看具体内容和测试各种结果，请转到博客      \n 博客园：http://www.cnblogs.com/GerryOfZhong/p/7575820.html     \n 知乎：https://zhuanlan.zhihu.com/p/29640921\n \n#### 1.8版本更新  --- 增加请求错误监控、前端负载均衡、宕机切换、以及迭代问题修复\n\n此次对于请求的错误监控进行了搜集，前端的负载均衡，将流量打到不同的服务器上，以及在请求宕机之后的备份切换\n每次迭代都会对新的代码做测试讲解，所以篇幅比较多，so     \n 博客园：https://www.cnblogs.com/GerryOfZhong/p/9245510.html    \n 知乎：https://zhuanlan.zhihu.com/p/38685979\n \n \n#### 1.9版本更新  --- 设计请求池，复用请求，让前端通信快、更快、再快一点\n\n本次包括了设计阶段，摸索阶段，实现阶段，最后全面覆盖测试阶段（包括数据搜集清洗），还有与主流前端通信框架进行对比PK阶段。   \n 博客园：https://www.cnblogs.com/GerryOfZhong/p/9630569.html        \n 知乎：https://zhuanlan.zhihu.com/p/44477183\n \n#### 1.9.1版本更新  --- 增加了文档支持     \n\n本地仅增加了文档的支持，请移步ajax-api/api.md 查看\n \n#### 1.9.2版本更新  --- 完善Promise A+规范，增加mock数据功能     \n\n本次包括完善了整个Promise A+ 规范，实现了ES6全部功能，以及增加了ajax库支持mock数据的能力。   \n 博客园：https://www.cnblogs.com/GerryOfZhong/p/10726306.html        \n 知乎：https://zhuanlan.zhihu.com/p/44477183       \n \n#### 具体代码已封装成一个js库，下面为API库\n  * 全局配置参数              --  ajax.config\n  * get请求                   --  ajax.get\n  * post请求                  --  ajax.post\n  * postForm请求              --  ajax.postFormData\n  * 获取blob数据集            --  ajax.obtainBlob\n  * 轮询请求                  --  ajax.longPolling\n  * 上传文件请求              --  ajax.upload\n  * 大文件切割上传请求        --  ajax.upload_big\n  * 通用配置请求              --  ajax.common\n\n#### 最近在研究原声js的ajax的技术和设计方案，总体说来还是有很大的收获的，对浏览器的了解，js的了解，服务器技术的了解，后端的温习还是有很大的进步的，特别是解决问题的能力，感觉又上了一个level。技术的未来，不会远...\n\n### 版本更新介绍\n  1. 跨域不需要在前端设置跨域请求报文头，现已删除   ==\u003eauthor:keepfool from cnblog\n  2. 更新tool一些方法，拥抱es5+新技术\t\t\t\t==\u003eauthor:pod4g from github  \n  3. 删除头部参数中的跨域参数设置\t\t\t\t\t==\u003eauthor:wYhooo from github\n  4. 集成ajax的轮询技术            \n  5. 集成ajax的上传文件技术，也更新了一些原来的代码     \n        a. 增加FormData数据传输方法         \n        b. 新增各种类型判断方法判断类型       \n        c. 更新each方法，判断如果传入参数obj为数组而且浏览器支持es5的新特性直接用数组的forEach方法     \n  6. 更新bug，更细ajax默认值相互影响问题，调试ajax长轮询bug              \n  7. 集成promise规范，更优雅操作异步         \n  8. 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布        \n        \n#### 程序员的小笑话\n![](http://images2015.cnblogs.com/blog/801930/201612/801930-20161210143609882-1515246004.gif)       \n  \n#### 个人介绍\n  * 性别：男\n  * 爱好：女\n  * 近期目标：前端架构师\n  * 职业目标：全栈架构师\n  * 博客园:http://www.cnblogs.com/GerryOfZhong\n  * 知乎:https://www.zhihu.com/people/zhong-qiang-51-33/activities\n\n\n\n[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)\n[![Badge](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu/#/zh_CN)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGerryIsWarrior%2Fajax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGerryIsWarrior%2Fajax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGerryIsWarrior%2Fajax/lists"}