提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

127.AJAX封装_响应的处理

封装响应AJAX 处理 127
2023-09-27 14:23:04 时间 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX封装_响应的处理</title>
</head>

<body>
    <h1>AJAX封装_响应的处理</h1>
    <input type="button" value="请求数据get" onclick="data_get()">
    <input type="button" value="请求数据post" onclick="data_post()">

    <script>
        function AJAX(options) {
            let xhr = new XMLHttpRequest()
            let params = ''
            for (let key in options.data) {
                value = options.data[key]
                params = params + key + '=' + value + '&'
            }
            params = params.substr(0, params.length - 1)
            if (options.type == 'get') {
                options.url = options.url + '?' + params
            }
            xhr.open(options.type, options.url)
            if (options.type == 'post') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(params)
            } else {
                xhr.send(params)
            }
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        options.success(xhr.responseText)
                    } else {
                        options.error(xhr.status)
                    }
                }
            }
            //网络错误
            xhr.onerror = () => {
                options.error('10000:网络错误')
            }
        }



        function data_get() {
            AJAX({
                type: 'get',
                url: 'http://httpbin.orgdas/getdad',
                data: { 'name': 'sxt', 'pwd': 123 },
                success: (data) => {
                    console.log(data);
                    console.log('----------test-------');
                },
                error: (data) => {
                    console.log('返回的状态码是' + data);
                }

            })
        }
    </script>
</body>

</html>

相关文章