自定义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);
        }
    };
```

封装ajax:

!(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)

//
```

自定义ajax函数（仿照jQuery）

封装ajax:

猜你喜欢