對于網站開發人員，一定不會陌生的Ajax技術，本篇就讓我們認識一下它，或許在日后的開發過程中我們就可以使用到。Ajax在那方面使用的比較多呢？答案：表單注冊，傳統的表單注冊，有時需要填寫大量的信息，當我們好不容易寫完了，一點擊提交，后臺發現我們有一些字段填寫有誤，這是就會提示我們注冊失敗，請重新注冊，遇到這樣的情況，我想你和我一樣，一定恨透這個網站了。那如何來優化這個過程呢？這個時候我們的Ajax就排上用場了，當我們填寫完一行信息，就可以通過Ajax來異步的進行后臺判斷。說了這么多，簡單的講就是我們本篇談到的Ajax可以實現異步操作。好了，下面我們來一起領略一下它的風采。
1、創建Ajax：
當我們需要使用Ajax時，便可以通過在javascript中創建一個xmlHttPRequest對象，通過該對象進行相關的處理。這里我們需要注意的是，有些瀏覽器并不支持Ajax，這個時候，當我們創建對象時就要進行一定的判斷，以便保證我們的頁面在不同的瀏覽器上正常顯示。
if(window.xmlhttpRequest){//檢測瀏覽器版本是否支持 hPPT = new XMLHttpRequest();//IE7+;Firefox;Chrome;Opera }else{ hppt = new ActiveXObject("Microsoft.XMLHTTP");//IE6;IE5 }
2、表單界面設計：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>注冊</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keyWords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <style type="text/CSS"> input{ width: 160px; height: 25px; } </style> <script type="text/Javascript"> function setStyle(x){ document.getElementById(x).style.background="yellow"; } function clearStyle(y){ document.getElementById(y).style.background="white"; var hppt = new XMLHttpRequest(); http.open("GET", "http://127.0.0.1:8080/Ajxy/servlet/ajax?name=小米&pwd=123456", true); http.send(); //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true); //http.send(); //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true); //http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //http.send("name=小米&sex=男"); //處理結果判斷 if (http.readyState==4) { if (http.status==200) { alert("處理完成"); document.getElementById("news").innerHTML = request.responseText; } else { alert("發生錯誤：" + request.status); } }else{ //alert(http.readyState); } } </script> </head> <body> <center> <div id="news"></div> <table> <form method="post" action="<%=request.getContextPath() %>/servlet/ajax" enctype="application/x-www-form-urlencoded"> <!-- onfocus="":監聽獲得焦點事件 onblur="":監聽失去焦點事件 disabled="disabled"：銷毀，不存在的 readonly="readonly"：只讀--> <tr> <td>姓名：</td><td><input type="text" name="name" id="name" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td> </tr> <tr> <td>密碼：</td><td><input type="password" name="pwd" id="pwd" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td> </tr> <tr> <td>郵箱：</td><td><input type="text" name="email" id="email" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td> </tr> <tr> <td>操作：</td><td><input type="submit" id="submit" value="注冊"/></td> </tr> </form> </table> </center> </body></html>
3、Ajax的狀態碼：
readyState 狀態 狀態說明 (0)未初始化 此階段確認XMLHttpRequest對象是否創建，并為調用open()方法進行未初始化作好準備。值為0表示對象已經存在，否則瀏覽器會報錯－－對象不存在。 (1)載入 此階段對XMLHttpRequest對象進行初始化，即調用open()方法，根據參數(method,url,true)完成對象狀態的設置。并調用send()方法開始向服務端發送請求。值為1表示正在向服務端發送請求。 (2)載入完成 此階段接收服務器端的響應數據。但獲得的還只是服務端響應的原始數據，并不能直接在客戶端使用。值為2表示已經接收完全部響應數據。并為下一階段對數據解析作好準備。 (3)交互 此階段解析接收到的服務器端響應數據。即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody、responseText或responseXML屬性存取的格式，為在客戶端調用作好準備。狀態3表示正在解析數據。 (4)完成 此階段確認全部數據都已經解析為客戶端可用的格式，解析已經完成。值為4表示數據解析完畢，可以通過XMLHttpRequest對象的相應屬性取得數據。 概而括之，整個XMLHttpRequest對象的生命周期應該包含如下階段：創建－初始化請求－發送請求－接收數據－解析數據－完成
4、獲取相應的方式：
5、select類：用來接收Ajax傳輸過來的數據。
public class ajax extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String name = request.getParameter("name"); name = new String(name.getBytes("iso-8859-1"), "utf-8"); String pwd = request.getParameter("pwd"); System.out.println("name="+name); System.out.println("pwd="+pwd); System.out.println("GET_______Ajax"); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String name = (String) request.getParameter("name"); System.out.println("name="+name); String sex = (String)request.getParameter("sex"); System.out.println("sex="+sex); System.out.println("POST__________Ajax"); }}好了對于Ajax基礎知識的入門學習，就為大家分析完畢。
新聞熱點
疑難解答
