自定义ajax函数（仿照jQuery）

• AJAX介绍
  • AJAX = 异步 JavaScript 和 XML。
  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
  • 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

• 创建一个简单的ajax应用

   // 判断用户名       userNamer.onblur = function(){           // 获取用户名数值从而进行服务器判断           var  usernameValue = userNamer.value;           // ajax 四个步骤           var xhr = null;           // 1.创建对象  兼容性处理            if(window.XMLHttpRequest){               xhr = new XMLHttpRequest();            }            else{               xhr = new ActiveXObject("Microsoft.XMLHTTP");            }           // 2.准备发送           xhr.open("get","./php/usernamer.php?uname="+usernameValue,true);           // 3.执行发送           xhr.send(null);           // 4.设置回调函数           xhr.onreadystatechange = function(){               if(xhr.readyState == 4) {                   if(xhr.status == 200){                       // 获取值                       var result = xhr.responseText;                       var usernamer_result = document.querySelector(".usernamer_result");                       if(result == "ok"){                           usernamer_result.innerText = "该用户名可用";                        }else{                           usernamer_result.innerText = "该用户名已被注册";                       }                    }               }           };       };

• 封装ajax:
  • 为了克服传统函数不能设置默认值 以及 不能随意更改参数顺序的问题

  • 这里采用对象传参方式来封装ajax请求函数（使用的是jQuery模式）

    //函数内部默认对象 var defaults = {         type:"get",         url:"#",         data:{},         dataType:"json",         async:true,         success:function(result){             console.log(result);         }     };

!(function(w){ w.lufei = {};  // 参数详解 // 1.请求类型 type // 2.请求地址 url    // 3.传递参数 params  这里可以传多个  采用对象data{} // 4.数据类型 datatype // 5.回调函数 callback 用于获取数据后进行函数判断 success::function(){} // 6.同步异步 async     // 使用对象进行封装  这些参数  并且设置默认值  不用考虑顺序  w.lufei.ajax = function(obj){     var defaults = {         type:"get",         url:"#",         data:{},         dataType:"json",         async:true,         success:function(result){             console.log(result);         }     };     // 遍历对象属性名     for(var key in obj){         defaults[key] = obj[key];     }      // ajax 四个步骤         var xhr = null;         // 1.创建对象  兼容性处理          if(window.XMLHttpRequest){             xhr = new XMLHttpRequest();          }          else{             xhr = new ActiveXObject("Microsoft.XMLHTTP");          }     // 字符串拼接     var params = "";     for(var attr in defaults.data){         params += attr+"="+defaults.data[attr]+"&";     }     // 去除最后一个&     if(params){         // 字符串截取         params = params.substring(0,params.length-1);     }     if(defaults.type=="get"){         defaults.url += "?"+params;     }              // 2.准备发送         xhr.open(defaults.type,defaults.url,defaults.async);         // 3.执行发送         if(defaults.type=="get"){             xhr.send(null);         }else if(defaults.type=="post"){             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");             xhr.send(params);         }         // 4.设置回调函数         if(defaults.async){             xhr.onreadystatechange = function(){             if(xhr.readyState == 4) {                 if(xhr.status == 200){                     // 获取值                     var result =null;                     if(defaults.dataType=="json"){                         result = xhr.responseText;                         result = JSON.parse(result);                     }                     else if(defaults.dataType=="xml"){                         result = xhr.responseXML;                     }else{                         result = xhr.responseText;                     }                     if(defaults["success"]){                         defaults["success"](result);                     }                                                            }             }             };         }         else{             if(xhr.readyState == 4) {                 if(xhr.status == 200){                     // 获取值                     var result =null;                     if(defaults.datatype=="json"){                         result = xhr.responseText;                         result = JSON.parse(result);                     }                     else if(defaults.datatype=="xml"){                         result = xhr.responseXML;                     }else{                         result = xhr.responseText;                     }                     if(defaults["success"]){                         defaults["success"](result);                     }                                                            }             }         }               }; })(window)

//
```

来源：博客园

作者：路飞910

链接：https://www.cnblogs.com/lufei910/p/11817182.html