//創(chuàng)建xhr對(duì)象
        let xhr = new XMLHttpRequest();
        //調(diào)用open函數(shù)
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
        //調(diào)用send函數(shù)
        xhr.send()
        //監(jiān)聽(tīng)事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //獲取成功
                console.log(xhr.responseText);
            }
        }

        //創(chuàng)建xhr對(duì)象
        let xhr = new XMLHttpRequest();
        //調(diào)用open函數(shù)
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
        //調(diào)用send函數(shù)
        xhr.send()
        //監(jiān)聽(tīng)事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //獲取成功
                console.log(xhr.responseText);
            }
        }

        let str = '黑馬程序員';
        let str2 = encodeURI(str)
        console.log(str2);
        //utf-8一個(gè)漢字占三個(gè)字節(jié) ，寫(xiě)六個(gè)是黑馬兩個(gè)字。
        let str3 = decodeURI('%E9%BB%91%E9%A9%AC')
        let str4 = decodeURI(str2)
        console.log(str3);
        console.log(str4);

        //創(chuàng)建xhr對(duì)象
        let xhr = new XMLHttpRequest();
        //調(diào)用open（）
        xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
        //設(shè)置Content-Type（固定寫(xiě)法）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //調(diào)用send函數(shù)
        xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書(shū)出版社')
        //監(jiān)聽(tīng)事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

var jsobj ={a:'hello',b:'world'}
var jsonstr = '{'a':'hello','b':'world'}'

        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                var restr = JSON.parse(xhr.responseText)
                console.log(restr);
            }
        }

function resolveData(data) {
    var arr = [];
    for (const k in data) {
        //這里說(shuō)一下對(duì)象的調(diào)用方法，對(duì)象調(diào)用可以使用【】和點(diǎn)，這里的對(duì)象調(diào)用需要用【】的，k是字符串，點(diǎn)后面不能是字符串，所以不能直接data.k，
        //我們可以先進(jìn)行字符串鏈接data.k再使用eval方法進(jìn)行解析，就可以使用點(diǎn)調(diào)用了
        // var str = k + '=' + eval("data." + k);
        var str = k + '=' + data[k];
        arr.push(str);
    }
    return arr.join('&')
}
var str = resolveData({ name: 'xiaoxie', age: 20 });
console.log(str);

function itheima(options) {
    let xhr = new XMLHttpRequest();
    let qs = resolveData(options.data)
--------判斷類(lèi)型 發(fā)起請(qǐng)求 代碼--------------
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
         let result = JSON.parse(xhr.responseText)
            options.success(result)

        }
    }
}

    if (options.method.toUpperCase() === 'GET') {
       xhr.open('get', options.URL + '?' + qs)
        xhr.send();
   } else if (options.method.toUpperCase() === 'POST') {
       xhr.open('post', options.URL)
       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
       xhr.send(qs);
   }

xhr.timeout = 3000

xhr.ontimeout = function(event){
alert('請(qǐng)求超時(shí)')
}

        let xhr = new XMLHttpRequest();
       xhr.timeout = 30;
       xhr.ontimeout = function () {
           console.log(請(qǐng)求超時(shí));
       }
       xhr.open('get', 'http://liulongbin.top:3006/api/getbooks')
       xhr.send()
       xhr.onreadystatechange = function () {
           if (xhr.readyState === 4 && xhr.status == 200) {
               console.log(xhr.responseText);
           }

       }

        let fd = new FormData();
        fd.append('uname', 'xiaoxie')
        fd.append('pwd', 123456)
        let xhr = new XMLHttpRequest();
        xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')
        xhr.send(fd);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status == 200) {
                console.log(JSON.parse(xhr.responseText));
            }
        }

        var form = document.querySelector('#form1')
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            //創(chuàng)建對(duì)象，獲取數(shù)據(jù)。
            let fd = new FormData(form);

            let xhr = new XMLHttpRequest();

            xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata')

            xhr.send(fd)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            }
        })

    <!-- 文件選擇框 -->
    <input type="file" id="file1">
    <!-- 上傳文件的按鈕 -->
    <button id="btnUpload"></button>
    <br>
    <img src="" alt="" id="img" width="800">

        //獲取文件上傳按鈕
        let btn = document.getElementsByTagName('button')[0];
        //為按鈕綁定單擊事件處理函數(shù)
        btn.addEventListener('click', function () {
            //獲取用戶選擇的文件鼠標(biāo)
            let files = document.querySelector('#file1').files;

            if (files.length <= 0) {
                return alert('請(qǐng)選擇要上傳的文件')
            }
            console.log('用戶選擇了待上傳的文件');
        })

 let fd = new FormData()
  fd.append('avatar', files[0])

           let xhr = new XMLHttpRequest();
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        //上傳成功
                        alert('上傳成功')
                        document.getElementById('img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        console.log('圖片上傳失敗' + data.message);
                    }
                }
            }

            //監(jiān)聽(tīng)上傳進(jìn)度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    let uploadProgroess = Math.ceil((e.loaded / e.total) * 100)
                    console.log(uploadProgroess);
                }
            }

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<link rel="stylesheet" 
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 //設(shè)置進(jìn)度條
$('#percent').attr('style', 'width:' + uploadProgroess).html(uploadProgroess + '%')

<!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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" 
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
    <!-- 文件選擇框 -->
    <input type="file" id="file1">
    <!-- 上傳文件的按鈕 -->
    <button id="btnUpload">上傳文件</button>
    <br>
    <img src="" alt="" id="img" width="800">
    <div class="progress" style="width: 300px;">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%
        </div>
    </div>
    <script>
        //獲取文件上傳按鈕
        let btn = document.getElementsByTagName('button')[0];
        //為按鈕綁定單擊事件處理函數(shù)
        btn.addEventListener('click', function () {
            //獲取用戶選擇的文件屬性，是一個(gè)數(shù)組。
            let files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('請(qǐng)選擇要上傳的文件')
            }
            //表單中添加相應(yīng)的數(shù)據(jù)
            let fd = new FormData()
            fd.append('tupian', files[0])
            //使用xhr發(fā)起上傳文件的請(qǐng)求
            let xhr = new XMLHttpRequest();
            //監(jiān)聽(tīng)上傳進(jìn)度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    let uploadProgroess = Math.ceil((e.loaded / e.total) * 100)
                    console.log(uploadProgroess);
                    //設(shè)置進(jìn)度條
                    $('#percent').attr('style', 'width:' + uploadProgroess).html(uploadProgroess + '%')
                }
            }
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)
            //監(jiān)聽(tīng)onreadystatechange事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        //上傳成功
                        alert('上傳成功')
                        document.getElementById('img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        console.log('圖片上傳失敗' + data.message);
                    }
                }
            }
        })


    </script>
</body>

</html>