js高薪班案例ajax第1天

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

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

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

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

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

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

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

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

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

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

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

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

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

14、通過MSXML庫中的一個(gè)ActiveX對象實(shí)現(xiàn)的： 我們要進(jìn)行瀏覽器能力檢測，來決定如何實(shí)例化這個(gè)對象。來看MDN上的實(shí)例：五、了解PHP5.1 后臺語言簡介五、了解PHP前臺語言和后臺語言的不同 運(yùn)行地點(diǎn)、運(yùn)行環(huán)境、運(yùn)行時(shí)間、主要任務(wù)、數(shù)據(jù)庫、兼容性后臺語言的本質(zhì) 所有的后臺語言都是預(yù)處理器。常見的后臺語言 JavaEE、PHP、C#、Python、Perl、Ruby、Delphi、Lisp前端開發(fā)工程師學(xué)習(xí)后臺語言的意義 面試加分 能更好的配合后臺工程師完成項(xiàng)目 能更深入的理解HTTP、Ajax 能更快速的學(xué)習(xí)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）。所有類型都分別由一個(gè)簡單英語單詞描述，生動(dòng)形象的表示出發(fā)出本次請求的目的。 需要注意的是，請求類型“不代表真的去做那個(gè)事兒”。比如，GET請求，也完全可以用于提交表單。 有了請求類型，用戶訪問同樣的URL，但是由于請求類型不同，可以有不一樣響應(yīng)。這就是時(shí)下非常流行的RESTful設(shè)計(jì)。 HTTP請求類型有：GET用于請求、查詢內(nèi)容，目的是得到某個(gè)信息。僅

16、有請求頭，沒有請求實(shí)體。POST用于向服務(wù)器傳遞數(shù)據(jù)，目的是提交表單等。有請求實(shí)體。PUT用于向服務(wù)器發(fā)送更新某數(shù)據(jù)的請求，幾乎不用DELETE用于向服務(wù)器傳遞刪除命令，幾乎不用6.2 GET請求和POST請求六、GET請求和POST請求GET請求 GET請求沒有請求實(shí)體，查詢參數(shù)通過URL表示。比如： GET請求是便于用戶分享網(wǎng)址。 GET請求不保密，通過訪問網(wǎng)址歷史記錄，能看到數(shù)據(jù)。 GET請求有大小限制，不能大于2KB。 GET請求瞬發(fā)。POST請求 post請求向服務(wù)器傳遞數(shù)據(jù)，并不是通過URL的參數(shù)，而是通過HTTP請求實(shí)體傳輸。 POST請求無法分享網(wǎng)址。 POST請求保密性強(qiáng)，傳輸?shù)臄?shù)據(jù)對用戶透明，瀏覽器不會保存，頁面關(guān)閉即作廢。 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拼接格式。能不能編寫一個(gè)