js高薪班案例ajax第1天

1、Ajax入門和高級應用第1天（本課程共3天）依學院保密規(guī)定本PPT不得發(fā)給學生欲窮千里目，更上一層樓中期課程明細 - 共24個教學日： Ajax入門和高級應用 3天 HTML5響應式移動端10天 JavaScript面向?qū)ο罂蚣茉O計 7天 中期實戰(zhàn) 4天中期課程特點： 實用性很強，每個公司都在用 面試必問、必考 引申知識多，圍繞一個主題，能拓展很多知識 全面深化內(nèi)功的一個時期歡迎來到中期課程！當時過海波難進，今日回來甚易行去時凡骨凡胎重，得道身輕體亦輕。舉世無人肯立志，立志修玄玄自明。當時過海波難進，今日回來甚易行。別語叮嚀還在耳，何期頃刻見東溟。 明 吳承恩西游記上映之前不被看好的國產(chǎn)動畫電

2、影大圣歸來截至7月30日票房已經(jīng)超過了7億，打破了功夫熊貓保持4年的6.17億的紀錄，是國產(chǎn)動畫電影的里程碑。一、Ajax技術整體感知1.1 從HTTP說開去一、Ajax技術整體感知 超文本傳輸協(xié)議（HTTP，HyperText Transfer Protocal ），是簡單、可靠的互聯(lián)網(wǎng)文件傳輸協(xié)議?！吧暇W(wǎng)”這個事兒的本質(zhì)，就是你輸入網(wǎng)址之后，瀏覽器發(fā)出HTTP請求，請求服務器上的文件。服務器上的文件，再通過HTTP傳輸?shù)奖镜兀跒g覽器中進行渲染。 一次HTTP請求，有上行請求、下行響應兩部分。 一張網(wǎng)頁，可能產(chǎn)生多個HTTP的請求。 通常，瀏覽器產(chǎn)生HTTP請求，是由于用戶輸入了新的網(wǎng)址、

3、或者點擊了超級鏈接，使頁面跳轉(zhuǎn)，這將導致頁面的全局刷新。而Ajax技術，可以使網(wǎng)頁悄悄地、偷偷地發(fā)起HTTP請求，請求回來的數(shù)據(jù)在頁面局部刷新呈遞。1.2 看！這些都是Ajax！來看幾個Ajax效果： 網(wǎng)易郵箱注冊 傳智播客高薪班入學測試系統(tǒng) 花瓣網(wǎng)、百度圖片、網(wǎng)易1元奪寶 百度百家 百度搜索框智能感應 新浪圖片頻道 新浪微博點贊 拉勾網(wǎng)分頁Ajax是這么個玩意兒：在不刷新頁面的情況下，瀏覽器悄悄地、異步向服務器發(fā)出HTTP請求。服務器收到請求后，傳回新的格式化數(shù)據(jù)（通常是JSON）。瀏覽器通過DOM將新數(shù)據(jù)呈遞顯示，頁面僅局部刷新。一、Ajax技術整體感知1.3 Ajax是前端、后臺配合完成

4、的事兒三、Hello World前端開發(fā)工程師的工作： 書寫Ajax程序，準確發(fā)送帶有參數(shù)的HTTP請求 解析接收到的JSON數(shù)據(jù)，用DOM技術在頁面上呈遞后臺工程師的工作： 識別HTTP請求中的參數(shù)，查詢數(shù)據(jù)庫，發(fā)回JSON數(shù)據(jù)二、Ajax簡介和異步的概念2.1 Ajax簡介有趣的信息： AJAX 不是新的編程語言，而是一種使用已有標準的新概念。 2005年由美國人Jesse James Garrett推廣，并取名。神奇的是，這哥們并不是搞程序的，而是搞設計的，是交互設計大師、用戶體驗大師。甚至是個優(yōu)秀建筑設計師。 在 2005 年，Google 通過其 Google Suggest 使 A

5、JAX 變得流行起來。 在今天，很少有哪個網(wǎng)站不使用Ajax技術。 Ajax技術對智能手機支持非常好。 Ajax中字母x表示XML，實際上XML已經(jīng)過時，現(xiàn)在的公司，幾乎全都在使用JSON代替XML。所以理論上講，應該稱呼為Ajaj，不過，呃，這個詞兒，長得好難看。二、Ajax簡介和異步的概念全稱：Asynchronous JavaScript and XML 中文：異步JavaScript和XML昵稱：阿賈克斯、誒債克斯Jesse James Garrett2.2 深入理解Asynchronous 生活中同步和異步同步（synchronous）老漁翁，一釣竿，靠山崖，傍水灣，扁舟來往無牽絆。

6、沙鷗點點輕波遠，荻港蕭蕭白晝寒，高歌一曲斜陽晚。一霎時波搖金影，驀抬頭月上東山。 清鄭板橋釣魚是修身養(yǎng)性的好活動。釣魚需要安靜，拋出吊桿之后，要靜靜的盯著浮漂，不能小貓釣魚。你在“同步調(diào)用釣魚函數(shù)”。二、Ajax簡介和異步的概念asynchronous 即“異步”，synchronous“同步“。呃，這倆詞兒有點夢幻，不能從字面上理解。異步（asynchronous）周末心情好，你要自己做頓飯。從冰箱拿塊凍住的肉，用微波爐解凍。微波爐在解凍肉的時候，你同時洗菜、切菜。微波爐工作完畢，“?！钡囊宦曁嵝涯?。你把化凍的肉，和洗好的菜，下鍋，炒炒炒。你在“異步調(diào)用微波爐函數(shù)”。2.2 深入理解Asyn

7、chronous 同步和異步的概念二、Ajax簡介和異步的概念計算機領域中，我們經(jīng)常遇見一種情況：在執(zhí)行某個請求的時候，該請求不能立即返回，而是需要一段時間，比如文件I/O。所謂的同步和異步，就是體現(xiàn)在對待這種“不能立即返回的請求”的不同處理方式上。 同步：等待這個請求完成，進程被阻塞，此時，請求返回后，再執(zhí)行后續(xù)語句。 異步：不等待這個請求完成，立即執(zhí)行后續(xù)語句，請求返回后，執(zhí)行回調(diào)函數(shù)里面的語句。2.2 深入理解Asynchronous Ajax技術中的異步二、Ajax簡介和異步的概念 瀏覽器執(zhí)行到Ajax代碼這行語句，發(fā)出了一個HTTP請求，欲請求服務器上的數(shù)據(jù)。服務器的此時開始I/O，

8、需要花一些時間，所以不會立即產(chǎn)生下行HTTP報文。 由于Ajax是異步的，所以本地的JavaScript程序不會停止運行，頁面不會假死，不會傻等下行HTTP報文的出現(xiàn)。后面的JavaScript語句將繼續(xù)運行。 服務器I/O結(jié)束，將下行HTTP報文發(fā)送到本地。此時，回調(diào)函數(shù)將執(zhí)行?；卣{(diào)函數(shù)中，將使用DOM更改頁面內(nèi)容?；卣{(diào)函數(shù)（callback）：JavaScript中，凡是需要一段時間才能完成的操作，采用異步方式執(zhí)行，執(zhí)行完畢之后，執(zhí)行的函數(shù)，我們稱為回調(diào)函數(shù)。三、Hello World3.1 服務器環(huán)境的搭建三、Hello World一個好前端開發(fā)工程師，必須要對服務器有一定的了解。 含有

9、Ajax腳本的HTML文件不能簡單的雙擊運行。必須運行在服務器環(huán)境中。 服務器也是計算機，也有CPU、內(nèi)存條、硬盤。只不過安裝了web服務器軟件罷了。 最出色的web服務器軟件是：ApacheIISTomcatnginx 使用phpnow等一鍵安裝包，可以快速地安裝服務器軟件，使你的筆記本電腦成為一臺服務器。3.2 第一個Ajax小程序三、Hello World四步走：1. 創(chuàng)建XMLHttpRequest對象2. 設置接收到HTTP下行響應內(nèi)容之后，要做什么事情3. 設置HTTP上行請求的細節(jié)4. 發(fā)送HTTP上行請求四、XMLHttpRequest對象詳解4.1 XHR對象的創(chuàng)建四、XML

10、HttpRequest對象詳解 Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），這是由微軟首先引入的一個特性，其他瀏覽器廠商后來都提供了相同的實現(xiàn)。 使用Ajax，首先是從創(chuàng)建XHR對象開始的，稍后你將知道創(chuàng)建這個對象，在低版本瀏覽器中有兼容性問題，我們把惡心的事兒，放到后面聊。在IE7及IE7+中創(chuàng)建XHR對象非常簡單，僅僅需要一條語句：4.2 open和send方法四、XMLHttpRequest對象詳解open()方法在使用XHR對象時，要調(diào)用的第一個方法是open()。它接受三個參數(shù)：要發(fā)送的請求的類型、請求的URL、表示是否異步的布爾值。 URL可以使用絕對路徑，

11、不過今后的課程你將會知道，只能Ajax有跨域限制。 調(diào)用open方法并不會真正發(fā)送請求，而只是啟動一個請求以備發(fā)送。send()方法要發(fā)送特定的請求，需要調(diào)用send()方法。它接受一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)。如果不需要通過請求主體發(fā)送數(shù)據(jù)，則必須傳入null，不能留空。一但調(diào)用send()方法，HTTP上行請求就將發(fā)出。4.3 readyState屬性和onreadystatechange方法 四、XMLHttpRequest對象詳解一但調(diào)用send()方法，HTTP上行請求就將發(fā)出。問題是，由于請求是異步的，所以我們不知道HTTP下行請求什么時候回來。XHR對象的readySta

12、te屬性XHR對象的onreadystatechange方法只要readyState屬性的值由一個值變成另一個值，都會觸發(fā)一次readystatechange事件?？梢岳眠@個事件來檢測每次狀態(tài)變化后readyState的值。onreadystatechange事件，要寫在open()和send()方法之前，這是為了保證瀏覽器的兼容。4.4 HTTP狀態(tài)碼四、XMLHttpRequest對象詳解 HTTP狀態(tài)碼（HTTP Status Code）是用以表示網(wǎng)頁服務器HTTP響應狀態(tài)的3位數(shù)字代碼。 在Ajax中，當xhr.readyState屬性為4之后，xhr.status的值為此次HTTP

13、下行響應的狀態(tài)碼。 注意兩個四級詞匯：xhr.readyState、xhr.onreadystatechange、xhr.status字頭意義需要記憶的重要狀態(tài)碼1*消息2*成功200 OK3* 重定向301 Moved Permanently304 Not Modified4* 請求錯誤400 Bad Request403 Forbidden404 Not Found5*服務器錯誤503 Service Unavailable6*其他4.5 XHR對象的兼容問題 四、XMLHttpRequest對象詳解 在IE6中，XHR對象不能簡單地通過new XMLHttpRequest()來創(chuàng)建，而是

14、通過MSXML庫中的一個ActiveX對象實現(xiàn)的： 我們要進行瀏覽器能力檢測，來決定如何實例化這個對象。來看MDN上的實例：五、了解PHP5.1 后臺語言簡介五、了解PHP前臺語言和后臺語言的不同 運行地點、運行環(huán)境、運行時間、主要任務、數(shù)據(jù)庫、兼容性后臺語言的本質(zhì) 所有的后臺語言都是預處理器。常見的后臺語言 JavaEE、PHP、C#、Python、Perl、Ruby、Delphi、Lisp前端開發(fā)工程師學習后臺語言的意義 面試加分 能更好的配合后臺工程師完成項目 能更深入的理解HTTP、Ajax 能更快速的學習Node.js、MongoDB5.2 PHP基本語法五、了解PHP看手冊，快速掌

15、握PHP 5.3 MySQL數(shù)據(jù)庫的操作五、了解PHP看手冊，快速掌握MySQL 六、GET請求和POST請求6.1 HTTP請求類型六、GET請求和POST請求 HTTP的上行請求有不同的請求類型（HTTP Request Methods）。所有類型都分別由一個簡單英語單詞描述，生動形象的表示出發(fā)出本次請求的目的。 需要注意的是，請求類型“不代表真的去做那個事兒”。比如，GET請求，也完全可以用于提交表單。 有了請求類型，用戶訪問同樣的URL，但是由于請求類型不同，可以有不一樣響應。這就是時下非常流行的RESTful設計。 HTTP請求類型有：GET用于請求、查詢內(nèi)容，目的是得到某個信息。僅

16、有請求頭，沒有請求實體。POST用于向服務器傳遞數(shù)據(jù)，目的是提交表單等。有請求實體。PUT用于向服務器發(fā)送更新某數(shù)據(jù)的請求，幾乎不用DELETE用于向服務器傳遞刪除命令，幾乎不用6.2 GET請求和POST請求六、GET請求和POST請求GET請求 GET請求沒有請求實體，查詢參數(shù)通過URL表示。比如： GET請求是便于用戶分享網(wǎng)址。 GET請求不保密，通過訪問網(wǎng)址歷史記錄，能看到數(shù)據(jù)。 GET請求有大小限制，不能大于2KB。 GET請求瞬發(fā)。POST請求 post請求向服務器傳遞數(shù)據(jù)，并不是通過URL的參數(shù)，而是通過HTTP請求實體傳輸。 POST請求無法分享網(wǎng)址。 POST請求保密性強，傳輸?shù)臄?shù)據(jù)對用戶透明，瀏覽器不會保存，頁面關閉即作廢。 POST請求沒有理論上的限制。 POST請求是流。6.3 Ajax發(fā)起GET和POST六、GET請求和POST請求Ajax發(fā)起GET請求 open()參數(shù)中，需要對URL需要用問號綴參數(shù)。send()參數(shù)是null。 用 ponet()函數(shù)處理可能出現(xiàn)的非英語字符。 注意URL拼接格式。能不能編寫一個