AJAX 基礎學習

1.什麼是Ajax ?
    --一種用來改善用戶體驗的技術
    --實質是視圖XMLHttpRequest對象異步的向服務器發請求
    --服務器返回部分數據,不是一個完整的頁面,以頁面無刷新的效果
        更改頁面中的局部內容
2.JavaScript 中 如何獲取Ajax對象 ?
    function getXHR(){
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xhr;
    }    
3. AJAX 異步對象的方法
    1)abort()   
        --取消請求
    2)getAllResponseHeaders()
        --獲取響應的全部Http頭
    3)getResponseHeader()
        --獲取指定的Http頭
    4) open()
        --建立請求,method請求類型get,post
    5) send()
        --發送請求
    6)setRequestHeader()
        --指定請求的Http頭
4. AJAX 異步對象的屬性
    1)onreadystatechange
        --發生任何狀態變化時的事件控制對象
    2)readyState
        --請求的狀態
        --0還沒有初始化
        --1正在發送請求
        --2求情完成
        --3請求成功,正在接收數據
        --4數據接收成功
    3)responseText 
        --服務器返回的文本
    4)reponseXML
        --服務器返回的xml,能夠當作DOM處理
    5)status
        --服務器返回的http請求相一致經常使用的有:
        --200表示請求成功
        --202請求被接受但處理未完成
        --400錯誤的請求
        --404資源未找到
        --500呢不服務器錯誤,如asp代碼錯誤等服務器

5. 發送異步請求的步驟
    1)獲取AJAX對象:獲取XMLHttpRequest對象實例
    2)設置回調函數:爲AJAX對象的onreadystatechange事件設定響應函數
        function fn(){
            if(xhr.readyState==4&&xhr.status==200){
                var txt = xhr.responseText;
            }
        }
    3)建立請求:調用XMLHttpRequest對象的open方法
        xhr.open('get','xx.do',true)
        --true:表示發送異步請求
            當AJAX對象發送請求時,用戶任然能夠對當前頁面作其餘操做
        --false:表示發送同步請求
              當AJAX對象發送請求時,用戶不能對當前頁面作其餘操做
    4)發送求情:調用AJAX對象的send方法
        (1)發送GET請求
            --xhr.send(null);
            --若是要傳參數,就在open方法的「URL」後面追加
                如xhr.open("get","xx.do?id=100",true)
        (2)發送POST請求
            --設定請求頭中的content-type屬性的值爲:
                    application/x-www-form-urlencoded
            --xhr.open("post","xx.do",true);
            --xhr.setRequestHeader('content-type',
                'application/x-www-form-urlencoded');
            //在send方法中添加須要傳的參數
            --xhr.send("uname=Dr.");app

相關文章
相關標籤/搜索