WEB前端第六十一課——xhr對象POST請求、xhr兼容性、timeout、progress

時間  2021-01-30
標籤 php html jquery 數據庫 json 瀏覽器 緩存 服務器 app 函數 欄目 HTML 简体版
原文   原文鏈接

1.xhr對象發送post請求php

　　Ajax中post請求與get請求不一樣之處在於多了一個表單，而get請求則是經過url發送附加信息。html

　　在xhr對象中，post請求能夠經過FormData構建表單數據。jquery

　　語法：var formData = new FormData();數據庫

　　　　　formData.append('key',value);　　//value爲字符串時須要使用引號。json

　　　　　xhr.send(formData);瀏覽器

　　說明：formData的建立必須在「xhr.send(formData)」以前！緩存

　　示例：服務器

　　　　var userName = document.querySelector('.userName').value;app

　　　　var userCode = document.querySelector('.userCode').value;函數

　　　　var formData = new FormData();　　//FormData()爲系統內置對象類

　　　　formData.append('uName',userName);

　　　　formData.append('uCode',userCode);

　　　　xhr.send(formData);

　　補充：

　　　⑴ GET請求的主要特色：

　　　　GET請求可被緩存，請求保留在瀏覽器歷史記錄中

　　　　GET請求可被收藏爲書籤

　　　　GET請求不該在處理敏感數據時使用

　　　　GET請求有長度限制

　　　　GET請求只應當用於取回數據

　　　⑵ POST請求的主要特色：

　　　　POST請求不會被緩存，不會保留在瀏覽器歷史記錄中

　　　　POST請求不能被收藏爲書籤

　　　　POST請求對數據長度沒有要求

　　　⑶ 與POST相比，GET 更簡單也更快，而且在大部分狀況下都能用。

　　　　然而，在如下狀況中，需使用POST請求：

　　　　　　沒法使用緩存文件（更新服務器上的文件或數據庫）

　　　　　　向服務器發送大量數據（POST沒有數據量限制）

　　　　　　發送包含未知字符的用戶輸入時，POST比GET更穩定也更可靠

　　　　參考資料：w3cschool

2.xhr對象兼容問題

　　xhr對象的獲取方式在 IE 和 非IE 環境下須要使用不一樣的方法。

　　語法：

　　　　IE瀏覽器支持的方法：ActiveXObject('')

　　　　非IE環境支持的方法：XMLHttpRequest()

　　所以，在建立 xhr 對象時須要進行判斷，示例以下：

　　　　if(window.XMLHttpRequest){

　　　　　　var xhr = new XMLHttpRequest();

　　　　}else if(window.ActiveObject){

　　　　　　var xhr = new ActiveXObject('');

　　　　}

　　也能夠直接使用三目運算進行處理：

　　　　xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

3.請求超時

　　timeout 屬性值等於一個整數，用於設置當請求發出後等待接收響應的時間。

　　ontimeout() 方法則是等待超時後，自動執行的回調函數。

　　語法：

　　　　xhr.timeout == n;　　　　//時間單位「毫秒」，表示請求發出後響應等待時間。

　　　　xhr.ontimeout = function(){

　　　　　　console.log('The request for'+url地址+'time out');

　　　　}

　　說明：若是在設置的時間內沒能收到後臺響應內容，則視爲請求超時自動執行ontimeout函數。

　　　　　若是該屬性設置等於 0（默認值），表示沒有時間限制！

　　代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生Ajax請求</title>
<!--    <script src="../JScodeFile/jquery-1.8.3.js"></script>-->
</head>
<body>
    <label for="userName">登陸帳戶</label>
    <input type="text" id="userName" class="userName">
    <br>
    <label for="userCode">登陸密碼</label>
    <input type="text" id="userCode" class="userCode">
    <br>
    <button>登陸</button>
<script>
    var uName = document.querySelector('.userName');
    var uCode = document.querySelector('.userCode');
    var btn = document.querySelector('button');
    btn.onclick=function () {
//      var xhr=new XMLHttpRequest();   //建立對象，準備發送Ajax請求

//      考慮瀏覽器兼容性問題，建立 xhr 對象時須要進行判斷。
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject();
        }
        xhr.onreadystatechange=function () {    //監聽後臺接收請求狀態的變化
            if (xhr.readyState==4){             //判斷當前請求進行到何種狀態，屬性值 4 表示後臺已經接收到前臺請求
                if (xhr.status==200){           //判斷前臺是否準確接收到後臺反饋的數據，屬性值 200 表示通訊成功
                    console.log(xhr.responseText);  //獲取後臺反饋的完整數據，json串
                    console.log(typeof xhr.responseText);   //返回結果爲 string 類型
                    console.log(JSON.parse(xhr.responseText));   //解析返回結果轉換爲對象
                }
            }
        }
        xhr.timeout=2000;       //超時設置單位「毫秒」！！
        xhr.ontimeout=function(){
            alert('訪問超時，請刷新頁面從新加載。')
        }
//      使用 get 方式發送請求：
        xhr.open('get',"xhr.php?name="+uName.value+"&code="+uCode.value,true);
//         xhr.open('get',"xhr.php?name="+$('.userName').val()+"&code="+$('.userCode').val(),true);
        xhr.send(null);

//      使用 post 方式發送請求：
/*        xhr.open('post','xhr.php',true);
        var formD = new FormData();
        formD.append('name',uName.value);
        formD.append('code',uCode.value);
        xhr.send(formD);*/
    }
</script>
</body>
</html>

<?php
/*    $name1=$_POST['name'];
    $code1=$_POST['code'];*/
    $name1=$_GET['name'];
    $code1=$_GET['code'];
    $res = array('msg'=>'ok','info'=>$_GET);
    $res['userName']=$name1;
    $res['userCode']=$code1;
//    sleep(3);       //設置服務器睡眠，單位「秒」！！
    echo json_encode($res);
?>

4.進度條

　　⑴ progress

　　　　HTML中使用<progress>標籤用於定義運行中的任務進度。

　　　　progress屬性有：

　　　　　　max，設置任務完成的值；

　　　　　　value，設置任務當前進度值。

　　　　注意：<progress>須要與JS配合使用顯示任務進度；

　　　　　　<progress>不能用於表示度量衡，如存儲空間使用狀況（使用<meter>標籤）

　　⑵ progress經常使用屬性

　　　　lengthComputable，返回一個布爾值，表示當前進度是否有可計算長度，

　　　　　　　　　　　　　默認爲true，表示進度沒有100%，進度100%時變爲false；

　　　　total，返回一個整數，表示當前進度的總長度，

　　　　　　若是是經過HTTP下載資源，表示內容自己長度，不包含HTTP頭部的長度，

　　　　　　若是lengthComputable屬性值爲false，則total屬性沒法取得正確的值。

　　　　loaded，返回一個數值，表示當前進度已經完成的數量，

　　　　　　該屬性值除以total屬性值，能夠獲得目前進度的百分比。

　　⑶ upload

　　　　upload是XMLHttpRequest對象的一個屬性，其屬性值亦是一個對象，

　　　　　　該對象定義了addEventListener()方法和整個progress事件集合。

　　代碼示例：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>進度條</title>
</head>
<body>
    <progress max="1" value="0"></progress>
    <input type="file" name="tempFile" class="tempFile" multiple><br>
    <button onclick="fileSubmit()">上傳文件</button>
    <script>
        function fileSubmit() {
            var files=document.querySelector('.tempFile').files;
        //  發送文件須要使用POST方式，建立FormData對象。
            var fileData=new FormData();
            for (var i=0,file;file = files[i];i++){
        //  將文件添加到FormData對象中。
                fileData.append('fileName',file.name);
            }
        //  使用append方法添加到FormData的數據，並非以對象屬性的方式存儲，外界沒法直接訪問到數據
        //  須要使用 for of 方法才能在控制檯中打印輸出。
            for (var value of fileData.values()){
                console.log(value);
                console.log(typeof value);
            }
        //  Ajax請求對象
        //     var xhr=new XMLHttpRequest();    //直接建立
            if (window.XMLHttpRequest){         //兼容性方式建立
                var xhr=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                var xhr=new ActiveXObject('');
            }
            // var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('');
        //  監聽請求響應通訊狀態
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4){
                    if (xhr.status==200){
                        console.log(JSON.parse(xhr.responseText));      //FormData添加文件時，沒法直接解析輸出！
                    }
                }
            }
        //  任務進度監聽，當上傳進度發生改變時，回調函數自動執行
            var progressBar = document.querySelector('progress');
            xhr.upload.onprogress=function(eve){
                if (eve.lengthComputable){
                    progressBar.value = (eve.loaded/eve.total);
                }
            }
        //  準備發送請求上傳文件
            xhr.open('post','progress.php',true);
            xhr.send(fileData);
        }
    </script>
</body>
</html>

<?php
    echo json_encode($_POST['fileName']);
?>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程