JavaScript和Ajax部分（3）

2一、 原生（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返回值操做頁面元素

          }

        }

     }

2二、 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格式的內容信息

 

2三、 怎麼處理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：不推薦

 

2四、 爲何使用Ajax框架？

1).簡化JavaScript的開發難度

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

彈出警告信息、動態文字等。而JavaScript被賦予的操做文檔對象模型（DOM）與測控CSS的強大能力被忽視了。

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

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

3).簡化開發流程

以前開發客戶端與服務器異步交互程序必定能體會到在開發過程當中至關繁瑣，必須檢查處理狀態、指定服務器處理程序和設置回調函數等細節

2五、 經常使用的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應用場景封裝爲簡單的標籤。

2六、 什麼是jQuery 

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

jQuery優點：

1).輕量級

2).強大的選擇器

3).出色的DOM操做封裝

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

5).出色的瀏覽器兼容性

6).完善的Ajax支持

7).出色的瀏覽器兼容性等

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

2七、 你爲何要使用jQuery？

答：由於jQuery是輕量級的框架，大小不到30kb,它有強大的選擇器，出色的DOM操做的封裝，有可靠的事件處理機制(jQuery在處理事件綁定的時候至關的可靠)，完善的ajax(它的ajax封裝的很是的好，不須要考慮複雜瀏覽器的兼容性和XMLHttpRequest對象的建立和使用的問題。) 出色的瀏覽器的兼容性。 並且支持鏈式操做，隱式迭代。行爲層和結構層的分離，還支持豐富的插件，jQuery的文檔也很是的豐富。

2八、 你在公司是怎麼用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>

2九、 jQuery 能作什麼？

答：1. 獲取頁面的元素

2. 修改頁面的外觀

3. 改變頁面大的內容

4. 響應用戶的頁面操做

5. 爲頁面添加動態效果

6. 無需刷新頁面，便可以從服務器獲取信息

7. 簡化常見的javascript任務

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

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

1） window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。

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