|
1. 什么是ajax asynchronous :異步 synchronous同步 javascript :核心技術還是javascript xml:主要保存和傳輸數據 直譯:異步的javascript和xml 就是可與服務器進行異步或者同步交互一門技術. 同步交互:指一個時間段內只能有一個進程在執(zhí)行. 異步交互:指一個時間段內可以有多個進程在執(zhí)行. 應用案例: 百度搜索ajax: 無刷新驗證用戶名的唯一性: AJax最大特點:無刷新(用戶體驗比較好) 2. ajax發(fā)展史 1999年，微軟公司發(fā)布IE5瀏覽器的時候嵌入的一種技術。起初名字是XMLHttp 直到2005年Ajax才開始流行使用，該年google公司發(fā)布了一個郵箱產品gmail，內部的gtalk聊天工具有使用ajax技術 ,該事情引起人們對ajax的注意，并促成其被廣泛使用，同時使得向來不被人們重視的javascript語言得到的大家的青睞 3. ajax技術合集 包括html、css、javascript、xml、XMLHttpRequest對象(ajax對象), 其中XMLHttpRequest是ajax的官方的名稱。 一個ajax應用程序就是創(chuàng)建一個ajax對象,對象調用其方法和屬性的一個過程 4. ajax技術原理 ①傳統(tǒng)的web(無ajax)應用程序原理圖 總結:同步的過程只有允許有一個進程在執(zhí)行,比如服務端在處理數據的時候,那么客戶端不能進行任何操作,處于一個阻塞的一個狀態(tài) ②使用ajax的web應用程序原理圖 總結:使用ajax的程序,服務端在處理數據的時候,客戶端瀏覽器依然可以執(zhí)行其他的操作,并沒有阻塞狀態(tài),也就是一個時間段內可以有多個進程在執(zhí)行. 2. Ajax對象 1. 創(chuàng)建ajax對象 主流瀏覽器(google,火狐,獵豹,360,高版本的IE(8以上)): var xhr=new XMLHttpRequest();重點掌握 低版本的IE瀏覽(IE6,IE7,IE8):(了解下) var xhr=ActiveXObject('Microsoft.XMLHTTP') 更低版本的IE瀏覽器創(chuàng)建ajax對象的方式: //更低版本IE瀏覽器(IE5,IE4) var xhr=ActiveXObject('Msxml2.XMLHTTP') var xhr=ActiveXObject('Msxml3.XMLHTTP') 2. 封裝創(chuàng)建ajax對象的兼容函數 建立一個public.js文件 調用形式: 3. ajax常用的方法和屬性 常用方法: open(method,url,[async]):建立一個http連接 method:請求的方法,get/post url:請求的url地址 async:是否異步請求,默認為true為異步,false同步 send(content):發(fā)送一個http請求 content: 發(fā)送請求的數據,如果是get請求content直接寫null,如果是post請求需要拼接請求字符串,形如:name=xiaokeai&age=18 setRequestHeader(header,value) :設置請求頭 header:請求頭名稱 value:請求頭的值 abort:終止一個ajax請求 常用屬性: readyState:ajax請求的狀態(tài),有五個值0,1,2,3,4 0:初始化對象還沒有調用open()方法 1: 已經調用了open()方法 .還沒有調用send()方法 2:已經調用了send()方法 3.已經開始接受服務器返回來的數據,但是不完整. 4:完全接收服務器返回來的數據,請求完畢 onreadystatechange :可以監(jiān)聽ajax狀態(tài)的一個改變 只能監(jiān)聽1,2,3,4狀態(tài),因為狀態(tài)0沒有一個相對變化的過程. status :http響應狀態(tài)碼 200:ok 404:not found 304 :not modified ,5XX(一般都是服務器相關的錯誤) responseText :接收服務器返回來的字符串數據.(html.css,js). php echo 'fasfd'; responseXML :接收服務器返回來的xml數據. php: echo $xml; 4. 快速入門 問題:ajax可以接收服務器返回來哪些信息? 答:瀏覽器可以接收的信息,ajax基本都可以接收,比如html,css,js,xml.json 例子:用ajax請求服務中的字符串 onreadystatechange可以監(jiān)聽ajax狀態(tài)4個: 服務端代碼: 前端請求代碼:
請求效果:
5. 總結ajax請求(五步驟) ①創(chuàng)建ajax對象 var xhr=new XMLHttpRequest() ②建立一個http連接 xhr.open('get',url,true); ③發(fā)送一個http請求 xhr.send(null); ④給ajax狀態(tài)綁定一個回調函數 xhr.onreadystatechange=function(){}; ⑤判斷ajax的狀態(tài)是否等于4,就做相應的業(yè)務邏輯 xhr.readyState==4 接收字符串xhr.responseText 二.ajax在get請求下的緩存
緩存的概念: 瀏覽器的第一次請求需要從服務器獲得許多 css、img、js 等相關的文件，如果每次請求都把相關的資源文件加載一次，對 帶寬、服務器資源、用戶等待時間 都有嚴重的損耗，瀏覽器有做優(yōu)化處理，其把css、img、js等文件在第一次請求成功后就在本地保留一個緩存?zhèn)浞?，后續(xù)的每次請求就在本身獲得相關的緩存資源文件讀取就可以了，可以明顯地加快用戶的訪問速度。css、img、js等文件可以緩存，但是動態(tài)程序文件例如php文件不能緩存，即使緩存我們也不要其緩存效果。(IE瀏覽器會緩存動態(tài)程序文件) 1.解決get請求在IE瀏覽器的緩存問題: ①隨機數 : Math.random()
http請求:
查看ie的緩存文件夾:
結論:此種方法雖然可以解決緩存問題,但是每次請求都會產生一個緩存文件. ②時間戳 : new Date().getTime() 此種方案和上面一種差不多,但是參數一定是唯一,
查看http狀態(tài)和緩存文件:
可知:設置時間戳的方式依然會產生很多緩存文件. ③設置請求頭: xhr.setRequestHeader('If-Modified-Since','0');
當我們請求服務器上面的某個文件時,如果我們設置了If-Modified-Since,那么會與服務器上面所請求的文件做個對比,如果請求頭的值一樣,則直接讀取緩存,如果不一樣,則會讀取服務上面最新的文件內容
此種辦法會產生一個緩存文件: ④服務端禁用緩存 : header('Cache-Control:no-cache,must-revalidate');
http信息:
面試題:如果不想緩存一個靜態(tài)文件如(js.css.img) 解決辦法:在請求的css路徑后面加個參數即可:
2. get和post請求的區(qū)別 ①給服務器傳遞的數據量不同 get方式的大小是受限于瀏覽器，大部分瀏覽器是2k左右的限制 每個瀏覽器的限制不一樣 chrome就是8K 1k=1024byte 2k=2048by http://網址/index.php?name=tom 上述請求通過get方式傳遞了9個字節(jié)的信息 post原則沒有限制，php.ini對其限制為8M ②安全方面 post傳遞數據較安全 ③傳遞數據的形式不一樣 get方式在url地址后邊以請求字符串形式傳遞參數 http://網址/index.php?name=tom&age=23&addr=beijing 藍色部分就是請求字符串，就是一些'名-值'對，中間使用&符號連接。 post方式是模擬form表單把數據給傳遞給服務器 三.案例-使用get請求校驗用戶名唯一性 實例代碼: 前端代碼:
php端校驗代碼:
效果:
4. 案例-使用post請求校驗用戶名唯一性 前端代碼:
php服務端校驗代碼:
效果:
1. post請求總結(六步走): ①,創(chuàng)建一個ajax對象 ②.建立一個http連接 ③設置請求頭 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); ④發(fā)送http請求 ⑤給ajax狀態(tài)的改變設置回調函數 ⑥判斷ajax狀態(tài)是否等于4,然后組相應的業(yè)務邏輯處理 五,請求編碼的處理 如果請求的url后面的參數攜帶中文或者特殊字符如:&,=,%等等,為了避免傳遞的特殊符號產生歧義,這時候我們需要將此參數進行編碼處理,(編碼后的信息是相對底層的信息，瀏覽器會自動識別，獲取的時候無需反編碼) 在javascript里邊可以通過encodeURIComponent ()對特殊符號等信息進行編碼。 在php里邊可以函數 urlencode()/urldecode()對特殊符號進行編碼、反編碼處理 get請求在火狐瀏覽器傳遞特殊字符沒編碼之前的url地址形式:
get請求在火狐瀏覽器沒編碼之前傳遞中文的url地址形式: 對中文自動編碼,但是沒有對特殊字符進行編碼:
IE瀏覽器下面?zhèn)鬟f中文和特殊字符的url形式:
對特殊字符編碼后:
火狐瀏覽器編碼后的結果:
ie瀏覽器下面編碼后的結果:
1.編碼問題總結: ①不管是get請求還是post請求都需要對特殊字符進行編碼處理 ②對于中文的情況下大部分瀏覽器對中文自動編碼,但是除IE瀏覽器需要編碼處理 六,案例-利用post請求做無刷新注冊的例子 ①user表的結構:
基本步驟: 前端注冊代碼:
php服務端入庫代碼:
運行效果:
|
|
|
