黄色电影一区二区,韩国少妇自慰A片免费看,精品人妻少妇一级毛片免费蜜桃AV按摩师 ,超碰 香蕉

• xhr的基本使用  
• 什么是xhr
• 使用xhr發(fā)起get請(qǐng)求
• 了解xhr對(duì)象的readystate屬性
• 使用xhr發(fā)起帶參數(shù)的get請(qǐng)求
• url編碼與解碼    
• 什么是url編碼
• 如何對(duì)url進(jìn)行編碼與解碼
• 使用xhr發(fā)起post請(qǐng)求
• 數(shù)據(jù)交換格式  
• 什么是數(shù)據(jù)交換格式
• xml    
• 什么是xml
• xml和html的區(qū)別
• xml的缺點(diǎn)
• json    
• 什么是json
• json的兩種結(jié)構(gòu)
• json語(yǔ)法的注意事項(xiàng)
• json和js對(duì)象的關(guān)系
• json和js對(duì)象的互轉(zhuǎn)
• 序列化和反序列化
• 封裝自己的ajax函數(shù)  
• 要實(shí)現(xiàn)的效果
• 處理data參數(shù)
• 定義itheima函數(shù)
• 判斷請(qǐng)求的類(lèi)型
• xhr level2的新特性  
• 舊版xhr的缺點(diǎn)
• xhr levle2的新特性
• 設(shè)置http請(qǐng)求時(shí)限。
• formdata對(duì)象管理表單數(shù)據(jù)
• 上傳文件
• 總結(jié)

        //創(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 () {
            //獲取用戶(hù)選擇的文件鼠標(biāo)
            let files = document.queryselector('#file1').files;

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

 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 () {
            //獲取用戶(hù)選擇的文件屬性，是一個(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>