Javaweb-交互式核心技術Ajax開發步驟

JavaEE-交互式核心技術Ajax開發步驟

概述

AJAX = Asynchronous JavaScript and XML

Asynchronous ：異步的

Ajax 是一種用於創建快速動態網頁的技術，在無需重新加載整個網頁的情況下，能夠更新部分網頁

通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新

傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面

AJAX開發步驟

AJAX的Get請求

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）

下面舉例Ajax的get請求方式

1.創建XMLHttpRequest對象

    <script>
        //創建XMLHttpRequest對象
        function ajaxFun() {
            xmlHttp = new XMLHttpRequest()
        }
    </script>

2…使用open方法建立與服務器的連接

        function valid(obj) {
            ajaxFun();
            var url =""
            xmlHttp.open('get', url, true)
        }

打開連接,第一個參數是請求方式，第二個參數是請求地址，第三個參數是同步還是異步，true異步，false是同步

3.接受服務器的響應（響應你的連接請求）

    <script>
        //創建XMLHttpRequest對象

        function ajaxFun() {
            xmlHttp = new XMLHttpRequest()

        }

        function valid(obj) {
            ajaxFun();
            var url =""
            xmlHttp.open('get', url, true)
            xmlHttp.onreadystatechange=function () {
                //請求服務器完成
                if (xmlHttp.readyState==4){
                    //連接正常
                    if (xmlHttp.readyState==200) {
                        var result = xmlHttp.responseText
                        alert(result)
                    }
                }
            }
            
        }
    </script>

4.向服務器端發送數據

    <script>
        //創建XMLHttpRequest對象

        function ajaxFun() {
            xmlHttp = new XMLHttpRequest()

        }

        function valid(obj) {
            ajaxFun();
            var url =""
            xmlHttp.open('get', url, true)
            xmlHttp.setRequestHeader("content-type","text/html;charset=UTF-8")
            xmlHttp.onreadystatechange=function () {
                //請求服務器完成
                if (xmlHttp.readyState==4){
                    //連接正常
                    if (xmlHttp.readyState==200) {
                        var result = xmlHttp.responseText
                        alert(result)
                    }
                }
            }
            xmlHttp.send(null);
        }
    </script>

如果是get請求數據是在url上傳遞，不需要發送數據

注意

send必須放最後！

AJAX的Post請求

與get差不多

AJAX同步與異步

大家考慮一下上面的代碼，爲什麼回調函數在發送函數的上方，這就是異步的作用！不管你連接是否成功，我都將數據發送出去！

大家可以將異步理解成多線程