ajax技術的基本原來以及實現過程

異步的概念:當ajax對象(XMLHttpRequest)向服務器發送請求的時候,瀏覽器不會銷貨當前頁面,用戶仍然可以對向前頁面進行操作。

以用戶輸入用戶名註冊判斷該用戶是否存在爲例

當用輸入完用戶名進入下一個輸入框後,當前輸入框失去了一個焦點,從而產生了一個事件,該事件的事務處理函數就調用了一個ajax對象,ajax對象就會向服務器發送一個請求,服務器中會相應這個請求發回一個簡單的文本或者是一個json而不是整個頁面給這個ajax對象,ajax對象事先綁定了一個處理函數,該處理函數從ajax對象中獲得服務器返回的數據,就會採取document操作對頁面局部進行更新。

在這個過程中,html中要有個焦點事件onblur=f1()

然後要先獲得ajax 對象 ,獲得對象可以寫成一個js腳本文件,放到webroot下一個myjs的文件架下

function getXhr(){
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr= new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}

在這裏要再說說ajax對象的一些重要的屬性

onreadystatechange  綁定一個事件處理函數,當readystate發生改變時執行該函數

readyState 通信的狀態  0 1 2 3 4 5  當爲4的時候表示獲得了從服務器返回的所有完整數據

responseText 獲得服務器返回的文本數據

responseXML獲得服務返回的xml文件數據(基本上不是用xml獲得而是用json獲得)

status 獲得狀態碼

ps:json處理數據比xml更快,而且佔用資源更少,所以在ajax數據傳送中更多的是用json,但是xml的格式類型比json要更多,處理複雜的數據輸送也更好些


編程的步驟:

一,獲得ajax對象(上面已經寫過了)

二,發送請求(分get請求和post請求,發送的方式略有不同,而且處理亂碼的方法也不同,後面講到)

1  get請求

    xhr.open('get','check_name.do?username=Tom',true);

    ps:true表示是異步請求,不會消除當前頁面,而且也不影響用戶操作

        false是同步請求,不會消除當前頁面,但是用戶不能操作頁面

    xhr.onreadystatechange=f1;

    xhr.send(null);

2   post請求(沒有消息頭,所以要加上)

    xhr.open('post','check_name.do',true);

    xhr.sendRequestHeader('content-type','......');

    xhr.onreadystatechange=f1;

    xhr.send('username'=$F(username));

三  編寫服務器端的程序(這裏會涉及到參數的中文亂碼問題,另一篇專門寫)

四  用匿名函數的方式來寫處理函數

    xhr.onreadystatechange=function(){

        if(readyState==4&&status==200){

            var txt=xhr.responseText;

            $F('id')=txt;

        }

    }

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