ajax作为前端开发领域一个必不可少的内容，也是灵魂所在，今天就ajax的封装给大家做一个分析， 如果没有猜错的话现在基本上用原生去写ajax的意见不多了，这是肯定的 ，为什么这么说，jq的ajax大家肯定都很熟悉不过了前两年又出来的axios，因其简洁的语法与受到vue作者的青睐，一度热度居高不下，基本满足所有的请求，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征： 1.从浏览器中创建 XMLHttpRequest 2.支持 Promise API 3.客户端支持防止CSRF 4.提供了一些并发请求的接口（重要，方便了很多的操作） 5.从 node.js 创建 http 请求 6.拦截请求和响应 7.转换请求和响应数据 8.取消请求 9.自动转换JSON数据 PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
废话不多说今天分析下封装的过程几原理：
function ajax(){ var ajaxData = { type: (arguments[0].type || "GET").toUpperCase(), url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "json", contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8", beforeSend: arguments[0].beforeSend || function(){}, success: arguments[0].success || function(){}, error: arguments[0].error || function(){} } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType=ajaxData.dataType; xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); xhr.setRequestHeader("Content-Type",ajaxData.contentType); xhr.send(convertData(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200){ ajaxData.success(xhr.response) }else{ ajaxData.error() } } } } function createxmlHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function convertData(data){ if( typeof data === 'object' ){ var convertResult = "" ; for(var c in data){ convertResult+= c + "=" + data[c] + "&"; } convertResult=convertResult.substring(0,convertResult.length-1) return convertResult; }else{ return data; } } ajax({ type:"POST", url:"ajax.php", dataType:"json", data:{ "name":"abc", "age":123, "id":"456" }, beforeSend:function(){ //some js code }, success:function(msg){ console.log(msg) }, error:function(){ console.log("error") } })