Day01-Ajax

一.JSON方法

    
    
    




    

        

            
id
            
姓名
            
年龄
            
性别
        

        

            

            

            

            

        
    

    

二.Ajax使用

三.get请求

    
    
    




    搜索添加

    

        

            
班级
            
学号
            
姓名
            
性别
            
年龄
            
爱好
            
手机号
            
地址
            
备注
            
日期
            
操作
        
    

    

四.post请求

五.Ajax封装

// 封装get请求
function getData(data, url, fun) {
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    if (!data.includes("=")) {
        data = formData(data);
    }
    url += "?" + data;
    // 2.发起请求
    xhr.open("GET", url);

    // 3.发送请求
    xhr.send();

    // 4.监听状态改变
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                fun(xhr);
            }
        }
    }
}


// 数据转换为窗体格式
function formData(data) {
    var arr = [];
    for (var key in data) {
        arr.push(key + "=" + data[key]);
    }
    data = arr.join("&");
    return data;
}


// 封装 post 请求
function postData(data, url, fun) {
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    // 2.发起请求
    xhr.open("POST", url);
    // 设置请求头
    if (data instanceof Object) {
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(data));
    } else {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    // 4.监听状态改变
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                fun(xhr);
            }
        }
    }
}