詳解Ajax請求(一)前言——同步請求的原理


我們知道,ajax是一種異步請求的方式,想要了解異步請求,就必須要先從同步請求說起。常見的同步請求的方式是form表單的提交,我們先從一種同步請求的示例說起。

我們希望輸入姓名可以從后台得到身份證號。

那么用同步請求的方式要這么做

前端代碼:

<form action="" id = "formId">
<input type="button" id="testBtn" value="測試按鈕" onclick="sentSyn();"/><br>
姓名:<input type="text" name = 'name'  value=""/><br>
身份證號:<input type="text" name = 'ID'  value="${ID }"/><br>
</form>
<script type="text/javascript">alert(111);
function sentSyn(){
    document.getElementById("formId").action = "<%=basePath %>/manage/test/syn";
    document.getElementById("formId").submit();
}
</script>

后台代碼:

@RequestMapping("/syn")
    public void testSyn(HttpServletRequest request, HttpServletResponse response){
        try {
            request.setAttribute("ID", "12345");
            request.getRequestDispatcher("/ajax.jsp").forward(request, response);
        } catch (ServletException | IOException e) {
            e.printStackTrace();
        }
        
    }

姓名輸入"小明" 點擊按鈕頁面上的效果是這樣的:

         

alert(111)先彈了出來,說明頁面重新加載了一次,而且得到小明的身份證號后,名字不見了,原先的數據消失了。要解決這個問題,你用同步請求的方式也是可以的,

在你的后台代碼里加上一行:request.setAttribute("name", request.getParameter("name"));就可以實現數據的回顯。但是彈框還是會出現,說明頁面又一次加載了。

當然,你這樣做輸入中文的話,會出現中文亂碼的問題,這個問題不在本文的討論范圍之內,有興趣可以查看我的另一篇博客關於亂碼問題的研究:http://www.cnblogs.com/cdf-opensource-007/p/6337448.html)

由此我們可以推斷出同步請求是怎么跟服務器進行數據交互的

  使用同步請求,服務器將響應的數據直接輸送給瀏覽器的內存,導致覆蓋瀏覽器內存中原有的數據,瀏覽器接收到響應的數據后只能展示服務器端返回的數據,無法展示發送請求之前在瀏覽器中添加的數據。

  當你使用同步請求與服務器進行數據交互的時候,瀏覽器是直接面對服務器的,也就是在服務器處理請求的過程中瀏覽器處於等待,卡死的狀態,你無法在頁面上進行其他的操作。而且當頁面信息量較大時,你使用同步請求與服務器進行數據交互,又要回顯頁面上眾多的數據時,你的后台代碼將會寫的很麻煩既要處理數據的回顯又要處理請求,增加服務器的壓力。當然同步請求也有他的優點,當你頁面上需要與服務器的數據交互的操作較少時或者需要回顯的數據較少時,推薦使用同步,因為它是直接與服務器進行數據交互的。仁者見仁智者見智,具體問題具體分析,要根據你的使用場景進行選擇。

 

今天就先寫道這里已經很晚了,下篇博客將會對ajax異步請求的原理進行分析。

 


免責聲明!

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



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