AJAX 前后端交互必须掌握的知识

AJAX

// Asynchronous JavaScript And XML
    异步        js         和  xml
        
// 概念 
    前端程序 和 后端程序 交换的方式
​
// 特点
    异步
    局部数据交互(没有页面跳转)
​
// ajax基本语法 
    ajax使用的面向对象编程方式
    通过 内置构造函数 创建 ajax实例化对象 
    通过 ajax实例化对象的函数方法 执行对应的程序
        1,  创建ajax实例化对象
            const xhr = new XMLHttpRequest();
        2,  设定请求方式 设定请求url地址
            xhr.open('psot','url地址')
        3,  如果是post方式 需要设定请求头格式
            xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
        4,  发送设定好的请求
            send()
        5,  接收请求结果
            xhr.addEventListener('load' , ()=>{
                console.log( xhr.response );
                })
            }) 

• 请求_get方式

<script>
// 点击 button标签时 触发 ajax 程序
    oBtn.addEventListener('click' , ()=>{ 
        // 1, 创建 ajax 实例化对象对象 
            const xhr = new XMLHttpRequest();
            console.log( xhr );
​
        // 2,   设定open()
        // url地址后携带参数 用问号隔开
    xhr.open( 'get',`http://localhost:8888/test/third?name='张三'&age=${Number(oIptAge.value)}`);
​
        // 3, 如果是post请求方式设定请求头格式
​
        // 4, 发送请求
            xhr.send();
    
         // 5, 接收响应体结果
            xhr.addEventListener('load' , ()=>{
                // 当 ajax请求 都执行结束 触发的函数程序
​
                // 其中 xhr.response 和 xhr.responseText
                // 存储 解析的响应报文中存储的响应体内容
                // 也就是 xhr.response 和 xhr.responseText 存储的是后端响应的内容
                // 从 http的响应报文中 解析出 响应体数据 存储到 ajax实例化对象的属性中
                console.log( xhr.response );
            })
        })
    </script>

• 请求_post方式

<script>
    //  给button标签添加点击事件
    oBtn.addEventListener( 'click' , ()=>{
            // 1, 创建实例化对象
            const xhr = new XMLHttpRequest();
​
            // 2, 设定open()
            xhr.open( 'post' , 'http://localhost:8888/test/fourth' );
​
            // 3, 如果是post方式 设定请求头格式
            xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
​
            // 4, 设定send()
            // 携带参数  以键值对字符串形式携带参数 多个键值对使用 & 符号间隔
            xhr.send(`name=${oIptName.value}&age=${Number( oIptAge.value )}`);
​
            // 5, 请求执行结束 触发的函数程序
            xhr.addEventListener('load' , ()=>{
                console.log( xhr.response );
            })
        }) 
</script>

• 封装AJAX

// 封装的ajax请求函数
function myAjax( resObj = {} ) {
    const valObj = {
        type: 'get',
        data: '',
        url: '',
        success: () => { },
        error: () => { },
    };
    if (typeof (resObj.data) === 'object') {
        let str = '';
        for (let key in resObj.data) {
            str += `&${key}=${resObj.data[key]}`;
        }
        resObj.data = str.substr(1);
    }
    for (let key in valObj) {
        if (resObj[key] !== undefined) {
            valObj[key] = resObj[key];
        }
    }
    const xhr = new XMLHttpRequest();
    console.log(xhr);
    if (valObj.type.toLowerCase() === 'get') {
        xhr.open('get', valObj.data === '' ? valObj.url : `${valObj.url}?${valObj.data}`);
        xhr.send();
    } else if (valObj.type.toLowerCase() === 'post') {
        xhr.open('post', valObj.url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(valObj.data);
    }
    xhr.addEventListener('load', () => {
        if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
            valObj.success(xhr.response);
        } else {
            valObj.error();
        }
    })
}

• 调用AJAX

myAjax({
    type:'post',
    url:'http://localhost:8888/users/login',
    data:{
        username:oIptName.value,
        password:oIptPwd.value,
    },
    success:function( result ){
        console.log( result );
    },
    error:()=>{
        console.log('请求失败')
    }
});
})

• AJAX状态码

// ajax实例化对象.readyState
// ajax状态码 
0   表示只是创建了ajax实例化对象
1   表示ajax实例化对象设定了 open 以及 请求头
2   表示ajax实例化对象执行了 send 发送了请求
3   表示ajax请求结束了 接收了 响应报文
4   表示ajax从 响应报文中解析了响应体数据 
存储到 ajax实例化对象的 response 和 responseText 中
​
当 ajax状态码 是 4 时 表示 请求结束 并且 解析完成了 响应体数据
​
// ajax实例化对象.status
// http状态码
200 - 299 表示请求结束并且请求成功