AJAX

AJAX全稱Asynchronous JavaScript and XML,意思就是用JavaScript執行異步網絡請求。
Web運作的原理就是,一次HTTP請求對應一個頁面。
如果要讓用戶留在當前頁面中,同時又要發出新的HTTP請求,那就可以使用js來發送請求,接收到數據之後再用js更新頁面,這樣用戶就可以停留在當前頁面,而數據卻可以得到更新。
用JavaScript寫一個完整的AJAX代碼並不複雜,但是需要注意:AJAX請求是異步執行的,也就是說,要通過回調函數獲得響應。

 

AJAX主要依靠的是XMLHttpRequest對象:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script>
        window.onload=function () {


            function success(text) {
                var p = document.getElementById('txt');
                p.innerText = text;
            }

            function fail(code) {
                var p = document.getElementById('txt');
                p.innerText = 'Error code: ' + code;
            }

            // 新建XMLHttpRequest對象
			
            var request;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest();
            } else {
				//兼容ie
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }

            //設置回調函數,在回調函數中使用request.readyState === 4來判斷請求是否完成
            //如果已完成,再根據status === 200判斷是否是一個成功的響應
            request.onreadystatechange = function () {
                // 狀態發生變化時,函數被回調
                if (request.readyState === 4) { // 成功完成
                    // 判斷響應結果:
                    if (request.status === 200) {
                        // 成功,通過request.responseText拿到響應的文本:
                        return success(request.responseText);
                    } else {
                        // 失敗,根據響應碼判斷失敗原因:
                        return fail(request.status);
                    }
                } else {

                    // HTTP請求還在繼續...
                }
            }

            // 發送請求:
            request.open('GET', 'http://localhost:63342/WEBcode/test/my.xml');
            //open方法有3個參數,第一個參數指定是get還是post第二個參數指定URL地址(與當前地址要完全相同),第三個參數指定是否使用異步默認true
            request.send();
            //發送請求

            alert('請求已發送,請等待響應...');
        }

    </script>
</head>
<body>
<div >
    <p id="txt" style="color: red"></p>
</div>
</body>
</html>



my.xml
<?xml version="1.0" encoding="gb2312"?>

 


GET請求和POST請求的區別:


1.效率


GET的意思是『得』,從服務器獲取數據(也可以上傳數據,參數就是),效率較高
POST的意思是『給』,但可以向服務器發送數據和下載數據,效率不如GET
2.緩存


GET 請求能夠被緩存,默認的請求方式也是有緩存的
POST請求默認不會緩存
緩存是針對URL來進行緩存的,GET請求由於其參數是直接加在URL上-的,一種參數組合就有一種URL的緩存,可以根據參數來進行一一對應,重複請求是冪等的(不論請求多少次,結果都一樣);
而POST請求的URL沒有參數,每次請求的URL都相同,數據體(HTTPBody)可能不同,無法一一對應,所以緩存沒有意義
3.安全性


GET的所有參數全部包裝在URL中,明文顯示,且服務器的訪問日誌會記錄,非常不安全
POST的URL中只有資源路徑,不包含參數,參數封裝在二進制的數據體中,服務器也不會記錄參數,相對安全。所有涉及用戶隱私的數據都要用POST傳輸


4.數據量


HTTP協議中均沒有對GET和POST請求的數據大小進行限制,但是實際應用中它們通常受限於軟硬件平臺的設計和性能。


GET:不同的瀏覽器和服務器不同,一般限制在2~8K之間,更加常見的是1k以內
POST方法提交的數據比較大,大小靠服務器的設定值限制,PHP默認是2M(具體的話大家以後看後端給的開發文檔就行了)

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章