第六章
Ajax 全稱為:“Asynchronous JavaScript and XML”(異步 JavaScript 和 XML),它並不是 JavaScript 的一種單一技術,而是利用了一系列交互式網頁應用相關的技術所形成的結合體。使用 Ajax,我們可以無刷新狀態更新頁面,並且實現異步提交,提升了用戶體驗。
一、Ajax的優勢和不足
(1)優勢主要以下幾點:
1.不需要插件支持(一般浏覽器且默認開啟 JavaScript 即可)
2.用戶體驗極佳(不刷新頁面即可獲取可更新的數據)
3.提升 Web 程序的性能(在傳遞數據方面做到按需放松,不必整體提交)
4.減輕服務器和帶寬的負擔(將服務器的一些操作轉移到客戶端)
(2)Ajax 的不足由以下幾點:
1.不同版本的浏覽器度 XMLHttpRequest 對象支持度不足(比如 IE5 之前)
2.前進、後退的功能被破壞(因為 Ajax 永遠在當前頁,不會幾率前後頁面)
3.搜索引擎的支持度不夠(因為搜索引擎爬蟲還不能理解 JS 引起變化數據的內容)
4.開發調試工具缺乏(相對於其他語言的工具集來說,JS 或 Ajax 調試開發少的可憐)
二、異步和同步
使用 Ajax 最關鍵的地方,就是實現異步請求、接受響應及執行回調。那麼異步與同步有什麼區別呢?我們普通的 Web 程序開發基本都是同步的,意為執行一段程序才能執行下一段,類似電話中的通話,一個電話接完才能接聽下個電話;而異步可以同時執行多條任務,感覺有多條線路,類似於短信,不會因為看一條短信而停止接受另一條短信。Ajax 也可以使用同步模式執行,但同步的模式屬於阻塞模式,這樣會導致多條線路執行時又必須一條一條執行,會讓 Web 頁面出現假死狀態,所以,一般 Ajax 大部分采用異步模式。
二、jQuery中的Ajax
jQuery對Ajax操作方法進行了封裝
第1層:$.ajax()
第2層:$load()、$.get()和$.post()
第三層:$getScript()和$.getJSON()
1、$load() 方法
(1)作用:從web務器上獲取靜態的數據文件
(2)結構:load( url [,data] [.callback])
url(必須, 請求 html 文件的 url 地址,參數類型為 String)、
data(可選,發送的 key/value 數據,參數類型為 Object)
callback(可選,成功或失敗的回調函數,參數類型為函數 Function)。
2、$get()方法和$post()方法
(1)用途:.load()方法是局部方法,因為他需要一個包含元素的 jQuery 對象,$.post()是全局方法,無須指定某個元素。對於用途而言,.load()適合做而對於需要傳遞參數到服務器頁面的,$.get()和$.post()更加合適。
(2)結構:$.get(url [,data] [,callback] [,type])
url: 表示請求HTML頁面的URL地址
data: 發送至服務器的key/value數據
callback: 可選表示載入成功時的回調函數
type: 服務器端返回內容的格式(xml、html、script、json、text和_default);回調函數有兩個參數,分別表示請求返回的內容、請求狀態(success、error、notmodified、timeout);在$.get()方法中,只有當數據成功返回請後,回調函數才會被觸發。
(3)兩種方法的區別
$.post()方法的使用和$.get()基本上一致,他們之間的區別也比較隱晦,基本都是背後的
不同,在用戶使用上體現不出。具體區別如下:
1.GET 請求是通過 URL 提交的,而 POST 請求則是 HTTP 消息實體提交的;
2.GET 提交有大小限制(2KB) ,而 POST 方式不受限制;
3.GET 方式會被緩存下來,可能有安全性問題,而 POST 沒有這個問題;
4.GET 方式通過$_GET[]獲取,POST 方式通過$_POST[]獲取。
3、$.getScript()方法和$.getJson()方法
jQuery 提供了一組用於特定異步加載的方法:$.getScript(),用於加載特定的 JS 文件;
$.getJSON(),用於專門加載 JSON 文件。
(1)有時我們希望能夠特定的情況再加載 JS 文件,而不是一開始把所有 JS 文件都加載了,這時課時使用$.getScript()方法。
//點擊按鈕後再加載 JS 文件
$('input').click(function () {
$.getScript('test.js')
});
(2)$.getJSON()方法是專門用於加載 JSON 文件的,使用方法和之前的類似。
$('input').click(function () {
$.getJSON('test.json', function (response, status, xhr) {
alert(response[0].url);
});
});
4、ajax()方法
$.ajax()是所有 ajax 方法中最底層的方法,所有其他方法都這個方法只有一個參數,傳遞一個各個功能鍵值對的對象。
5、序列化元素
(1)serialize()方法作用於一個jQuery對象,將DOM元素內容序列化為字符串,用於Ajax請求
(2)serializeArray()方法作用於一個jQuery對象,將DOM元素內容序列化為字符串JSON格式的數據
(3)$.param()方法用於對一個數組或對象按照key/value進行序列化
6、jQuery中的Ajax全局事件
方法名稱
說明
ajaxStart(callback)
Ajax請求開始時執行的函數
ajaxStop(callback)
Ajax請求結束後執行的函數
ajaxComplete(callback)
Ajax請求完成時執行的函數
ajaxError(callback)
Ajax請求發生錯誤時執行的函數,捕捉到的錯誤可以作為最後一個參數傳遞
ajaxSend(callback)
Ajax請求發送前執行的函數
ajaxSuccess(callback)
Ajax請求成功時執行的函數
第九章
一、jQuery Mobbile簡介
jQuery一直以來都是非常流行的富客戶端及Web應用程序開發中使用的JavaScript類庫,然而一直以來它都是為桌面浏覽器設計的,沒有特別為移動應用程序設計。jQuery Mobile是一個新的項目用來添補在移動設備應用上的缺憾。它是基本jQuery框架並提供了一定范圍的用戶接口和特性,以便於開發人員在移動應用上使用。使用該框架可以節省大量的js代碼開發時間,盡管目前的版本還是不是一個穩定的版本。但它的應用效果已經備受矚目。
二、主要特性
(1)基於jQuery創建
(2)兼容絕大部分手機平台
(3)輕量級的庫
(4)模塊化結構
(5)HTML5標記驅動的配置
(6)漸進增強的原則
(7)響應式設計
(8)強大的Ajax導航系統
(9)易用性
(10)支持觸摸和鼠標事件
(12)強大的主體化框架
三、jQuery Mobbile使用
1、data-role屬性
data-role參數表:
page 頁面容器,其內部的mobile元素將會繼承這個容器上所設置的屬性
header 頁面標題容器,這個容器內部可以包含文字、返回按鈕、功能按鈕等元素
footer 頁面頁腳容器,這個容器內部也可以包含文字、返回按鈕、功能按鈕等元素
content 頁面內容容器,這是一個很寬容的容器,內部可以包含標准的html元素和2、2、2、2、jQueryMobile元素
controlgroup 將幾個元素設置成一組,一般是幾個相同的元素類型
fieldcontain 區域包裹容器,用增加邊距和分割線的方式將容器內的元素和容器外的元素明顯分隔
navbar 功能導航容器,通俗的講就是工具條
listview 列表展示容器,類似手機中聯系人列表的展示方式
list-divider 列表展示容器的表頭,用來展示一組列表的標題,內部不可包含鏈接
button 按鈕,將鏈接和普通按鈕的樣式設置成為jQueryMobile的風格
none 阻止框架對元素進行渲染,使元素以html原生的狀態顯示,主要用於form元素。
3、data-icon
4、樣式切換
dat-theme屬性uuur
三、其他移動框架
jqMobi、Sencha Touch、PhoneGap
第十章
jQuery 的版本
從 2005 年 8 月開始,進入公共開發階段,隨之而來的新框架於 2006 年 1 月 14 日正
式以 jQuery 的名稱發布。
2006 年 8 月發布了 jQuery1.0,第一個穩定版本,具有對 CSS 選擇符、事件處理和
Ajax 交互的支持。
2007 年 1 月發布了 jQuery1.1,極大的簡化 API。合並了許多較少使用的方法。
2007 年 7 月發布了 jQuery1.1.3,優化了 jQuery 選擇符引擎執行的速度。
2007 年 9 月發布了 jQuery1.2,去掉了 XPath 選擇器,新增了命名空間事件。
2008 年 5 月發布了 jQuery1.2.6,引入了 Dimensions 插件到核心庫中。
2009 年 1 月發布了 jQuery1.3,使用了全新的選擇符引擎 Sizzle,性能進一步提升。
2010 年 1 月發布了 jQuery1.4,進行了一次大規模更新,提供了 DOM 操作,增加了很
多新的方法或是增強了原有的方法。
2010 年 2 月發布了 jQuery1.4.2,添加了.delegate()和.undelegate()兩個新方法,提升
了靈活性和浏覽器一致性,對事件系統進行了升級。
2011 年 1 月發布了 jQuery1.5,重寫了 AJAX 組件,增強了擴展性和性能。
2011 年 5 月發布了 jQuery1.6,重寫了 Attribute 組件,引入了新對象和方法。
2011 年 11 月發布了 jQuery1.7,引入了.on()和.off()簡介的 API 解決事件綁定及委托容
易混淆的問題。
2012 年 3 月發布了 jQuery1.7.2,進行一些優化和升級。
2012 年 7 月發布了 jQuery1.8,8 月發布了 1.8.1,9 月發布了 1.8.2,重寫了選擇符引
擎,修復了一些問題。
2013 年 1 月發布了 jQuery1.9,CSS 的多屬性設置,增強了 CSS3。
2013 年 5 月發布了 jQuery1.10,增加了一些功能。