Ajax技術總結之XmlHttpRequest
Ajax
1、 什麽是ajax
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML),XML 指可擴展標記語言
XML 被設計用來傳輸和存儲數據(機構化的)
AJAX 不是新的編程語言,而是一種使用現有標準的新方法。
AJAX 是與服務器交換數據並更新部分網頁的藝術,在不重新加載整個頁面的情況下。(異步)
2. 使用XMLHttpRequest對象分為4部完成:
1 .創建XmlHttpRequest對象
2.發送請求
3.ajax響應
4.調用回掉函數
3.xmlHttpRequest對象介紹
(1)創建Ajax對象XMLHttpRequest(核心對象:方法,屬性,事件)
var xmlHttp;
if(window. XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
(2)Ajax 請求
兩個核心方法open()方法和send()方法,字面意思。
什麽時候用POST,什麽時候用GET
當然GET方法泛用性會比較廣,但下面這些情況下只能用POST
(1)、上傳文件。
(2)、向服務器發送大量數據(Post是沒有限制的,get不行,url對長度是有限制的不同瀏覽器最大長度不一樣,ie是2083)
(3)、發送一些隱秘消息使用post更加可靠。因為你在地址欄看不到參數,截獲數據的成本比較高。(post將數據放在Header中)
例子:
(1) xmlHttp.open(“GET”,”CookieServlet?username=wxy”,true);
xmlHttp.send();
(2) xmlHttp.open(“POST”,” CookieServlet”,true);
xmlHttp.send();
(3) xmlHttp.open(“POST”,”CookieServlet”,true);
xmlHttp.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
xmlHttp.send(“username=wxy&remark=aaa”);
關於content-type感興趣的同學可以去了解一下。在這裏常用的我們只要知道兩個:application/x-www-form-urlencoded和multipart/form-data。後者可以用來傳文件的。
(3)Ajax響應
兩個重要屬性:readyState 和status;一個核心方法(事件):onreadystatechange;外加一個核心屬性,用以存儲返回值:responseText
(1) readyState是XMLHttpRequest對象的一個屬性,用來標識當前XMLHttpRequest對象處於什麽狀態。
(2) status是XMLHttpRequest對象的一個屬性,表示響應的HTTP狀態碼
例子:
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
document.getElemenById(“userPass”).value=xmlHttp.responseText;
}
}
最後光看不敲假把式:
前端代碼:
後端代碼:
其中使用json將list數據打包成json格式數據
XmlHttpRequest基本就這麽多
Ajax技術總結之XmlHttpRequest