Ajax 異步交互

時間 2019-12-05

標籤 ajax 異步交互欄目 Ajax 简体版

原文原文鏈接

異步交互

描述

同步交互html
- 表示先發送一個請求，等待返回響應，在去發送下一個請求，以此反覆
異步交互服務器
- 表示發送一個請求時，不須要等待返回響應，能夠隨時發送下一個請求

XMLHttpRequest對象

XMLHttpRequest對象是Ajax的核心對象
XMLHttpRequest對象是實現異步交互的核心

<body>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    /*
        XMLHttpRequest對象
         * XMLHttpRequest對象是Ajax的核心對象
         * XMLHttpRequest對象是實現異步交互的核心
     */

    /* 經過createXMLHttpRequest()方法來建立一個XMLHttpRequest對象 */
    var xhr = createXMLHttpRequest();
    console.log( xhr );// 獲得一個XMLHttpRequest對象
</script>
</body>

實現Ajax的步驟

建立XMLHttpRequest對象app
- 經過createXMLHttpRequest()方法來建立XMLHttpRequest對象
調用XMLHttpRequest對象的open()方法異步
- open()方法學習
  - 用於與服務器端創建鏈接
- 參數url
  - 第一個參數 - 表示當前的請求方式code
    - 常見的請求方式爲 GET 和 POST
  - 第二個參數 - 表示當前請求的服務器端地址連接
調用XMLHttpRequest對象的send()方法orm
- send()方法htm
  - 用於將客戶端頁面的數據發送給服務器端
- 參數對象
  - 須要傳遞數據內容時 - 向該方法傳遞相關的數據內容
  - 不須要傳遞數據內容時 - 向該方法傳遞null
利用XMLHttpRequest對象的onreadystatechange事件
- onreadystatechange事件
  - 用於監聽服務器端的通訊狀態
- 服務器端的通訊狀態中 - 存在着處理完畢(信號)
  - 接收服務器端返回的處理結果
- readyState屬性
  - 表示服務器端的通訊狀態
  - 屬性值
    - 0 - 未初始化
    - 1 - open()方法被調用
    - 2 - send()方法被調用
    - 3 - 正在響應
    - 4 - 響應已完畢
- responseText屬性
  - 用於接收服務器端的響應結果
將接收到的結果更新到HTML頁面
- 經過HTTP協議來完成

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById( 'btn' );
    btn.addEventListener( 'click', function () {
        /* 實現Ajax異步交互 */

        /* 1. 建立XMLHttpRequest對象 */
        var xhr = createXMLHttpRequest();

        /* 2. 調用XMLHttpRequest對象的open()方法 */
        /* 經過open()方法來創建與服務器端的關係 */
        xhr.open( 'get', 'http://localhost:63342/學習資料/XMLHttpRequest對象.html' );

        /*3. 調用XMLHttpRequest對象的send()方法 */
        /* 經過send()方法來向服務器端發送數據 */
        xhr.send( null );

        /* 4. 利用XMLHttpRequest對象的onreadystatechange事件 */
        /* 設置onreadystatechange事件 */
        xhr.onreadystatechange = function(){
            /* 經過readyState屬性來判斷服務器端的狀態 */
            if (xhr.readyState === 4) {
                /* 經過responseText屬性來獲取服務器端的響應結果 */
                console.log( xhr.responseText );
            }
        }

        /*
            5. 將接收到的結果更新到HTML頁面
             * 經過HTTP協議來完成
         */
    } );
</script>
</body>

readyState屬性

XMLHttpRequest對象的readyState屬性
- 表示服務器端的通訊狀態
- 屬性值
  - 0 - 未初始化
  - 1 - open()方法被調用
  - 2 - send()方法被調用
  - 3 - 正在響應
  - 4 - 響應已完畢
XMLHttpRequest對象的status屬性
- 用於獲得當前請求以後的響應狀態碼
  - 保證當前的異步請求必定是正確的
- 屬性值
  - 200 - 表示請求成功
  - 404 - 表示服務器端地址未找到
responseText屬性
- 專門接收字符串類型的結果內容
responseXML屬性
- 專門接收XML數據格式的結果內容

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById( 'btn' );
    btn.addEventListener( 'click', function(){
        var xhr = createXMLHttpRequest();

        xhr.onreadystatechange = function(){

            /* 顯示readyState屬性 */
            console.log( xhr.readyState );

            /* 判斷當前服務器端的狀態 */
            if ( xhr.readyState === 4 ) {

                /* 顯示status屬性 */
                console.log( xhr.status );

                /* 判斷當前響應狀態 */
                if ( xhr.status === 200 ) {
                  
                    /* 顯示responseText屬性 */
                    console.log( xhr.responseText );
                }
            }
            /* 能夠同時判斷當前服務器端的狀態和響應狀態 */
            if ( xhr.readyState === 4 && xhr.status === 200 ) {
                /* 顯示responseText屬性 */
                console.log( xhr.responseText );
            }
        };

        xhr.open( 'get', 'http://localhost:63342/學習資料/XMLHttpRequest對象.html' );
        xhr.send( null );
    } );
</script>
</body>

send()方法

XMLHttpRequest對象的send()方法
- 用於將客戶端頁面的數據發送給服務器端
參數
- 須要傳遞數據內容時 - 向該方法傳遞相關的數據內容
- 不須要傳遞數據內容時 - 向該方法傳遞null

注意

send()方法的參數與當前的請求方式有關
- 若是當前的請求方式爲 GET
  - send()方法中只能傳遞 null值
    - 將請求數據添加到請求地址連接中
- 若是當前的請求方式爲 POST
  - 須要先經過setRequestHeader()方法來設置請求頭部信息
  - send()方法傳遞請求數據

示例代碼

<body>
<button id="btn">按鈕</button>
<script src="chajian/createXMLHttpRequest.js"></script>
<script>
    var btn = document.getElementById( 'btn' );
    btn.addEventListener( 'click',function(){
        // 1.建立XMLHttpRequest對象
        var xhr = createXMLHttpRequest();

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

        xhr.open( 'get', 'http://localhost:63342/學習資料/XMLHttpRequest對象.html' );

        /* 設置請求頭部信息 */
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.send( null );
    } );
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。