ajax使用詳解

一ajax的基本原理

   1 創建XmlHttpRequest對象。

   2 創建請求。

   3 根據監控的readyState值的變化實現當服務器返回數據時調用回調函數。

   4 發送請求

   5 接收服務器返回的數據(該步驟可以和會和步驟3合併)

二ajax使用基本流程

    ajax的使用主要是實現上面的原理圖。

    1 創建XMLHttpRequest對象，由於這段代碼是固定的夜視第一步，所以我們一般將其封裝爲一個函數createXMLHttpRequest();

function createXMLHttpRequest(){
var request;
if(window.XMLHttpRequest){//火狐
request= new  XMLHttpRequest();
}else if{
request = new ActiveXObject("Msxml2.XMLHTTP");//IE
}
return request;
}

    2 使用XMLHttpRequest對象創建請求

    

var req=createXMLHttpRequest();
req.open("get"，"testAjaxServlet");

   3 監視response狀態，寫回調函數處理服務器返回的數據

        (1)服務端響應

       (2)XMLHttpRequest的readyState

req.onreadystatechange=function(){
if(req.ready==4){
var result=request.responseTest;//得到服務端返回的數據
document.getElementById("div2").innerHTML=result;//js操作DOM將數據寫到頁面對象中，實現局部刷新
}
}

  注：上述代碼僅僅是一個實例，說明了在什麼狀態下接受數據，顯示數據

4 使用XMLHttpRequest對象發送請求

req.send(null);//如果不寫null，火狐會報錯

三ajax的傳參方式和接受數據的方式

  注：由於開發需要，傳參方式和接受數據的形式會不同，接下來重點討論

1 兩種傳參方式post和get

   get方式：更簡單也更快，並且在大部分情況下都能用，容易被緩存(因爲是小數據)

   post方式：

• 無法使用緩存文件（更新服務器上的文件或數據庫）

• 向服務器發送大量數據（POST 沒有數據量限制）

• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

2 ajax接受數據的方式

   (1)普通文本數據

       req.responseTest得到返回的文本數據

   (2)XML數據

      1)處理

            a)服務端            

response.setContentType("test/xml;charset=utf-8");//通過ajax寫xml數據最好使用utf-8
response.getWriter().println（"<resume><name>朱元璋</name></resume>"）;

            b)客戶端

req.responseXML.getElementsByTagName("name")[0].firstChild.data;

      2)評價

            a)優勢

                1 xml數據通用。有很多編輯、解析工具

                2 xml標記有屬性、以及xml命名空間等，從而寫出非常通用的程序。

            b)劣勢

                1 js解析xml的難度較大，尤其是在瀏覽器差異方面。

                2 xml數據經常有冗餘現象。

   (3)JSON(javascript  object  native)

      1)處理

            a)servlet中             

sb.append("{name:'朱元璋',age:'32',job:'皇帝'}");
sb.append("[{age:1,name:'a'},{age:2,name:'b'},{age:3,name:'c'}]");//作爲對象數組返回

            b)瀏覽器端

var a=req.responseTest;
eval("var c="+a);//利用eval函數將返回的文本轉化成js對象

      2)評價

            a)優勢

                1 解析容易，經過eval執行後直接解析爲js對象，不需要經過其他中間步驟

                2 可以表達比較複雜的數據組織關係

                3 甚至可以通過json方式直接執行服務器端傳來的js函數

            b)劣勢

                1 xml屬性和命名空間不能直接處理

四ajax實例

     1搜索殷勤預覽功能

     2 google  suggest功能

     3 ajax三級聯動

     4 拖曳效果實現購物車

     5 ajax樹結構

     6 ajax面板效果

五ajax類庫的封裝

工具類：AjaxUtil.js

var AjaxUtil = {
// 基礎選項
options : {
method : "get", // 默認提交的方法,get post
url : "", // 請求的路徑 required
params : {}, // 請求的參數
type : 'text', // 返回的內容的類型,text,xml,json
callback : function() {
}// 回調函數 required
},
// 創建XMLHttpRequest對象
createRequest : function() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");// IE6以上版本
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6以下版本
} catch (e) {
try {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) {
alert("您的瀏覽器不支持Ajax");
}
}
}
return xmlhttp;
},
// 設置基礎選項
setOptions : function(newOptions) {
for ( var pro in newOptions) {
this.options[pro] = newOptions[pro];
}
},
// 格式化請求參數
formateParameters : function() {
var paramsArray = [];
var params = this.options.params;
for ( var pro in params) {
var paramValue = params[pro];
paramsArray.push(pro + "=" + paramValue);
}
return paramsArray.join("&");
},
// 狀態改變的處理
readystatechange : function(xmlhttp) {
// 獲取返回值
var returnValue;
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
switch (this.options.type) {
case "xml":
returnValue = xmlhttp.responseXML;
break;
case "json":
var jsonText = xmlhttp.responseText;
if(jsonText){
returnValue = eval("(" + jsonText + ")");
}
break;
default:
returnValue = xmlhttp.responseText;
break;
}
if (returnValue) {
this.options.callback.call(this, returnValue);
} else {
this.options.callback.call(this);
}
}
},
// 發送Ajax請求
request : function(options) {
var ajaxObj = this;
// 設置參數
ajaxObj.setOptions.call(ajaxObj, options);
// 創建XMLHttpRequest對象
var xmlhttp = ajaxObj.createRequest.call(ajaxObj);
// 設置回調函數
xmlhttp.onreadystatechange = function() {
ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
};
// 格式化參數
var formateParams = ajaxObj.formateParameters.call(ajaxObj);
// 請求的方式
var method = ajaxObj.options.method;
var url = ajaxObj.options.url;
if ("GET" === method.toUpperCase()) {
url += "?" + formateParams;
}
// 建立連接
xmlhttp.open(method, url, true);
if ("GET" === method.toUpperCase()) {
//發送請求
xmlhttp.send(null);
} else if ("POST" === method.toUpperCase()) {
// 如果是POST提交，設置請求頭信息
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//發送請求
xmlhttp.send(formateParams);
}
}
};

使用實例

function findUser() {
var userid = $("userid").value;
if (userid) {
AjaxUtil.request({
url:"servlet/UserJsonServlet",
params:{id:userid},
type:'json',
callback:process
});
}
}
function process(json){
if(json){
$("id").innerHTML = json.id;
$("username").innerHTML = json.username;
$("age").innerHTML = json.age;
}
else{
$("msg").innerHTML = "用戶不存在";
$("id").innerHTML = "";
$("username").innerHTML = "";
$("age").innerHTML = "";
}
}
function $(id) {
return document.getElementById(id);
}