a) 主流浏覽器 new XMLHttpRequest();
b) IE浏覽器 new ActiveXObject(“Msxml2.XMLHTTP.6.0”);
屬性:responseText/responseXML readyState onreadystatechange
方法:open(方式,url地址,true/false) send() setRequestHeader()
get請求:
傳遞參數 url地址後邊請求字符串、中文/特殊符號需要編碼處理
post請求:
傳遞參數send(參數)
調用setRequestHeader()把數據組織為xml格式
中文不需要編碼,特殊符號需要編碼
同時可以傳遞get參數信息,使用$_GET接收
open(方式,url地址,[異步true]/同步false)
異步:同一時間允許執行多個進程
同步:同一時間允許執行一個進程
① 傳統分頁效果實現
② ajax去封裝傳統分頁
ajax+javascript合作實現xml的接收和處理
ajax屬性 responseXML 接收xml信息
文檔對象 和 普通元素節點對象 都可以調用getElementByTagName()方法
① 給請求的地址設置隨機數
② 給動態程序頁面設置header頭,禁止浏覽器緩存
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的使用。
json在javascript裡邊就是字面量對象
var obj = {名稱:值,名稱:值,名稱:function(){}}
json_encode(數組/對象)------------>生成json信息
json_encode(關聯數組)---->json對象
json_encode(索引數組)---->js數組
json_encode(索引關聯數組)---->json對象
json_encode(對象)---->json對象
各數組/對象生成的json信息如下圖:
接收到Json信息之後,要解析信息,就要反編碼處理:
json_decode(json信息,boolean); 反編碼json信息
對json字符串信息進行反編碼,變為當前語言可以識別的信息。
json_decode(json字符串,true)--->array
json_decode(json字符串,[false])--->object
純json字符串反編碼操作注意:單引號,並且要加true!
ajax獲得接口信息,javascript本身處理json信息
通過eval()把接收的json字符串變成真實的對象信息
如何把一個js的字符串變為object對象:
ajax和javascript合作實現json信息接收處理:使用eval函數
服務器端json接口數據:
① ajax的每次請求都要從服務器獲得三部分信息,對 帶寬、服務器資源、用戶等待時間 等資源都要占據三份,我們要做優化:把不發生變化的css樣式、html標簽 放到客戶端手動生成,從而減輕服務器端的工作、減輕帶寬浪費。
② 每次回來的分頁數據是“整個一個大的部分”,數據的解析、拆分非常不靈活
此時服務器端數據可以通過json格式傳遞回來(之前是html標簽格式)
二維數組生成json信息的效果:
在服務器端把數據組織為json格式提供出來,在客戶端解析json並把信息組織到html標簽裡邊用於顯示:
在設置遍歷數據庫信息的時候可以加上標簽到分頁上。Nmpk在頁面上。
表單:登錄系統、注冊會員都有表單
傳統的form表單頁面實現submit提交的時候,浏覽器會根據form標簽的action屬性值做頁面跳轉。
頁面經常跳轉會降低用戶體驗效果
有的網站有需求:登錄或注冊表單提交的時候,實現無刷新方式信息的傳送。以便提高用戶體驗
傳統方式dom+ajax無刷新收集、提交form表單信息:
頁面沒有刷新,就把數據提交給服務器:
傳統方式收集表單信息,需要寫許多重復的代碼(document.getElementById)和拼裝長串的請求信息,非常不方便開發、維護。
那麼我們要使用新技術FormData實現數據收集。
利用新技術FormData表單數據對象,可以實現快速收集表單信息。
FormData是html5的新技術,在主流浏覽器都可以正常使用。
利用FormData收集數據:(evt和return false都可以阻止浏覽器表單提交動作)
實現效果:
總結:
php生成/解析json:
json_encode()
json_decode(json字符串,true/[false])
JS解析json:
eval(“var 名稱=”+json字符串)
之前ajax分頁:服務器通過html標簽組織一個“整個的分頁”數據回來,該數據不能靈活拆分,內部還有許多固定的內容(html標簽和css樣式)
json改造:只從服務器獲得數據信息、信息是通過json對象回來的其解析和處理非常靈活。
var fd = new FormData(form標簽的元素節點對象)
dom可以獲取普通表單域信息,並可以直接提交給服務器
javascript實現附件信息抓取,之前浏覽器技術由於有安全方面的限制,也不允許通過js抓取附件信息。
FormData可以實現普通表單域 和 上傳文件域 信息的收集。
附件上傳相關技術點: