php精品筆記100天ajax-2ajax在軟件開發(fā)中的應(yīng)用非常廣泛、尤其是WEB端開發(fā)它無處

1、一、 引言ajax 在軟件開發(fā)中的應(yīng)用非常廣泛、尤其是 WEB 端開發(fā)，它無處不在 甚至于不可獲取。例如 當(dāng)用戶登錄時(shí) 既需要進(jìn)行前端的有效性驗(yàn)證（賬號是否填寫、格式是否正確、是否填寫等） 同時(shí)又要執(zhí)行的真實(shí)性驗(yàn)證（賬號是否存在、是否正確等） 而這種（真實(shí)性）驗(yàn)證無需跳轉(zhuǎn)到服務(wù)器就可以完成降低了跳轉(zhuǎn)來回等待的時(shí)間 提高了用戶體驗(yàn)。這樣的無跳轉(zhuǎn)刷新 在有些時(shí)候 是十分必要，例如 當(dāng)用戶登錄某在的過程中 突然需要登錄賬號 完成一些操作，而如果登錄驗(yàn)證的過程 必須跳轉(zhuǎn)到服務(wù)器中才能完成那么頁面就會(huì)刷新阻塞了用戶的（用戶的操作不連貫） 等跳轉(zhuǎn)回來 又是長時(shí)間的還要手動(dòng)到之前的位置給用戶的帶來極大的不便

2、 因此在這里 無跳轉(zhuǎn)的刷新 或者局部刷新 （無刷新操作）顯得十分必要。總之，很多時(shí)候 用戶只想更新頁面的局部內(nèi)容 而不是刷新整個(gè)頁面 這就意味著 當(dāng)瀏覽器請求完畢后（整個(gè)頁面內(nèi)容的同步刷新） 還能有辦法 創(chuàng)建其他進(jìn)程請求到服務(wù)器 稱為“異步請求” 也就是 AJAX。二、 AJAX 簡介1ajax 概述lajax 全稱 Async Javascript And XML（異步的 JavaScript 和 XML），它是一種“稱謂” 并不指代某個(gè)特定的技術(shù)，包含以下：Async ：指 AJAX 能夠創(chuàng)建異步進(jìn)程的請求Javascript：AJAX 實(shí)現(xiàn)的主體（就是用 JS 來實(shí)現(xiàn)的 AJAX），有

3、DOM、CSS 等XML：一種數(shù)據(jù)格式 用戶 AJAX 請求中 客戶端和服務(wù)器交換數(shù)據(jù)（除此以外還有 JSON）。l現(xiàn)在所有無刷新操作 都叫“ajax”，它是使得 JS 能夠像瀏覽器一樣 請求服務(wù)器數(shù)據(jù) 并且獲取返回結(jié)果，更直白的說 ajax 就是 JS 代碼級的瀏覽器。2ajax 發(fā)展AJAX 誕生于 1998 年，同期的互聯(lián)網(wǎng)技術(shù)還有 XML 和 CSS2.0，允許客戶端請求到服務(wù)器的第一個(gè)應(yīng)用來自于微軟的 Outlook Web Access 開發(fā)小組，爾后稱為 IE4.0 的一部分，并在 IE5 中開始運(yùn)用。AJAX 真正被廣泛認(rèn)識是在 2005 年，伴隨著一些大型互聯(lián)網(wǎng)公司的中開始出

4、現(xiàn) ajax，例如谷歌的郵箱Gmail 內(nèi)置了一個(gè) Gtalk 的網(wǎng)頁聊天工具，聊天的過程中需要反復(fù)不斷的刷新數(shù)據(jù) 而又不能跳轉(zhuǎn) 這就是引起了人們好奇 也使得原本不太受關(guān)注的 ajax 得到了人們的青睞。3ajax 實(shí)現(xiàn)JS 內(nèi)建了一個(gè) XMLHttpRequest 系統(tǒng)類，它提供了一些方法 用來實(shí)現(xiàn) AJAX 請求的操作，換句話說 AJAX技術(shù)其實(shí)是 “XMLHttpRequest”對象。的三、 AJAX 快速入門（老鐵 沒毛病）4ajax 請求過程一次 ajax 操作 就是從客戶端（JS）請求到服務(wù)器（PHP）的過程，它可以被分為 5 個(gè)階段 也叫 5 種狀態(tài)，每種狀態(tài) 可以由一個(gè)數(shù)字來標(biāo)

5、記?？蛻舳?JS請求未初始化狀態(tài)值：0請求：1服務(wù)端 PHP接收請求狀態(tài)值為：2客戶端獲取返回結(jié)果 并執(zhí)行相應(yīng)的處理返回結(jié)果：4處理請求狀態(tài)值為：35登錄驗(yàn)證實(shí)現(xiàn)用戶在提交表單時(shí) 進(jìn)行賬號的驗(yàn)證， 首先獲取用戶的登錄信息 然后ajax 在服務(wù)器中 完成賬號的驗(yàn)證 并返回結(jié)果，客戶端獲取結(jié)果后 執(zhí)行相應(yīng)的處理（如果登錄成功 則跳轉(zhuǎn)到主頁；驗(yàn)證不通過則輸出提示信息）。l給表單綁定提交初始化在AJAX 請求 前獲取用戶輸入信息l創(chuàng)建 ajax 請求 到服務(wù)器 并帶上要驗(yàn)證的賬號和等參數(shù)在請求過程中 客戶端還需要定義各個(gè)階段的處理程序，要在請求前先回調(diào)函數(shù)。l服務(wù)器接收請求 驗(yàn)證用戶的賬號信息 并返回

6、結(jié)果l客戶端獲取返回結(jié)果 執(zhí)行相應(yīng)的處理（在前面 JS 代碼中通過處理程序完成）6ajax 請求調(diào)試l谷歌的控制臺調(diào)試工具 F12 開發(fā)者工具l火狐的控制臺 工具 注意 使用前建議卸載 Firebug(很多版本中 存在 bug)7常用方法和屬性屬性或方法用法用例說明open()xhr.open(type, url, ,async)和服務(wù)器建立連接的方法send()xhr.send(data)數(shù)據(jù)的方法 如果是GET 則為nullonloadstartxhr.onloadstart = function () 請求時(shí) 調(diào)用的處理函數(shù)onprogressxhr.onprogress = funct

7、ion () 服務(wù)端處理請求時(shí) 觸發(fā)的onloadendxhr.onloadend = function () 請求完成時(shí) 觸發(fā)的處理程序onreadystatechangexhr.onreadystatechange =function () 請求狀態(tài)改變時(shí) 觸發(fā)的readyStatexhr.readyState查看請求的狀態(tài)值responseTextxhr.responseText獲取返回的結(jié)果statusxhr.statusHTTP 請求的狀態(tài)碼statusTextxhr.statusTextHTTP 文本消息DONExhr.DONE完成時(shí)的狀態(tài)值 4LOADINGxhr.LOADING

8、處理中的狀態(tài)值 3HEADERS_RECIEVEDxhr.HEADERS_RECIEVED服務(wù)器接收請求的狀態(tài)值 2OPENEDxhr.OPENED客戶端發(fā)出請求時(shí)的狀態(tài)值 1UNSENTxhr.unsent請求未初始化時(shí)的狀態(tài)值 0四、 AJAXOPEN 方法8POST 請求AJAX 除了可以GET 請求以外，還支持 POST，GET 是對地址欄傳輸?shù)臄?shù)據(jù) 安全性低 數(shù)據(jù)容量有限但是使用起來比較輕便 在沒有特殊需求的情況下也是一種選擇。POST 請求它的數(shù)據(jù)是放在請求體中發(fā)送的 數(shù)據(jù)安全性高、數(shù)據(jù)容量大。lPOST 請求的兩個(gè)需求：將 POST 數(shù)據(jù) 進(jìn)行編碼 ，一般采用urlencoded

9、 編碼格式，就是以 URL 格式進(jìn)行組裝。在請求頭中Content-Type 值為 編碼類型的值 這樣保證服務(wù)器能正常請求數(shù)據(jù)請求行請求頭請求體存放 POST 請求數(shù)據(jù)，如果是 GET 請求數(shù)據(jù) 則在請求行中。表單里面的 POST 數(shù)據(jù) 默認(rèn)是使用 urlencoded 編碼放入請求體中的l使用 AJAX 模擬表單提交 POST 請求9請求 URL 編碼當(dāng)請求參數(shù)的值中 含有（/?&）等特殊字符串時(shí) 在地址欄傳輸或者服務(wù)器時(shí) 會(huì)引起歧義。通常值會(huì)被截?cái)?需要對使用 url 格式編碼的數(shù)據(jù)（包括所有的 GET 請求中的參數(shù)值、POST 請求的參數(shù)以 URL 編碼等） 進(jìn)行轉(zhuǎn)義，在 JS

10、中 使用ponent 函數(shù)來編碼 URL 格式中參數(shù)的值，在 PHP 中 可以使用 urlencode 和 urldecode 來編碼的 URL 參數(shù)值。10IE 緩存控制當(dāng)我們正常瀏覽一個(gè)網(wǎng)頁時(shí) 其中的一些圖片、CSS 樣式、JS 文件等會(huì)被緩存起來，對于 IE 瀏覽器而言，AJAXGET 請求的結(jié)果也會(huì)被緩存。IE 將 AJAX 請求的結(jié)果 以請求地址作為文件名緩存起來了 這樣下次再請求時(shí) 它就會(huì)到緩存目錄中 查找和請求同名的文件 將存放的結(jié)果返回。那如果要清除緩存 就需要不斷的更新請求地址 讓緩存文件的失效 以達(dá)到更新請求結(jié)果的結(jié)果。11異步與同步l同步請求的執(zhí)行過程：在同步操作中 在任

11、意一個(gè)時(shí)刻只有一個(gè)進(jìn)程在運(yùn)行誰在先誰就先執(zhí)行 后面的程序 必須等待前面進(jìn)程執(zhí)行完畢。瀏覽器開始一個(gè)進(jìn)程瀏覽器進(jìn)程執(zhí)行結(jié)束接著往下執(zhí)行 顯示 imgalert() 彈框 占用了進(jìn)程等待它執(zhí)行完 在繼續(xù)l異步請求的執(zhí)行過程。在異步操作中瀏覽器可以同時(shí)（任意一個(gè)時(shí)刻）執(zhí)行多個(gè)進(jìn)程進(jìn)程之間有影響。瀏覽器開始一個(gè)進(jìn)程瀏覽器進(jìn)程執(zhí)行結(jié)束瀏覽器正常執(zhí)行 顯示 imgajax 異步請求 顯示彈框 是一個(gè)的進(jìn)程l在瀏覽器文檔 時(shí)使用ajax 創(chuàng)建一個(gè)異步請求 請求完畢向頁面輸出內(nèi)容的結(jié)果：瀏覽器加載頁面的進(jìn)程ajax 創(chuàng)建的進(jìn)程頁面的進(jìn)程完畢ajax 進(jìn)程結(jié)束輸出 some text 此時(shí)瀏覽器進(jìn)程執(zhí)行完畢在服

12、務(wù)器中堅(jiān)持了 5 秒輸出 hello world五、 響應(yīng)結(jié)構(gòu)化數(shù)據(jù)通常情況下，使用 AJAX 請求到服務(wù)器 一般執(zhí)行兩種操作：l寫操作：數(shù)據(jù)庫的增刪改、session 值的修改、刪除、文件的修改對于寫操作 一般返回兩個(gè)字段的信息 一個(gè)是表示執(zhí)行結(jié)果的狀態(tài)值 status 標(biāo)記，另一個(gè)則是具體的提示信息 info，可以將它們組裝到一個(gè)數(shù)組或者一段 XML 中。l讀操作：數(shù)據(jù)庫信息的、session 值、文件內(nèi)容而讀操作 通常返回的是一個(gè)復(fù)合類型的數(shù)據(jù)，例如一條用戶信息 返回一個(gè)數(shù)組等。它需要被轉(zhuǎn)化成字符串 才能保存和傳輸 并且該字符串是通用類型的數(shù)據(jù) 可以是 XML 或者 JSON?？偨Y(jié)，無論

13、是執(zhí)行寫操作還是讀操作 都要求能夠返回結(jié)構(gòu)化的數(shù)據(jù)。12返回 XML 結(jié)構(gòu)數(shù)據(jù)用戶登錄時(shí) 使用 ajax 請求到服務(wù)器 執(zhí)行 返回驗(yàn)證的狀態(tài)值 和 具體的提示信息 組裝成一個(gè) xml 結(jié)構(gòu)的數(shù)據(jù)，在客戶端 JS 中 再xml 數(shù)據(jù) 判斷結(jié)果。l設(shè)置登錄表單、綁定提交、ajax post 請求到服務(wù)器l服務(wù)器接收、處理請求 返回 xml 結(jié)構(gòu)的數(shù)據(jù) 包含狀態(tài)和具體提示l客戶端感知響應(yīng)結(jié)構(gòu)返回的 xml 數(shù)據(jù) 執(zhí)行相應(yīng)的操作13返回 JSON 格式數(shù)據(jù)除此以外 還有將結(jié)構(gòu)化的數(shù)據(jù) 如數(shù)組、對象等 使用 json 編碼的字符串來傳輸。六、l詞典翻譯進(jìn)入有道開放平臺一個(gè)應(yīng)用 獲取應(yīng)用合份的標(biāo)識 API

14、 key 和 keyfroml成功后就可以獲取到令牌該令牌作為調(diào)用接口的通用參數(shù)傳遞表明合份l在 PHP 文件中 調(diào)用接口 返回 json 格式的數(shù)據(jù)后在頁面輸出l使用 ajax 請求開放平臺接口數(shù)據(jù)跨域是不可以的14AJAX 跨域請求的實(shí)現(xiàn)l使用服務(wù)器本地的客戶端 JS 中 AJAX 因?yàn)橥床呗?無法請求服務(wù)器的，但是本地服務(wù)器頁面可以抓取遠(yuǎn)程服務(wù)器的，那么考慮 讓 AJAX 請求本地的服務(wù)器 然后本地服務(wù)器請求服務(wù)器獲取結(jié)果 給 AJAX。X本地服務(wù)器 PHP服務(wù)器開放平臺本地客戶端 JSAJAXl使用 JSONP 實(shí)現(xiàn)跨域ajax 無法請求服務(wù)器 但是 scriptsrc 發(fā)起一個(gè)請求

15、 那么可以讓 script 獲取到一個(gè)服務(wù)器頁面中數(shù)據(jù) 它返回一段 js 代碼，該段代碼就是調(diào)用本地客戶端（JS 中）的一個(gè)方法 并傳入返回結(jié)果。使用 js發(fā)起請求到有道翻譯接口獲取返回的結(jié)果并輸出返回一個(gè) json 對象數(shù)據(jù)。l在中 動(dòng)態(tài)的創(chuàng)建 script 請求七、 AJAX 封裝AJAX 的使用非常廣泛，它是程序化的執(zhí)行，因此可以很方便的對它進(jìn)行封裝 這樣便于反復(fù)使用。封裝過程詳見代碼：l$.get 方法：$.get(url, data, success, dataType);url：請求地址data：請求參數(shù)，以 URL 格式組裝 不加“？”success：成功執(zhí)行時(shí)的回調(diào)函數(shù)，該函數(shù)

16、在調(diào)用時(shí) 會(huì)傳入執(zhí)行的結(jié)果 result 定義形參接收即可dataType：設(shè)置返回值的類型 這樣便于返回值l$.post 方法：$.post(url, data, success, dataType) 同 GET 方法一樣使用l$.ajax 方法：$.ajax(o.type, o.url, o.data, o.sucess, o.dataType)其中 o.data 支持 url 形式的字符串格式 也可以設(shè)置對象格式的參數(shù)。使用前 需要載入 jlib 庫文件：<script src=”jlib.js”></script>八、 AJAX 數(shù)據(jù)分頁15PHP 分頁的實(shí)現(xiàn)l

17、設(shè)置每頁顯示的數(shù) 為 $size = 10l當(dāng)前要顯示的頁號 $pid，它是地址欄通過 pid 參數(shù)傳遞的l獲取總的數(shù) $countl計(jì)算頁碼的最大值 $maxp = ceil($count/$size);l驗(yàn)證 pid 的值 是否在有效合理的范圍內(nèi) 需要知道最大頁$maxpl計(jì)算分頁起始的偏移量 $start = ($pid - 1) * $sizel使用 limit 語句 去控制分頁數(shù)據(jù)的顯示 limit 的參數(shù)為$start 和$sizel出該頁的數(shù)據(jù)并組裝頁碼欄16AJAX 數(shù)據(jù)分頁P(yáng)HP 中出數(shù)據(jù) 并組裝好了地址欄 直接在頁面輸出 通過跳轉(zhuǎn)參數(shù)完成分頁 是同步的刷新HTML 模板JS

18、 中 使用 AJAX 請求到 PHP獲取所有的數(shù)據(jù)（包含頁碼） AJAX HTML 模板中顯示 通過調(diào)用 JS 方法 完成分頁HTML 模板l在 AJAX 中向 PHP 頁面發(fā)起請求 獲取數(shù)據(jù) 放入頁面事先埋伏的容器中l(wèi)將 AJAX 組裝成方法 請求頁碼作為參數(shù)傳遞 然后在 PHP 組裝的跳轉(zhuǎn)中 執(zhí)行該方法九、 瀑布流布局17瀑布流概述l瀑布流布局簡介瀑布流，又稱瀑布流式布局。是比較流行的一種頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。是l瀑布流布局特點(diǎn)1、琳瑯滿目：整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。2、唯美：圖片的風(fēng)格以唯美的圖片為主3、操