1. 程式人生 > >jsp頁面中的程式碼執行載入順序

jsp頁面中的程式碼執行載入順序

一.jsp頁面中的程式碼執行載入順序介紹

1. java是在伺服器端執行的程式碼,jsp在伺服器的servlet裡執行,而javascript和html都是在瀏覽器端執行的程式碼。所以載入執行順序是是java>jsp>js。

2. js在jsp中的載入順序

頁面上的js程式碼是html程式碼的一部分,所以頁面載入的時候是由上而下載入。所以js載入的順序也就是頁面中<script>標籤出現的順序。<script>標籤裡面的或者是引入的外部js檔案的執行順序都是其語句出現的順序,其中js執行的過程也是頁面裝載的一部分。

2.1 在js指令碼中定義的全域性變數和函式,都可以在後面的指令碼中呼叫。變數的呼叫,必須是前面已經聲明瞭的,否則變數返回的值是undefined。同一段指令碼中,函式定義可以出現在函式的呼叫後面;若函式的定義和呼叫在兩個指令碼段中,函式呼叫在函式定義之前就會報函式未定義錯誤。

2.2 js中出現ajax的非同步載入

由於ajax的非同步載入可能會導致語句的執行順序並不是按照語句的出現順序來執行。下面以我做任務時遇到的問題為例:

在頁面初始載入的時候需要向jsp傳送請求來獲得該頁面所需的資料,在ajax成功函式中,對data的操作所需時間過長,就會導致在ajax函式外面的confirm與loadTree比data操作後面的語句先執行。最終在loadTree中使用data的值得時候就為空,此時全域性變數openTab_Id就為空。

 

二.關於JS和html程式碼的執行先後有關問題

關於JS和html程式碼的執行先後問題

  JS程式碼可以在html程式碼的<head>和<body>裡面引用,所以按照解析html程式碼的先後順序來決定JS的執行的先後順序,可以看下面的一段程式碼來驗證:

  1.在<head>裡面的JS誰先被引用,誰就優先執行,在本例中外部引用的JS第一個執行。緊接著下面的一個<script>“最先實行”程式碼執行。

  2.在<body>裡面的JS要比<head>裡面的JS後執行,因為html程式碼是先執行<head>再執行<body>的,緊接著執行“中間執行1”,然後頁面上執行html程式碼“This is my JSP page. ”,在按照順序執行“中間執行2”的JS程式碼。

       3.執行-----------------------我是documengt--中間執行3

  4.最後頁面全部加在完成之後,就是從<head>一直到<body>全部執行完,出發頁面載入完成函式onload(),然後處罰“最後執行”JS。

 

  5.關於CSS樣式,直接在標籤後面style引用效果最強,在head裡面定義的樣式引用效果次之,在head裡面引用外部的樣式效果最弱,用JS改寫的樣式,一般比直接引用的樣式要強。

注意:   window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。 
               $(document).ready()是DOM結構繪製完畢後就執行,不必等到載入完畢。            

              window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個 

              $(document).ready()可以同時編寫多個,並且都可以得到執行 

-------------------------------------------------------------------------------------------------------------------------------------

  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
 alert("最先執行");
   </script>
<script type="text/javascript">
  $(document).ready(function(){
    alert("我是documengt--中間執行3");
  })
</script>
</head>
<body onload="alert('最後執行');">
  <script type="text/javascript">
  alert("中間執行1");
  </script>
  This is my JSP page. <br>
  <script type="text/javascript">
  alert("中間執行2");
  </script>
</body>


 
</html>