大牛班高級(jí)課程筆記課件下午圖解ajax

1、AJAXAJAX1第 1 章1.7AJAX 介紹AJAX 應(yīng)用場(chǎng)景AJAX 對(duì)象的創(chuàng)建AJAX 請(qǐng)求服務(wù)器，服務(wù)器返回?cái)?shù)據(jù)AJAX服務(wù)器返回的數(shù)據(jù)異步、同步區(qū)別1244錯(cuò)誤!未定義書簽。66GET、T 區(qū)別 ajax 之t 方式請(qǐng)求錯(cuò)誤!未定義書簽。第 1 章Ajax1.1ajax 介紹ajax 是 asynchronous javascript and xml 的縮寫，異步的 JavaScript 和xml 技術(shù)異步？異步、同步相對(duì)立的一對(duì)概念：所謂的同步，保持步伐一致，例如：在上課，老師餓了，讓班長(zhǎng)給我買點(diǎn)面包，如果等待班長(zhǎng)回來之后，再上

2、課，說伐一致，也就是同步；用戶體驗(yàn)就不好；所謂的異步，就是班長(zhǎng)再買面包的時(shí)候，開辟一個(gè)通道，繼續(xù)上的課，不影響后面的課程，用戶體驗(yàn)就很好XML？xml（extenable markup language），可擴(kuò)展標(biāo)記語言用來干什么的呢？html固定的這些：img、p、h1，不便于用戶自己定義、傳輸數(shù)據(jù)，于是 W3C組織想到一個(gè)方法，重新開發(fā)一個(gè)語言，允許用戶自己定義，方便傳輸數(shù)據(jù)了：取名為 xml，因?yàn)樵试S用戶自己定義，所以稱之為可擴(kuò)展標(biāo)記語言用來通過 JavaScript 和 服務(wù)器端的 xml 文件進(jìn)行交互的一個(gè)技術(shù)，隨著技術(shù)的發(fā)展，現(xiàn)在使用 json 數(shù)據(jù)代替 xml 數(shù)據(jù)1.2XML

3、介紹xml 是介于html 和 XHTML 之間的產(chǎn)物，用來解決早期傳輸數(shù)據(jù)時(shí)格式例如，傳遞給服務(wù)器一個(gè) 100，服務(wù)器不知道 100 是什么意思：100px? 100$? 100sui于是 W3C 組織做了一個(gè)規(guī)范（XML）:100100100100由于 xml 文件是用來作為早期和服務(wù)器交互時(shí)，傳輸數(shù)據(jù)的一種格式，那么 xml 和 html 最根本的區(qū)別在于：xml可擴(kuò)展，是用戶自己定義的，而 html固定的，不能自己定義，該區(qū)別決定了 xml 和 html 的應(yīng)用場(chǎng)景，xml 用來傳輸數(shù)據(jù)，而 html 用來顯示數(shù)據(jù)由于 xml 數(shù)據(jù)比較古老，對(duì)來說基本上被淘汰的1.3ajax 應(yīng)用場(chǎng)景

4、通過上面的例子，說明：當(dāng)需要使用 JavaScript 和 服務(wù)器進(jìn)行交互時(shí)，需要通過JavaScript 的一個(gè)對(duì)象 XMLHttpRequest 對(duì)象，將請(qǐng)求發(fā)送過去場(chǎng)景 1：用戶時(shí)，用戶名輸入完畢，需要去服務(wù)器查詢一下該用戶名是否存在場(chǎng)景 2：當(dāng)在輸入框輸入完畢，就應(yīng)該從服務(wù)器查詢輸入的內(nèi)容相似的信息1.4ajax 對(duì)象的創(chuàng)建主流瀏覽器是通過 new XMLHttpRequest()獲得IE6 使用：new ActiveXObject(“Msxml2.HTTP”)創(chuàng)建IE5.5 使用：new ActiveXObject(“創(chuàng)建一個(gè)兼容性的判斷：.HTTP”)1.5ajax 請(qǐng)求服務(wù)器，服

5、務(wù)器返回?cái)?shù)據(jù)服務(wù)器返回?cái)?shù)據(jù)，通過 echo 返回?cái)?shù)據(jù)的：演示一下，ajax 在請(qǐng)求服務(wù)器時(shí)，幾個(gè)狀態(tài)的值：1.6如果異步、同步open 方法中的第三個(gè)參數(shù)，設(shè)置為 false，表示同步請(qǐng)求需要等到服務(wù)器返回?cái)?shù)據(jù)之后，再接著往下執(zhí)行測(cè)試一把，發(fā)現(xiàn)如下提示：synchronous XMLHttpRequest on the main thread is deprecated because of itsdetrimental effects tousers experience.大概意思：同步的 XMLHttpRequest 請(qǐng)求，在主線被放棄了，因?yàn)閷?duì)用戶體驗(yàn)不好1.7get、t 區(qū)別（1）請(qǐng)求

6、服務(wù)器時(shí)，攜帶數(shù)據(jù)（參數(shù)）的方式不一樣：Get 方式請(qǐng)求，在 url 地址欄傳遞數(shù)據(jù)T 方式請(qǐng)求，需要設(shè)置頭信息，并且將數(shù)據(jù)通過 send 方法發(fā)送：服務(wù)器接收數(shù)據(jù)$_T 接收數(shù)據(jù)var_dump()、pr_r()這些方法是提供的，用來調(diào)試代碼的（2）如果是 GET 請(qǐng)求，并且 url 地址沒有變化的話，瀏覽器會(huì)緩存起來以 IE 瀏覽器為例演示：通過 IE 瀏覽器請(qǐng)求 5 次檢查 cache.txt 里面有多少o解決思路就是：在 url 地址欄傳遞一個(gè)隨機(jī)數(shù)，這樣，每次請(qǐng)求時(shí) url 地址就是不一樣的，說明每次是不同的請(qǐng)求（3）GET 方式傳輸?shù)臄?shù)據(jù)比較小，2K 左右（Chrome 瀏覽器大概

7、有 8K 左右），T原則上不受限制，但是受的配置文件的限制1.8數(shù)據(jù)傳輸時(shí)特殊字符轉(zhuǎn)碼假設(shè)請(qǐng)求服務(wù)器時(shí)，傳遞一個(gè)數(shù)據(jù)：love&hate，但是傳遞到服務(wù)器之后：服務(wù)器接收之后，直接打?。航Y(jié)果如下：原因就在于 love&hate 里面的特殊符號(hào)&，將內(nèi)容分割成不同的參數(shù)了解決之道： 如果通過 url 傳遞一些中文、特殊字符等， 需要使用ponent 函數(shù)進(jìn)行轉(zhuǎn)碼）之后再傳輸?shù)椒?wù)器：url 編碼（1.9服務(wù)器回應(yīng)的數(shù)據(jù)格式服務(wù)器可以給客戶端回應(yīng) 2 種格式的數(shù)據(jù)：（1）字符串格式的數(shù)據(jù)JavaScript 接收的時(shí)候使用 xhr.responseText如果服務(wù)器給 ajax 回應(yīng)數(shù)組格式的數(shù)據(jù)

8、的時(shí)候，需要在服務(wù)器端通過json_encode()函數(shù)將數(shù)組序列化成 json 數(shù)據(jù)，再返回客戶端接收到的數(shù)據(jù)，都是字符串類型的，即使下面數(shù)據(jù)看似是 JavaScript的字面量對(duì)象，其實(shí)是一個(gè)字符串，可以通過 var_dump 測(cè)試一把：json 數(shù)據(jù)，指的是一種數(shù)據(jù)格式，而是 JavaScript 的對(duì)象區(qū)別在于：json 數(shù)據(jù)中，沒有方法體，而對(duì)象有，所以為了避免歧義，稱呼 json的時(shí)候，表示是一種數(shù)據(jù)格式，而說對(duì)象的時(shí)候，指的就是屬性、方法的集合說明：JavaScript 接收到數(shù)據(jù)之后，僅僅是字符串類型的 json 格式的數(shù)據(jù)，操作起來很不方便，如果 json 數(shù)據(jù)能夠轉(zhuǎn)換成 J

9、avaScript 的字面量對(duì)象的話，就很好了需要通過 eval()函數(shù)實(shí)現(xiàn)，原理：eval（）函數(shù)會(huì)將小括號(hào)中的參數(shù)作為表達(dá)式運(yùn)行例如：（2）xml 格式的數(shù)據(jù)xml 也是一種服務(wù)器端的數(shù)據(jù)格式，由于 xml 格式的數(shù)據(jù)操作起來比較繁瑣，所以現(xiàn)在基本上被 json 替代JavaScript 在接收 xml 格式的數(shù)據(jù)的時(shí)候，使用 xhr.responseXML 接收，接收到的是XML 文檔對(duì)象接下來的操作和通過 JavaScript 操作 html 文檔是一樣的，也是通過 DOM 進(jìn)行操作，但是操作 xml 比價(jià)復(fù)雜，所以基本是被替代的下面的代碼作為了解即可：1.10 封裝ajax 操作封裝的技巧：將公共的代碼提取出來，將可能會(huì)變化的代碼，通過參數(shù)傳遞例如：請(qǐng)求服務(wù)器的方式、服務(wù)器地址、攜帶的參數(shù)、以及期望什么類型的數(shù)據(jù)，都得通過參數(shù)傳遞：下面是封裝的 ajax 操作的代碼第 2 章 Ajax 練習(xí)2.1日歷中增加促銷字樣由于現(xiàn)在沒有促銷管理的，暫時(shí)在文件中指定 2017 年的 5 月 6、7 號(hào)搞促銷思路：（1） 先在服務(wù)器指定哪些日期搞促銷（2）日歷創(chuàng)建完畢后，應(yīng)該促銷的日期，需要使用到 JavaScript 請(qǐng)求服務(wù)器的數(shù)據(jù)，也就是發(fā)送 a