Ajax 同步異步互相轉換以及區別


Ajax同步異步的區別:

xmlHttp.open(method,url,async);

async:布爾值,用來說明請求是否為異步模式。是來控制JavaScript如何執行該請求。

異步請求:當async設置為true時,將以異步模式發送請求,JavaScript代碼將繼續執行而不再等待響應,且必須使用一個事件處理函數來監控請求的響應。

同步請求:當async設置為false時,將以異步模式發送請求,JavaScript將等接收到響應后再繼續執行剩余代碼。這意味着如果響應時間長,用戶在瀏覽器收到響應前是無法與其交互的。

因此,Ajax開發建議是:使用異步請求來實現數據獲取,使用同步請求來實現與服務器之間發送和接收簡單的消息。

用同步模式來發送請求(將open()方法的第三個參數設置為false),可以使你在調用send()方法之后馬上對其響應進行處理。

這對於想讓用戶交互等待響應,或希望只接受很少的數據(例如,小於1kb)的應用場景是很有用的。

而對於通常數據量或者較大的數據量而言,最好是使用異步調用

Ajax例子:

復制代碼
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Ajax同步異步轉換</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>

    <body>

        <script>
            //在post/get提交方式的簡寫:
            $.post/get("url",{data},function(response){});
            //默認是異步的!

            $.ajax(
                type: "POST/GET",
                url: "",
                data: {},
                dataType: "json",
                async: true / false,
                success: function(date) {

                }
            );
            //success是之前的寫法,現在推薦用.dane()

            //這是最常見的使用ajax方法了。下面實現ajax的同步請求:
            $.ajax(
                type: "POST/GET",
                data: {},
                async: false,
            ).done(function(date) {

            });
            //ajax同步請求最常見的就實現ajax請求的結果數據返回。 
            //比如在用ajax方法成功得到相應后,我們需要把ajax的返回結果return出去給外部的函數使用這時需要同步。
            function ajax() {
                var backData;
                $.ajax(
                    type: ”post”,
                    data: {},
                    async: false, //更改為同步 
                ).done(
                    function(response) {
                        backData = response;
                    });
                return backData;
            }
            var newData = ajax();
            //此時newData = response;
            //在此過程中注意修改async, 它如果是true( 默認), 
            //那么就是在異步的情況下, 這種情況下實現return是不能實現的, 因為異步就說明了程序的執行順序和效果發生了改變。 修改為同步, 實現返回值。
            
            //舉例ajax異步轉同步
            //添加新用戶
            function ajaxNew(username){
                var username;
                var newVal;//添加以后新用戶的信息
                $.ajaxSetup({ //ajax異步轉同步
                    async : false
                });   
            
                $.get("./ajaxAdmin.php?use="+username+"&new=1",
                    function(data,status){
                        // alert("內容:"+data+"\n狀態: "+status);
                        //存儲信息
                        newVal=data;
                    });
                return newVal;
                alert(newVal);
            }

            
        </script>
    </body>

</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM