/**Ajax 編寫流程
* 1、創建 XHR (XMLHttpRequest)對象
1 var xmlHttpReq = false; // var xmlHttpReq = ""; 數據類型改變--弱類型
2 //Part1:創建 [一個函數，初始化] XHR 對象--->是 Ajax的基礎
3 function createXmlHttpRequest() { 4 /**這里要完成兩個步驟： 5 * 1.IE7+、FireFox、Chrome、Safari、Opera瀏覽器下的 XHR 是如何初始化的 6 * 2.IE5、IE6 瀏覽器下的 XHR 有是如何初始化的 7 **/
8 if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下創建的 XHR
9 xmlHttpReq = new XMLHttpRequest(); 10 }else if(window.ActiveXObject){ //IE5、IE6下創建的 XMLHttpRequest
11 try{ // 所有現代瀏覽器均支持 XHR 對象（IE5 和 IE6 使用 ActiveXObject）。
12 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 13 }catch(e){ 14 console.log("=====Fail======"); 15 } 16 } 17 }
* 2、利用XHR發送Ajax請求
* 3、寫一個回調函數來解析服務器端返回的數據
* 4、把數據渲染到HTML頁面上
1 //Part2:利用XMLHttpRequest發送Ajax請求---->將請求發送到服務器 用 XHR 對象的 open() 和 send() 方法
2 function sendRequest(url, params){ 3 // 1創建 XMLHttpReq對象（先調用，使xmlHttpReq初始化）
4 createXmlHttpRequest(); 5 // 2向服務器發送請求---->設置發送請求相關屬性
6 xmlHttpReq.open("POST",url,true);// 2.1 規定請求的類型、URL 以及是否異步處理請求。
7 xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2 設置Http請求頭
8 xmlHttpReq.send(params); // 2.3 將請求發送到服務器 發送數據
9 // Part3 回調函數 處理服務器返回的數據
10 xmlHttpReq.onreadystatechange = function() { 11 if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){ 12 //Part4 數據解析---> 把數據渲染到HTML頁面上
13 // nodeValue 返回元素值
14 var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue; 15 window.alert(res); 16 } 17 } 18 }
完整代碼如下：
1.html文件
1 <!-- 01_ajax.html --> 2 <!DOCTYPE html> 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Ajax案例</title> 7 <script src="js/01_ajax.js"></script> 8 9 </head> 10 <body> 11 <form action="" method="post"> 12 <p><label>賬號:</label><input type="text" name="uname" id="uname"></p> 13 <p><label>密碼:</label><input type="password" name="upass" id="upass"></p> 14 <p><input type="button" value="登錄" onclick="login()"></p> 15 </form> 16 </body> 17 </html>
2.js文件
1 /**Ajax編寫流程 2 * 1、創建 XHR (XMLHttpRequest)對象 3 * 2、利用XHR發送Ajax請求 4 * 3、學會寫一個回調函數來解析服務器端返回的數據 5 * 4、把數據渲染到HTML頁面上 6 */ 7 8 $ = function(obj){ 9 return document.getElementById(obj); 10 } 11 12 var xmlHttpReq = false; // var xmlHttpReq = ""; 數據類型改變--弱類型 13 //Part1:創建 [一個函數，初始化] XHR 對象--->是 Ajax的基礎 14 function createXmlHttpRequest() { 15 /**這里要完成兩個步驟： 16 * 1.IE7+、FireFox、Chrome、Safari、Opera瀏覽器下的 XHR 是如何初始化的 17 * 2.IE5、IE6 瀏覽器下的 XHR 有是如何初始化的 18 **/ 19 if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下創建的 XHR 20 xmlHttpReq = new XMLHttpRequest(); 21 }else if(window.ActiveXObject){ //IE5、IE6下創建的 XMLHttpRequest 22 try{ // 所有現代瀏覽器均支持 XHR 對象（IE5 和 IE6 使用 ActiveXObject）。 23 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 24 }catch(e){ 25 console.log("=====Fail======"); 26 } 27 } 28 } 29 30 31 //Part2:利用XMLHttpRequest發送Ajax請求---->將請求發送到服務器 用 XHR 對象的 open() 和 send() 方法 32 function sendRequest(url, params){ 33 // 1創建 XMLHttpReq對象（先調用，使xmlHttpReq初始化） 34 createXmlHttpRequest(); 35 // 2向服務器發送請求---->設置發送請求相關屬性 36 xmlHttpReq.open("POST",url,true);// 2.1 規定請求的類型、URL 以及是否異步處理請求。 37 xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2設置Http請求頭 38 xmlHttpReq.send(params); // 2.3 將請求發送到服務器 發送數據 39 // Part3 使用回調函數 處理服務器返回的數據 40 xmlHttpReq.onreadystatechange = function() { 41 if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){ 42 // Part4 數據解析 ---> 把數據渲染到HTML頁面上 43 var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue; // nodeValue 返回元素值 44 window.alert(res); 45 } 46 } 47 } 48 49 // 登錄點擊事件方法 50 function login(){ 51 var uname = $("uname").value; 52 var upass = $("upass").value; 53 var params = "uname=" + uname + "&upass=" + upass; 54 sendRequest("01_ajax.do",params); 55 }
3.java文件
1 package com.lsy.ajaxtest1; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.annotation.WebServlet; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 // 服務器端 ---> ervlet 13 14 @WebServlet("/01_ajax.do") 15 /*只要在Servlet上設置@WebServlet標注，容器就會自動讀取當中的信息。上面的@WebServlet告訴容器， 16 如果請求的URL是“/01_ajax.do”，則由HelloServlet的實例提供服務。可以使用@WebServlet提供更多信息*/ 17 public class AjaxServelet_01 extends HttpServlet { 18 19 private static final long serialVersionUID = 4776153483702612333L; 20 21 /**服務器端要做怎樣的操作 22 * 1、獲得數據（請求） 23 * 2、返回數據（響應） 24 **/ 25 @Override 26 protected void doPost(HttpServletRequest request,HttpServletResponse response) 27 throws ServletException,IOException { 28 request.setCharacterEncoding("utf-8"); //請求的中文處理 29 response.setCharacterEncoding("utf-8"); //響應的中文處理 30 response.setContentType("text/xml;charset=utf-8"); //響應類型的設置 31 PrintWriter out = response.getWriter(); //輸出流（字符流），輸出xml格式數據 32 33 String uname = request.getParameter("uname"); 34 String upass = request.getParameter("upass"); 35 36 // System.out.println(uname + "---" + upass); 37 // String xml = "<response><res>歡迎光臨...</res></response>"; 38 StringBuffer xml = new StringBuffer(); 39 xml.append("<response>"); 40 if("zs".equals(uname) && "123".equals(upass)) { 41 xml.append("<res>歡迎光臨...</res>"); 42 }else { 43 xml.append("<res>輸入信息有錯！</res>"); 44 } 45 xml.append("</response>"); 46 out.println(xml.toString()); 47 out.flush(); 48 out.close(); //輸出流關閉 49 } 50 }