大牛班高級課程筆記課件下午圖解ajax

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

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

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

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

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

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

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

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

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