一.昨天內容回顧 a) 主流瀏覽器 new XMLHttpRequest(); b) IE瀏覽器 new ActiveXObject(“Msxml2.XMLHTTP.6.0”); 屬性:responseText/responseXML readyState onreadystatechange 方法 ...
一.昨天內容回顧
- 創建ajax對象
a) 主流瀏覽器 new XMLHttpRequest();
b) IE瀏覽器 new ActiveXObject(“Msxml2.XMLHTTP.6.0”);
- 常用屬性和方法
屬性:responseText/responseXML readyState onreadystatechange
方法:open(方式,url地址,true/false) send() setRequestHeader()
- get請求和post請求
get請求:
傳遞參數 url地址後邊請求字元串、中文/特殊符號需要編碼處理
post請求:
傳遞參數send(參數)
調用setRequestHeader()把數據組織為xml格式
中文不需要編碼,特殊符號需要編碼
同時可以傳遞get參數信息,使用$_GET接收
- 非同步、同步請求
open(方式,url地址,[非同步true]/同步false)
非同步:同一時間允許執行多個進程
同步:同一時間允許執行一個進程
- 無刷新分頁效果實現
① 傳統分頁效果實現
② ajax去封裝傳統分頁
- xml接收和處理
ajax+javascript合作實現xml的接收和處理
ajax屬性 responseXML 接收xml信息
文檔對象 和 普通元素節點對象 都可以調用getElementByTagName()方法
- 緩存處理
① 給請求的地址設置隨機數
② 給動態程式頁面設置header頭,禁止瀏覽器緩存
二.JSON
1. 什麼是json
json: javascript object notation(javascript對象符號)
其是我們之前學過js的“字面量對象”
其是一種數據交換格式(之前的xml也是數據交換格式)。
天氣官網伺服器對外提供的“門戶網站”需要供兩部分用戶訪問:普通大眾、企業網站
其中的企業網站並不會對我們天氣網站產生廣告效益,其只會白白浪費我們許多流量。
這樣我們需要做優化處理。
為了方便企業網站使用天氣信息,把天氣信息專門通過一個”介面”給提供出來,該介面的信息專門是天氣信息,數據量可以控制。
通過介面給企業網站提供天氣信息,需要考慮各個企業網站語言如何方便、快速地接收該接收並解析該介面信息。這樣介面信息提供出來就需要組織為特定的格式,該格式可以是xml或json。
介面專門負責提供天氣預報信息:
http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&dfc=1&charset=utf-8
之前企業網站需要獲得天氣信息,通常會把天氣預報官網首頁的全部信息都給請求回來,但是只是在裡邊獲得很少的天氣信息,這樣做對帶寬、天氣官網的伺服器、用戶等待時間的消耗比較嚴重。
這個事件做優化處理:天氣預報網站伺服器把天氣信息做成一個數據介面提供出來,好處是企業網站每次請求天氣信息的帶寬變小、請求速度加快,天氣預報網站伺服器的負載得到控制。
為了各種語言(java/php/.net/javascript)的網站用戶方便使用該數據介面,其介面的數據格式最好是大家都可以識別的,因此json/xml就被應用上了。
json的生成和處理要比xml更加方便,因此在許多領域json正逐步取代xml的使用。
2. json的使用
2.1 javascript裡邊json體現
json在javascript裡邊就是字面量對象
var obj = {名稱:值,名稱:值,名稱:function(){}}
2.2 通過php生成json信息
json_encode(數組/對象)------------>生成json信息
json_encode(關聯數組)---->json對象
json_encode(索引數組)---->js數組
json_encode(索引關聯數組)---->json對象
json_encode(對象)---->json對象
各數組/對象生成的json信息如下圖:
2.**3 php處理json信息**
接收到Json信息之後,要解析信息,就要反編碼處理:
json_decode(json信息,boolean); 反編碼json信息
對json字元串信息進行反編碼,變為當前語言可以識別的信息。
json_decode(json字元串,true)--->array
json_decode(json字元串,[false])--->object
純json字元串反編碼操作註意:單引號,並且要加true!
2.4 javascript接收處理json信息
ajax獲得介面信息,javascript本身處理json信息
通過eval()把接收的json字元串變成真實的對象信息
如何把一個js的字元串變為object對象:
ajax和javascript合作實現json信息接收處理:使用eval函數
伺服器端json介面數據:
3. json改造ajax無刷新分頁
① ajax的每次請求都要從伺服器獲得三部分信息,對 帶寬、伺服器資源、用戶等待時間 等資源都要占據三份,我們要做優化:把不發生變化的css樣式、html標簽 放到客戶端手動生成,從而減輕伺服器端的工作、減輕帶寬浪費。
② 每次回來的分頁數據是“整個一個大的部分”,數據的解析、拆分非常不靈活
此時伺服器端數據可以通過json格式傳遞迴來(之前是html標簽格式)
二維數組生成json信息的效果:
在伺服器端把數據組織為json格式提供出來,在客戶端解析json並把信息組織到html標簽裡邊用於顯示:
在設置遍曆數據庫信息的時候可以加上標簽到分頁上。Nmpk在頁面上。
二.無刷新表單信息提交
表單:登錄系統、註冊會員都有表單
傳統的form表單頁面實現submit提交的時候,瀏覽器會根據form標簽的action屬性值做頁面跳轉。
頁面經常跳轉會降低用戶體驗效果
有的網站有需求:登錄或註冊表單提交的時候,實現無刷新方式信息的傳送。以便提高用戶體驗
傳統方式dom+ajax無刷新收集、提交form表單信息:
頁面沒有刷新,就把數據提交給伺服器:
1. 收集表單信息
傳統方式收集表單信息,需要寫許多重覆的代碼(document.getElementById)和拼裝長串的請求信息,非常不方便開發、維護。
那麼我們要使用新技術FormData實現數據收集。
利用新技術FormData表單數據對象,可以實現快速收集表單信息。
FormData是html5的新技術,在主流瀏覽器都可以正常使用。
利用FormData收集數據:(evt和return false都可以阻止瀏覽器表單提交動作)
實現效果:
總結:
- json數據交換格式
php生成/解析json:
json_encode()
json_decode(json字元串,true/[false])
JS解析json:
eval(“var 名稱=”+json字元串)
- json改造ajax無刷新分頁
之前ajax分頁:伺服器通過html標簽組織一個“整個的分頁”數據回來,該數據不能靈活拆分,內部還有許多固定的內容(html標簽和css樣式)
json改造:只從伺服器獲得數據信息、信息是通過json對象回來的其解析和處理非常靈活。
- FormData快速收集表單信息
var fd = new FormData(form標簽的元素節點對象)
2. ajax無刷新附件上傳
dom可以獲取普通表單域信息,並可以直接提交給伺服器
javascript實現附件信息抓取,之前瀏覽器技術由於有安全方面的限制,也不允許通過js抓取附件信息。
FormData可以實現普通表單域 和 上傳文件域 信息的收集。
附件上傳相關技術點: