標籤：str class equals 提交 response encode json 地址 小天
Ajax (asynchronous javascript and xml)在沒有ajax的時候，頁面每次提交資料都必須銷毀當前的頁面，重新從伺服器端獲得一個頁面。這樣做不僅影響使用者體驗，而且會導致流量的浪費（都是錢啊）。為了避免這種情況，google在2005年通過其Goggle Suggest使AJAX變得流行起來。
(1)ajax的定義在小天看來，ajax的本質就是利用瀏覽器提供的一個特殊的對象:XMLHttpRequest對象，也可以稱為AJAX對象，向伺服器發送非同步請求。伺服器返回部分資料（通常不需要返回完整頁面），這樣的話，使用者的操作就不會被打斷，也就避免了多餘流量的浪費。
(2)擷取ajax對象首先，既然要利用XMLHttpRequest對象，當然要擷取這個對象。但是，由於IE的一些黑曆史，仗著自己當年的市場佔有率高，就是莽 rua！它的ajax對象叫ActiveXObject。要區分瀏覽器來擷取這個對象。但是jquery等js架構已經將這一步整合了。現在很難想象有人寫js會不用jquery。所以這裡只是大致瞭解一下就好了。辣雞IE。壯哉我大chrome。
function getXhr(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;}
很難想象當年的IE有多大的勇氣才敢逆時代前進。這樣不相容的例子真的很多很多，導致開發人員都想放棄IE，更不用說使用者了。
弱小和無知不是生存的障礙，傲慢才是。
a.onreadystatechange:用來綁定一個事件處理函數，用來處理readystatechange事件。
註：當ajax對象的readyState屬性值發生了任何改變（比如從0變成了1），就會產生readystatechange事件
b.readyState:有五個值（0，1，2，3，4），表示ajax對象與伺服器通訊的狀態。其中，當值為4時，表示AJAX對象已經獲得了伺服器返回的所有資料。
哈哈，小天覺得，記住4就夠啦。其他的不太懂。
c.responseText:獲得伺服器返回的文本資料。
d.responseXML:獲得伺服器返回的XML資料。
e.status:獲得狀態代碼。（比如說200表示成功，404啥的。。500啥的。。不想碰到啊 又想到了被搶課支配的恐懼）
step1.獲得ajax對象。（參見（2））
step2.發送請求。
有兩種請求get或者post請求，其中區別優劣小天就不贅述了。
情形一 發送get請求
a.調用ajax對象的open方法
xhr.open(請求類型,請求地址,同步/非同步（true表示非同步）);
ps: ajax也可以發送同步請求，通俗的說，就是瀏覽器會鎖定這個頁面，使用者感覺不到這個頁面的重新整理，但是在伺服器做出響應之前，根本不可以對頁面做出任何的操作。現在已經很少用ajax做同步處理了。拿一個非同步東西做同步，那不是傻嗎。( ▼-▼ )。
eg:
xhr.open(‘get‘,‘check_uname.do?name=tom‘,true);
b.綁定事件處理函數
xhr.onreadystatechange=函數名;
eg:
xhr.onreadystatechange=f1;
c.發送請求
xhr.send(null);
情形二 發送post請求
a.xhr.open(‘post‘,‘請求地址‘,true);
b.xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
c.xhr.onreadystatechange=函數名;
d.xhr.send(‘name=tom‘);
註：b步驟 按照http協議規範，如果發送的是post請求，在請求資料包裡面，應該有content-type訊息頭。預設情況下，ajax對象不帶訊息頭，所以需要調setRequestHeader方法來設定這個訊息頭。
step3.編寫伺服器端的程式
serlvet的話 就是通過PrintWriter來返迴文本資料就可以了。也可以使用json
至於SpringMVC和ajax的結合，會單開一篇隨筆。
step4.編寫事件處理函數
function f1(){//先獲得伺服器返回的資料if(xhr.status == 200 && xhr.readyState == 4){var txt = xhr.responseText;//利用這些資料（txt）更新頁面...}}
（5）實戰：註冊頁面（get請求）
這個算是非常經典的AJAX的案例了。
需求就是：當使用者輸入使用者名稱之後，判斷使用者名稱是否為Sally，如果是，那麼文字框之後出現提示使用者名稱已存在，如果不是Sally提示可以使用。
在寫的時候，小天發現自己的jquery和javascript已經忘得差不多了( ╯□╰ )，不過還是勉強完成了。之後看來需要複習一下了。這個小案例沒有使用jquery，但是對javascript一些很複雜的文法進行了封裝。
//js工具類function getXhr(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;}//有種自己編寫了jquery的感覺( ▼-▼ )function $(id){return document.getElementById(id);}function $F(id){return $(id).value;}//jsp頁面<!DOCTYPE html><html><head><meta charset="UTF-8"><title>regist</title><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">function check(){var xhr = getXhr();xhr.open(‘get‘,‘check.do?uname=‘+ $F(‘uname‘),true);xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){//獲得伺服器返回的資料var txt = xhr.responseText;$(‘uname_msg‘).innerHTML = txt;}};xhr.send(null);}</script></head><body style="font-size:30px;"> <form action="" method="get"> <fieldset> <legend>註冊</legend> 使用者名稱：<input id="uname" type="text" name="uname" onblur="check();" /> <span id= "uname_msg"></span><br/> 密碼：<input type="password" name="pwd"/><br/> <input type="submit" value="註冊"/> </fieldset> </form></body></html>//servlet頁面public class ActionServlet extends HttpServlet{public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{System.out.println("service()");//獲得請求資源路徑// http://ip:port/ajax-day01/check.doString action = request.getServletPath();//設定編碼類別型。response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();//依據分析的結果，進行不同的處理if("/check.do".equals(action)){String uname = request.getParameter("uname");System.out.println("uname:"+ uname);if("Sally".equals(uname)){out.println("帳號已經存在（╯－＿－）╯╧╧");}else{out.println("可以使用( ?? ω ?? )y");}}else if("/getLuck".equals(action)){Random r = new Random();int number = r.nextInt(8888);System.out.println("number:" + number);out.println(number);}}}
註：這裡沒有把web.xml貼出來 很簡單的配置，就不在此贅述了。
小天帶你瞭解ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
