function ajax( options ){ // options是一个对象,包含请求所需的参数 // 为ajax函数设置默认值,有些不需要传递的参数或者不需要经常改变的参数给一个 默认值,需要改变的时候再用传递进去的值覆盖默认值 var defaults = { type:'get', url:'', async:true, data:{}, header:{ 'content-type':'application/x-www-form-urlencoded' }, success:function(){}, error:function(){} }; // 使用用户传递的参数替换默认值参数 Object.assign(defaults,options); // assign方法实现浅拷贝 // 创建xhr对象 var xhr = new XMLHttpRequest(); // 这里没有考虑兼容性,考虑浏览器兼容性的创建过程可以看“Ajax常见面试题整理中的3” // 参数拼接变量 var params = ''; // 循环参数 for(var attr in defaults.data){ //data里面存的是传给服务器的参数 // 参数拼接 params += attr + '=' + defaults.data[attr]+'&'; // 去掉参数中的最后一个& params = params.substr(0,length-1); //substr不包含右边界值 }; // 参数拼接完了就需要判断一下请求方式,从而决定传参的形式 if(defaults.type == 'get'){ // 将参数拼接在url地址的后面 defaults.url += '?'+params ; }; // 配置ajax请求 xhr.open( defaults.type,defaults.url,defaults.aysnc ); // 如果请求方式为post if( defaults.type == 'post'){ // 设置请求头 xhr.setRequestHeader('Content- Type',defaults.header['Content-Type'] ); // 如果想服务器端传递的参数类型为json if( defaults.header['Content-Type']=='application/json'){ // 将json对象转换成json字符串 xhr.send(JSON.stringify(defaults.data)); }else{ // 发送请求 xhr.send('params'); }else{ xhr.send(); }; // 请求加载完成 xhr.onload = function(){ // 获取服务器端返回数据的类型 var contentType = xhr.getResponseHeader('Content-Type'); // 获取服务端返回的响应数据 var responseText = xhr.responseText; // 如果服务端返回的是json数据类型 if( contentType.includes('application/json')){ // 将json字符串转换为json对象 responseText = JSON.parse(responseText); }; // 如果请求成功 if(xhr.status == 200 ){ // 调用成功回调函数,并且将服务端返回的结果传递给成功回调函数 defaults.success(responseText,xhr); }else{ // 调用失败回调函数并且将xhr对象传递给回调函数 defaults.error(responseText,xhr); } } // 当网络中断时 xhr.onerror = function(){ // 调用失败回调函数并且将xhr对象传递给回调函数 defaults.error( xhr ); } }