Ajax總結

Ajax的總結

• 主要從Ajax是什麼？能夠用來幹什麼？基本要素，優缺點，執行過程等幾方面來解釋。

Ajax是什麼？

• Ajax主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，早期的瀏覽器並不能原生支持ajax，可使用隱藏幀（iframe）方式變相實現異步刷新，使用ajax原生髮送請求主要經過XMLHttpRequest對象實現異步通訊的效果。

Ajax要素

• 實現原生Ajax的核心就是 XMLHttpRequest

• Ajax請求的重點內容：

  • 請求方式：get/post
    一、get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

  二、post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

  • 響應內容：xhr.responseText;(重點)xhr.responseXML

• 原理：利用script標籤向外發出請求不會被拒絕

• ajax的優缺點

  • 優勢：可使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提升用戶體驗。

  • 缺點：
    一、ajax不支持瀏覽器back按鈕。

  二、安全問題 AJAX暴露了與服務器交互的細節。
  三、對搜索引擎的支持比較弱。
  四、破壞了程序的異常機制。

Ajax的異步刷新

• iframe 在一個頁面內部嵌入一個子頁面

  • name屬性表示iframe的名稱，用於區分不一樣的iframe

  • iframe屬性frameborder表示子頁面的邊框

  • width和height分別表示子頁面的寬高

  • src屬性表示嵌入子頁面的url地址

• 能夠經過表單的target屬性指向iframe的name屬性值，表示響應內容在子頁面刷新

<div id="info"></div>
    <form action="./inner.php" method="post" target="abc">
        用戶名：<input type="text" name="username">
        密  碼：<input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <iframe width="0" height="0" frameborder="0" name="abc"></iframe>

<?php 

    $uname = $_POST['username'];
    $pw = $_POST['password'];
    // js中的parent表示父級頁面
    if($uname == 'admin' && $pw == '123'){
        echo '<script> parent.document.getElementById("info").innerHTML = "登陸成功";</script>';
    }else{
        echo '<script> parent.document.getElementById("info").innerHTML = "用戶名或者密碼錯誤";</script>';
    }
        
 ?>

ajax的基本操做步驟

• 執行過程

// 一、建立XMLHttpRequest對象
            var xhr = new XMLHttpRequest();
            // 二、配置發送參數
            xhr.open('get','./data.php');
            // 三、執行發送動做
            xhr.send(null);
            // 四、處理響應
            xhr.onreadystatechange = function(){
                if(xhr.status == 200){
                    if(xhr.readyState == 4){
                        // 在這裏才能夠獲取服務器返回的數據
                        var result = xhr.responseText;
                        if(result === '1'){
                            var info = document.getElementById('info');
                            info.innerHTML = '服務器數據已經返回';
                        }
                    }
                }
            }

• 封裝

function myajax(type,url,param,callback){
    // 一、建立xhr對象
    var xhr = null;
    if(window.XMLHttpRequest){
        // 標準寫法
        xhr = new XMLHttpRequest();
    }else{
        // IE的寫法
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 二、準備發送參數
    if(type == 'get'){
        // 處理get請求參數，而且進行編碼
        url += '?' + encodeURI(param);
    }
    xhr.open(type,url);
    // 三、執行發送動做
    var data = null;
    if(type == 'post'){
        // 若是是post提交，那麼就把參數傳遞給send
        data = param;
        // post提交必須設置請求頭
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }
    xhr.send(data);
    // 四、處理響應（指定回調函數）
    // 下面的回調函數何時執行？不肯定的
    xhr.onreadystatechange = function(){
        // 判斷響應的狀態
        if(xhr.status == 200 && xhr.readyState == 4){
            // 獲取響應數據
            var result = xhr.responseText;
            // 調用回調函數
            callback(result);
        }
    }
}