Ajax 筆記
1.什麼是Ajax ? 場景：開啟百度頁面，當你在搜尋欄裡面輸入東西的時候，會出現下拉框，裡面有很多與你搜索的東西相關的供你選擇，如圖
這些選項都是通過向伺服器傳送請求，伺服器返回的資料， 傳統上伺服器響應客服端，會重新整理當前頁面，而一個下拉框小小的變動，卻需要伺服器將整個頁面從新發送，這使得資源浪費，響應重複資訊。 眾所周知，js可以控制頁面的元素，如下拉框資訊，那麼是否可以直接讓js通過遊覽器向伺服器傳送資訊，然後伺服器直接將資訊返還給js，然後js來動態改變頁面部分內容。所以簡單來說Ajax可以說是通過js向伺服器傳送資訊，動態改變頁面部分內容的一門技術。
2，簡單使用Ajax。
<一下為一.jsp文字內容>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <!-- Ajax請求學習
--> <!-- 宣告js程式碼域 --> <script type="text/javascript"> function getData(){ //1,建立ajax引擎物件 var ajax;
/ /2,獲取ajax物件(window.XMLHttpRuquest) if(window.XMLHttpRequest){ // 支援火狐遊覽器 ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){ // 支援 IE 遊覽器 ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //3,複寫onreadystatement函式
簡述以上原始碼：
1.onreadystatement函式有如下readyState值每當 只發生變化就會自動觸發此函式（避免重複多次呼叫此函式可以設定當此值為4時就行呼叫 注意：此函式只有在聲明後方可呼叫自己重寫的）
2.open() send() 方法（ajax傳送請求）
1，open() 方法可以設定get 或者 post請求(1,get: open("get","url") 2,post: open("post","url") )
其中open()方法的第三個引數 為一布林值 預設（不填）為false：同步（等待此指令執行完在執行以下資料） true：為非同步（不等待直接向下執行）
2，send() 方法可以傳送post請求（1,如果open()方法設定為get方式 則此方法引數為null send(null) 。2,post方式:
setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
send("user="+username+"&pwd="+password);）
3.Ajax的獲取響應內容
1,獲取響應內容(響應內容的格式) a.普通字串：ajax.responseText b.json(重點)：ajax.responseText（可以下載一個gson.jar 工具包）【就是將一個Java物件轉換成一個js的json物件】
其實就是講述資料按照json的格式拼接好的字串，方便使用eval方法(eval()可以動態的執行js程式碼) 將接受的字串資料直接轉換為js的物件
對應serverlet物件中可使用： resp.getWriter().write(new Gson().toJson(u)); （u為你從資料庫中拿出來的資料放在user物件中，然後通過toJson（）轉換成這樣的字串 "{key:value,key:value......}"）
var result=ajax.responseText; eval("var u="+result);
該方法也可以將list物件進行轉換成類似字串[ {key:value,key:value......} , {key:value,key:value......}, {...}... ]將得到一個json陣列 json格式： var 物件名={ 屬性名:屬性值, 屬性名:屬性值, ……
} c.XML資料：ajax.responseXML.返回document物件(需要將java物件轉換成xml格式) 通過document物件將資料從xml中獲取出來 處理響應內容(js操作文件結）.
（doc.getElementsByTagName("name")[0].innerHTML）
[不建議使用該方法，一般xml用來配置檔案]
4.Ajax的封裝（.js）
/*
method:
請求方式，值為get或者post
url：請求地址
data:沒有值需要傳入null
有請求資料則傳入字串資料，格式為"a=1&b=2";
deal200:
接受一個帶有一個形參的js函式物件，形參接收的實參是ajax引擎物件
deal404：接受一個js函式物件
deal500：接受一個js函式物件
*/
function myAjax(method,url,data,deal200,deal404,deal500,async){
var ajax;
if(window.XMLHttpRequest){ //火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){ //ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//複寫onreadystatement函式
ajax.onreadystatechange=function(){
//判斷Ajax狀態嗎
if(ajax.readyState==4){
//判斷響應狀態嗎
if(ajax.status==200){
if(deal200()){ //注意此處的判斷 因為js函式傳遞的引數可以不傳完 所以防止沒有傳參而導致的錯誤
deal200();
}
}else if(ajax.status==404){
if(deal404){
deal404();
}
}else if(ajax.status==500){
if(deal500){
deal500();
}
}
}
}
//傳送請求
if("get"==method){
ajax.open("get",url+(data==null?"":"?"+data),async);
ajax.send(null);
}else if("post"==method){
ajax.open("post",url,async);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(data);
}
}