什麼是ajax?

Asynchronous JavaScript And XML  非同步JavaScript和XML  ,建立互動式的網頁開發技術

是屬於客戶端與伺服器之間互動的一種技術

與傳統的互動比較

傳統的互動(整個頁面重新整理+請求和響應同步處理)

        瀏覽器發請求-->tomcat-->tomcat響應給瀏覽器-->jsp servlet處理 -->返回響應瀏覽器顯示響應結果

使用Ajax互動(區域性重新整理和非同步處理)

        客戶請求-->XMLHttpRequest發請求-->到tomcat-->XMLHttpRequest接受結果-->顯示瀏覽器

Ajax好處

區域性重新整理和非同步處理

提高了程式的互動效率(傳遞數量少)

提高使用者體驗(避免了整個頁面的頻繁重新整理)

Ajax原理

Ajax是一系列技術的綜合運用

基於js去傳送請求和響應處理

以XMLHttpRequest物件為核心

涉及Html css 頁面渲染技術

涉及xml,json等資料互動格式

//servlet響應設定字元: res.setContentType("text/plain;charset=utf-8");

使用JavaScript建立XMLHttpRequest

<!-- 獲取xmlHttpRequest --> <script type="text/javascript"> //建立XmlHTTPRequest function getXhr(){ var xhr; if(window.XMLHttpRequest){ //判斷瀏覽器,是否是ie的老版本 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } </script>     測試 <a href="#" onclick="getXhr()">檢視上證指數</a>

傳送Http請求

function sendRequest() { var xhr = getXhr(); xhr.open("get","demo1.do",true);//建立一個http請求 xhr.send(null);//傳送http請求 }

回撥函式

        function sendRequest() {
            var xhr = getXhr();
            xhr.open("get","demo1.do",true);//建立一個http請求
            //註冊一個回撥函式,請求處理完成之後呼叫
            xhr.onreadystatechange= function(){
                if(xhr.readyState==4){//請求處理完畢
                    //獲取伺服器返回的資訊
                    var msg =xhr.responseText;
                    //將訊息放到span  span的id叫msg
                    document.getElementById("msg").innerHTML=msg;
                }    
            };
            xhr.send(null);//傳送http請求
        }

註釋:

readyState: 0,1,2,3,4     4就是請求處理完畢

responseText 獲取伺服器返回的文字

responseXML 獲取伺服器返回的XML