ajax原始寫法之菜鳥心得
阿新 • • 發佈：2018-12-03
剛開始學習Ajax，當然是先把原理性的東西弄懂了，在去用什麼js框架，那樣才能得心應手：寫的註釋比較多，適合快速理解和上手使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>最原始的ajax寫法</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> //這個方法將使用XMLHTTPRequest物件來進行AJAX的非同步資料互動 var xmlHttpRequest; //使用者名稱校驗的方法 function verify() { var success = createXMLHTTPRequest(); if (!success) { return; } var userName = document.getElementById("userName").value;//獲取使用者名稱字 //2.註冊回撥函式 //註冊回撥函式時，之需要函式名，不要加括號 //我們需要將函式名註冊，如果加上括號，就會把函式的返回值註冊上，這是錯誤的 xmlHttpRequest.onreadystatechange = callback; //3。設定連線資訊 //第一個引數表示http的請求方式，支援所有http的請求方式，主要使用get和post //第二個引數表示請求的url地址，get方式請求的引數也在url中 //第三個引數表示採用非同步還是同步方式互動，true表示非同步 //記住在url後面加上時間戳 //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true); //POST方式請求的程式碼 xmlHttpRequest.open("POST", "OriginalityAjaxAction", true); //POST方式需要自己設定http的請求頭 xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //POST方式傳送資料 xmlHttpRequest.send("username=" + userName); //4.傳送資料，開始和伺服器端進行互動 //同步方式下，send這句話會在伺服器段資料回來後才執行完 //非同步方式下，send這句話會立即完成執行 //xmlHttpRequest.send(null); } //回撥函式 function callback() { //alert(xmlHttpRequest.readyState); //5。接收響應資料 //判斷物件的狀態是互動完成 if (xmlHttpRequest.readyState == 4) { //判斷http的互動是否成功 if (xmlHttpRequest.status == 200) { //獲取伺服器器端返回的資料 //獲取伺服器段輸出的純文字資料 var responseText = xmlHttpRequest.responseText; //將資料顯示在頁面上 //通過dom的方式找到div標籤所對應的元素節點 var divNode = document.getElementById("result"); //設定元素節點中的html內容 divNode.innerHTML = responseText; } else { alert("出錯了！！！"); } } } //建立XMLHTTPRequest物件來進行AJAX的非同步資料互動 function createXMLHTTPRequest() { //1.建立XMLHttpRequest物件 //這是XMLHttpReuquest物件無部使用中最複雜的一步 //需要針對IE和其他型別的瀏覽器建立這個物件的不同方式寫不同的程式碼 if (window.XMLHttpRequest) { //針對FireFox，Mozillar，Opera，Safari，IE7，IE8 xmlHttpRequest = new XMLHttpRequest(); //針對某些特定版本的mozillar瀏覽器的BUG進行修正 if (xmlHttpRequest.overrideMimeType) { xmlHttpRequest.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //針對IE6，IE5.5，IE5 //兩個可以用於建立XMLHTTPRequest物件的控制元件名稱，儲存在一個js的陣列中 //排在前面的版本較新 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; for ( var i = 0; i < activexName.length; i++) { try { //取出一個控制元件名進行建立，如果建立成功就終止迴圈 //如果建立失敗，回丟擲異常，然後可以繼續迴圈，繼續嘗試建立 xmlHttpRequest = new ActiveXObject(activexName[i]); break; } catch (e) { } } } //確認XMLHTtpRequest物件是否建立成功 if (!xmlHttpRequest) { alert("XMLHttpRequest物件建立失敗!!"); return false; } else { //0 - 本地響應成功 //alert(xmlhttp.readyState); return true; } } </script> </head> <body> 請輸入要驗證的使用者名稱字(輸入admin試試)：<br/> <input type="text" id="username"/><input type="button" value="校驗" onclick="verify()"/> <div id="result"></div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>最原始的ajax寫法</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> //這個方法將使用XMLHTTPRequest物件來進行AJAX的非同步資料互動 var xmlHttpRequest; //使用者名稱校驗的方法 function verify() { var success = createXMLHTTPRequest(); if (!success) { return; } var userName = document.getElementById("userName").value;//獲取使用者名稱字 //2.註冊回撥函式 //註冊回撥函式時，之需要函式名，不要加括號 //我們需要將函式名註冊，如果加上括號，就會把函式的返回值註冊上，這是錯誤的 xmlHttpRequest.onreadystatechange = callback; //3。設定連線資訊 //第一個引數表示http的請求方式，支援所有http的請求方式，主要使用get和post //第二個引數表示請求的url地址，get方式請求的引數也在url中 //第三個引數表示採用非同步還是同步方式互動，true表示非同步 //記住在url後面加上時間戳 //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true); //POST方式請求的程式碼 xmlHttpRequest.open("POST", "OriginalityAjaxAction", true); //POST方式需要自己設定http的請求頭 xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //POST方式傳送資料 xmlHttpRequest.send("username=" + userName); //4.傳送資料，開始和伺服器端進行互動 //同步方式下，send這句話會在伺服器段資料回來後才執行完 //非同步方式下，send這句話會立即完成執行 //xmlHttpRequest.send(null); } //回撥函式 function callback() { //alert(xmlHttpRequest.readyState); //5。接收響應資料 //判斷物件的狀態是互動完成 if (xmlHttpRequest.readyState == 4) { //判斷http的互動是否成功 if (xmlHttpRequest.status == 200) { //獲取伺服器器端返回的資料 //獲取伺服器段輸出的純文字資料 var responseText = xmlHttpRequest.responseText; //將資料顯示在頁面上 //通過dom的方式找到div標籤所對應的元素節點 var divNode = document.getElementById("result"); //設定元素節點中的html內容 divNode.innerHTML = responseText; } else { alert("出錯了！！！"); } } } //建立XMLHTTPRequest物件來進行AJAX的非同步資料互動 function createXMLHTTPRequest() { //1.建立XMLHttpRequest物件 //這是XMLHttpReuquest物件無部使用中最複雜的一步 //需要針對IE和其他型別的瀏覽器建立這個物件的不同方式寫不同的程式碼 if (window.XMLHttpRequest) { //針對FireFox，Mozillar，Opera，Safari，IE7，IE8 xmlHttpRequest = new XMLHttpRequest(); //針對某些特定版本的mozillar瀏覽器的BUG進行修正 if (xmlHttpRequest.overrideMimeType) { xmlHttpRequest.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //針對IE6，IE5.5，IE5 //兩個可以用於建立XMLHTTPRequest物件的控制元件名稱，儲存在一個js的陣列中 //排在前面的版本較新 var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; for ( var i = 0; i < activexName.length; i++) { try { //取出一個控制元件名進行建立，如果建立成功就終止迴圈 //如果建立失敗，回丟擲異常，然後可以繼續迴圈，繼續嘗試建立 xmlHttpRequest = new ActiveXObject(activexName[i]); break; } catch (e) { } } } //確認XMLHTtpRequest物件是否建立成功 if (!xmlHttpRequest) { alert("XMLHttpRequest物件建立失敗!!"); return false; } else { //0 - 本地響應成功 //alert(xmlhttp.readyState); return true; } } </script> </head> <body> 請輸入要驗證的使用者名稱字(輸入admin試試)：<br/> <input type="text" id="username"/><input type="button" value="校驗" onclick="verify()"/> <div id="result"></div> </body> </html>
Java程式碼 package web.action; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; //對原始的ajax頁面請求的控制器 public class OriginalityAjaxAction extends HttpServlet { private static final long serialVersionUID = 1978049925174268801L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); response.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //將資料返回給頁面 if(username.equals("admin")){ out.print("使用者：[admin]已經被使用了"); }else{ out.print("使用者：[" + username + "]可以使用"); } } }
加粗樣式