JavaScript和Ajax部分（3）

標籤：prot   active   src   false   應用   簡化   事件處理機制   難度   項目經驗   

21、  原生（native） Ajax 使用執行個體

    //建立XMLHttpRequest對象的方法

function createXmlHttpRequest(){

if(window.ActiveXObject){

   return  new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

   return  new XMLHttpRequest();

}

}

//ajax操作

    function showContent(titleobj){

        var url="ShowContentServlet?id="+titleobj.id;  //設定提交路徑

        XmlHttp2 = createXmlHttpRequest();   //建立對象  

        XmlHttp2.onreadystatechange = contentProcessRequest;  //設定回呼函數

        XmlHttp2.open("get",url,true);//get表示路徑中帶參傳值，post表示send方法傳值

        XmlHttp2.send("null");   //發送請求

     }

     //回呼函數， 就是返迴響應後調用的函數

     function contentProcessRequest(){

        if(XmlHttp2.readyState == 4){

          if(XmlHttp2.status == 200){

             //根據ajax傳回值操作頁面元素

          }

        }

     }

22、  XMLHttpRequest 對象簡介？

1）.XMLHttpRequest常用方法，

open("post/get","請求的地址","true/false") ：第三個參數是是否使用非同步請求，可以為true;和false

send(content)： 發送請求，content參數指定請求的參數，如果不需要，則為null,

setRequestHeader(header,value) ：佈建要求的頭資訊

2）XMLHttpRequest常用屬性，

a) onreadystatechange 指定XMLHttpRequest對象的回呼函數。相當於一個事件，當XMLHttpRequest的狀態發生

改變的時候，都會調用onreadystatechange指定的回呼函數。

代碼案例: XMLHttpRequest對象.onreadystatechange =  函數名;

b) readyState: XMLHttpRequest的狀態資訊,取值如下

    0:已經建立了XMLHttpRequest對象，但是還沒有初始化

    1:此時，代碼已經調用open()方法並且XMLHttpRequest已經準備好把一個請求發送到伺服器

    2:此時，已經通過一個send()方法把一個請求發送到了伺服器，但還沒收到響應

    3:此時已經接受了HTTP回應標頭部資訊，但是訊息體部分還沒完全接收結束

    4:響應被完全接收

c) status：HTTP的狀態代碼，僅當readyState的值為3或4的時候，status屬性才可，status的值為: 200 ：伺服器響應正常   ， 400：無法找到請求的資源 ， 403：沒有存取權限 404：訪問的資源不存在、 500：伺服器內部錯誤

d)responseText: 獲得響應的常值內容(伺服器返回的普通文本資訊)

f)responseXML:擷取響應的XML格式的內容資訊

 

23、  怎麼處理Ajax中的緩衝

1) 在服務端加 header("Cache-Control: no-cache, must-revalidate");

2) 在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

3) 在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

4) 在 Ajax 的 URL 參數後加上 "?fresh=" + Math.random(); //當然這裡參數 fresh 可以任意取了

5) 第五種方法和第四種類似，在 URL 參數後加上 "?timestamp=" + new Date().getTime();

6) 用POST替代GET：不推薦

 

24、  為什麼使用 Ajax 架構？

1).簡化JavaScript的開發難度

過去JavaScript的往往用於實現一些小玩意、

彈出警告資訊、動態文字等。而JavaScript被賦予的操作文件物件模型（DOM）與測控CSS的強大能力被忽視了。

2).解決瀏覽器的相容性問題

即使能便於使用JavaScript，但一旦遇到各式瀏覽器也會頭痛。不同瀏覽器對JavaScript的支援並不一致，同一瀏覽器的版本不同的支援也不一樣

3).簡化開發流程

之前開發用戶端與伺服器非同步互動程式一定能體會到在開發過程中相當繁瑣，必須檢查處理狀態、指定伺服器處理常式和設定回呼函數等細節

25、  常用的 Ajax 架構有哪些？

1).Prototype

是一個純粹的JavaScript函數庫，對Ajax提供了良好的支援

2).jQuery

另一個非常優秀的JavaScript庫，對Ajax提供良好的支援，與Prototype設計思想不同的是在使用JQuery之後，開發者提供了不再是DOM對象而是JQuery對象。

3).DWR

非常專業的Java Ajax架構，通過DWR架構，可以將Java類中的方法直接暴露給用戶端

4).Dojo

功能強大，包含許多內容，AJax只是其中之一，特點在於控制項和控制項系統

5).AjaxTags

由一系列JSP標籤組成，將常用的Ajax應用情境封裝為簡單的標籤。

26、  什麼是 jQuery 

jQuery也就是JavaScript和Query(查詢),即是輔助JavaScript開發的庫。

jQuery優勢：

1).輕量級

2).強大的選取器

3).出色的DOM操作封裝

4).可靠的事件處理機制

5).出色的瀏覽器安全色性

6).完善的Ajax支援

7).出色的瀏覽器安全色性等

8).jQuery理念：寫的少，做的多

27、  你為什麼要使用jQuery？

答：因為jQuery是輕量級的架構，大小不到30kb,它有強大的選取器，出色的DOM操作的封裝，有可靠的事件處理機制(jQuery在處理事件綁定的時候相當的可靠)，完善的ajax(它的ajax封裝的非常的好，不需要考慮複雜瀏覽器的相容性和XMLHttpRequest對象的建立和使用的問題。) 出色的瀏覽器的相容性。 而且支援鏈式操作，隱式迭代。行為層和結構層的分離，還支援豐富的外掛程式，jQuery的文檔也非常的豐富。

28、  你在公司是怎麼用jQuery的？

答：在項目中是怎麼用的是看看你有沒有項目經驗(根據自己的實際情況來回答)

你用過的選取器啊，複選框啊，表單啊，ajax啊，事件等

配置JQuery環境的步驟

1）下載jQuery類庫，在jsp頁面引用jQuery類庫即可

<script type="text/javascript" src="jQuery/jQuery-1.7.2.min.js"/>

2）jQuery的調用樣本：

<script>

//建立一個頁面預設啟動調用的特效

$(document).ready(

function(){

alert("頁面啟動時調用該方法!");

}

);

 

//以上代碼也可以寫成如下的簡寫方式

$(function(){

alert("頁面啟動時調用該方法!");

});

</script>

29、  jQuery 能做什嗎？

答：1. 擷取頁面的元素

2. 修改頁面的外觀

3. 改變頁面大的內容

4. 響應使用者的頁面操作

5. 為頁面添加動態效果

6. 無需重新整理頁面，即可以從伺服器擷取資訊

7. 簡化常見的javascript任務

30、  $(document).ready()方法和window.onload有什麼區別？

答: 兩個方法有相似的功能，但是在執行時機方面是有區別的。

1） window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全載入到瀏覽器後才執行的。

2） $(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。

JavaScript和Ajax部分（3）