標籤：
一、Ajax簡介
Ajax(Asynchronous JavaScript and Xml)--非同步重新整理技術
Ajax的關鍵元素包括以下內容：
① JavaScript語言：Ajax技術的主要開發語言。
② XML/JSON/HTML等：用來封裝請求或響應的資料格式
③ DOM(文件物件模型)：通過DOM屬性或方法修改頁面元素，實現頁面局部重新整理
④ CSS：改變樣式，美化頁面效果，提升使用者體驗度
⑤ Ajax引擎：即XMLHttpRequest對象，以非同步方式在用戶端與伺服器之間傳遞資料。
二、Ajax工作流程
三、常用方法：
四、常用屬性
五、實現思路：
1、鎖定使用者名稱文字框，註冊onblur事件
2、建立XMLHttpRequest對象。通過window.XMLHttpRequest的傳回值判斷建立XMLHttpRequest對象的方式
3、設定回呼函數。通過onreadystatechange屬性設定回呼函數，其中回呼函數需要自訂
4、初始化XMLHttpRequest對象。通過open()佈建要求的發送方式和路徑
5、發送請求
準備簡單頁面：
<body> 使用者名稱：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/> 密碼： <input type="password" name="txtPwd"/> </body>
建立Servlet：回送資訊
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uname = request.getParameter("uname"); if (uname.equals("admin")) { //使用者已經被註冊了 //回送 資訊 response.getWriter().write("OK"); }else { response.getWriter().write("NO"); }
註：
步驟一：通過window。XMLHttpRequest的傳回值判斷當前瀏覽器建立XMLHttpRequest對象的方式。如果為true，說明是新版本IE或其他瀏覽器，可使用new XMLHttpRequest()方式建立XMLHttpRequest對象；如果為false，說明是老版本IE瀏覽器，需使用new ActiveXObject("Microsoft.XMLHttp")的方式建立XMLHttpRequest對象
步驟二：通過XMLHttpRequest對象的onreadystatechange屬性設定回呼函數，用於當請求成功後接收伺服器端返回的資料
步驟三：通過XMLHttpRequest對象的open()方法，傳入參數完成初始化XMLHttpRequest對象的工作。第一個參數為Http請求方式，選擇發送Httpget 請求，因此參數為get。第二個參數為要發送的url請求路徑，將要發送的資料附加到url路徑後面
步驟四：調用XMLHttpRequest對象的send()方法，參數為要發送到伺服器端的資料，因為採用"get"方式請求時，參數已經附加到url路徑後，所以直接設定為null。如果send()方法不設值，在不同的瀏覽器下可能存在不相容問題。
執行完畢後，非同步請求的發送過程就結束！
註：使用Ajax發送Post請求需注意要設定setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
採用Get方式發送請求時，通常會將需要攜帶的參數附加在URL路徑後面一起發送，所以send()不需要傳遞參數，設定為null即可
六 、使用jQuery實現Ajax
jQuery常用的Ajax方法
文法：$.ajax([settings]);
常用屬性參數:
常用函數參數：
使用$.ajax()驗證使用者名稱--使用$.ajax() 實現非同步互動
註：需引jquery-1.11.1.js庫
<html> <head> <base href="<%=basePath%>"> <title>My JSP ‘index.jsp‘ starting page</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript"> $(function(){ var dom=$("#txtName"); dom.blur(function() { myjquery(); }); }); function myjquery(){ var dom=$("#txtName"); $.ajax({ url:‘<%=path%>/servlet/CheckUserServlet‘, type:‘post‘, data:{uname:dom.val()}, success:function(result){ alert(result); } }); } </script> </head> <body> <h2>使用jQuery實現Ajax</h2> 使用者名稱：<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/><br/> 密碼： <input type="password" name="txtPwd"/> </body>
實現效果：
若輸入的非admin，即可註冊，否則無法註冊
若是post請求，調試效果如下：
七、JSON簡介
JavaScript Object Notation是一種輕量級的資料交換格式
①定義Json對象
文法：var json對象={key:value,key:value,...}
② 定義Json數組
文法：var json數組=[value,value,...]
<script type="text/javascript"> var data={"firstName":"Brett","lastName":"hehe"}; $.each(data,function(i,dom){ alert(dom); }); /* var data={ "people":[ {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}, {"firstName":"Jason","lastName":"Hunter","email":"bbbb"}, {"firstName":"Elliotte","lastName":"Harold","email":"cccc"} ]};$.each(data.people,function(i,dom){ alert(dom.firstName); }); */ </script>
那麼即可拿到每個dom對象：
Ajax與jQuery、json
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
