12.28學習經驗分享#
Bruce_Zhu于2016.12.29
一、同步交互與異步交互
客戶端想服務器端發送請求，直到服務器端進行響應，這個過程中，用戶是不能做任何其他事情的(等)
客戶端想服務端發送請求，直到服務端進行響應，這個過程中，用戶是可以做其他事情的(不用等)
二、AJAX
asynchronous javascript and xml,直譯中文-javascript和xml的異步
AJAX是一種用來改善用戶體驗的技術，其實質是，使用XMLHttpRequest對象異步地向服務器發請求
服務器返回部分數據，而不是一個完整的頁面，以頁面無刷新的效果更改頁面中的局部內容
-
Ajax的核心對象
XMLHttpRequerst對象
-
獲取XMLHttpRequest對象
function getXhr(){
var xhr = null; if(window.XMLHttpRequest){ //除IE外的其他瀏覽器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr;}
-
屬性
- readyState 請求狀態
0 尚未初始化 1正在發送請求 2請求完成 3請求成功，正在接受數據 4數據接收成功-
status 請求響應值
200 表示請求成功
202 請求被接受但處理未完成
400 錯誤的請求
404 資源未找到
500 內部服務器錯誤，如asp代碼錯誤等 responseText 服務器返回的文本
responseXML 服務器返回的xml，可以當做DOM處理
-
方法
open(method,url) - 與服務端建立連接
send() - 向服務器端發送請求
abort() - 取消請求
getAllResponseHeaders()
得到響應的所有http頭getResponseHeader()
獲取指定的http頭setRequestHeader()
指定請求的Http頭 -
事件
onreadystatechange事件
作用 - 監聽服務端的通信狀態改變當Ajax對象的readyState的值發生了改變，比如，從0變成了1，就會產生readystatechange事件
三、實現ajax的異步交互步驟
創建XMLHttpRequest核心對象
固定寫法-獨立編寫與服務區建立連接
使用XMLHttpRequest對象的open(method,url)向服務器發送請求
使用XMLRequest對象的send()方法
請求參數的格式 - key=value-
接受服務器響應的數據
使用XMLHttpRequest對象的readystatechange事件監聽服務器端的通信狀態
使用XMLHttpRequest對象的readyState屬性，判斷服務器端當前狀態(0-4)
使用XMLHttpRequest對象的statue屬性，判斷服務器端的狀態碼(200)
使用XMLHttp對象的responseText屬性，接受服務器端的響應數據
注意：get與post方式
get請求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 請求參數，添加到url?key=value
post請求方式
必須要在send()方法調用之前，使用setRequestHeader()方法設置請求頭，參數為key-value
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
四、接收服務器端的響應數據
-
使用XMLHttpRequest核心對象的responseText屬性
該屬性只能接受文本(HTML)格式
問題：
解析過程比較復雜，而且在拼串或拆串過程容易出錯 XML格式的數據
json格式的數據
五、XML
-
HTML/XHTML/DHTML/XML
HTML: 網頁文檔
XHTML:更嚴格的網頁文檔
DHTML:DOM|DOM
XML: 可擴展的標記語言，可用于配置文件|數據格式 XML的文件為.xml
-
XML的定義方式與HTML非常相似
HTML的元素都是預定義好的
XML允許自定義元素 -
XML版本
1.0版本 1.1版本，幾乎沒人使用
-
XML作用
作為數據格式-存儲數據的地方
-
XML語法
1）聲明
<?xml version="1.0" encoding="utf-8" ?> version-設置XML文件的版本 encoding-設置XML文件的編碼 聲明必須出現在0行0列上2）定義元素
根元素，必須是雙標簽，只能定義一個 定義元素，元素名可以自定義，既可以雙標簽也可以是單標簽練習：使用XML定義省份和城市信息
六、DOM解析XML字符串
-
創建DOM解析XML的解析器，解析器解析XML字符串
IE瀏覽器
var parser = new ActiveXObject("Microsoft.XMLDOM");
parser.async = false;
xmlDoc = parser.loadXML(xmlFile);
其他游覽器
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
-
解析XML元素與解析HTML元素一致
獲取元素最常用的是getElementsByTagName很少使用ById和ByName
PS：
瀏覽器不允許讀取外部的XML文件
瀏覽器解析符合XML格式的字符串
七、Ajax的XML
1.請求的數據格式-XML
1）客戶端如何構建XML格式的數據
構建的數據類型 - 字符串類型
字符串的內容要符合XML格式的語法要求
2）服務器端如何接受符合XML格式的數據
接收到的客戶端的請求數據 - 字符串類型，php集成了DOM的相關內容
DOMDocument
DOMElement
DOMNode
2.響應的數據格式-XML
1）服務器端如何構建符合XML格式的數據
設置服務器端的響應頭Content-Type值為text/xml
header("Content-Type:text/xml");
構建符合XML格式的數據內容
手動方式構建字符串內容
DOMDocument對象的方法
loadXML(符合XML格式的字符串)
saveXML()方式進行響應
2）客戶端如何接受XML格式的數據
使用XMLHttpRequest對象的responseXML屬性接收
接收到的就是XML DOM對象(不需要進行解析)