ajax的理解
文字表述什麽是ajax
AJAX = 異步 JavaScript 和 XML,一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
具體實踐講述ajax的運行機制
工具
IntelliJ IDEA，以及firefox瀏覽器、firebug插件
新建一個項目，點擊web選項
命名
工程項目結構
首先編寫一個servlet類，servlet類這裏相當於服務器
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet;View Codeimport javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet(name = "AjaxServlet") public class AjaxServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException { doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1.獲取參數 // 2.檢查參數是否有問題 // 3.校驗操作 // 4.和傳統應用不同之處，這一步需要將用戶感興趣的數據返回到頁面段，而不是將一個新的頁面發送給用戶try { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out=response.getWriter(); // 1.獲取參數 String old=request.getParameter("name"); // 2.檢查參數是否有問題 if(old==null||old.length()==0) { out.println("用戶名不能為空"); }else { // 3.校驗操作 String name=old; if(name.equals("lxc")){ //4.和傳統應用不同之處，這一步需要將用戶感興趣的數據返回到頁面段，而不是將一個新的頁面發送給用戶 // 寫法沒有發生變化，本質發生了變化 out.println("用戶名["+name+"]已存在,請更換"); }else { out.println("用戶名["+name+"]未被註冊，可以使用"); } } }catch(Exception e){ e.printStackTrace(); } } }
然後進行web.xml編寫
然後創建一個ajax.html文件，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李賢春</title>
<script type="text/javascript" src="jslib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
ajax下進行用戶校驗的實例，請輸入用戶名：</br>
<!--ajax方式下不需要使用表單來進行數據提交，因此不用寫表單標簽
ajax方式下不需要name屬性，加個id屬性就行了-->
<input type="text" id="userName"/>
<input type="button" value="校驗" onclick="verify()"/>
<!--這個div用於存放服務器端返回的信息，開始為空
id屬性定義是為了利用dom的方式找到某一個節點，進行操作-->
<div id="result"></div>
<!--<div>456</div>
<span>123</span><span>456</span>-->
<!--div和span的直觀差異，div中的內容獨占一行，span中的內容不獨占-->
</body>
</html>
View Code
在頁面顯示
在點擊校驗按鈕前，先把js文件給引入進來，要不然點擊事件不會生效
目錄如下
當點擊校驗按鈕後，會跳轉到一個js文件，現命名為vertify.js。在這個文件裏主要幹四件事，比較重要。當然會涉及到js的一些內容。
1、獲取文本框中的內容，專業地說就是獲取節點，var jqueryObj=$("#userName").其中，Jquery的查找節點的方式是參數中#加上id屬性值可以找到一個節點，userName就是ajax.html中的id值,也就是在瀏覽器頁面中輸入的用戶名的數據。
2、獲取節點的數據，var dataName=jqueryObj.val()；其中，jquery的方法返回節點的都是jquery的對象，可以繼續在上面執行其他的jquery的方法，val()方法就是返回節點數據。
3、將獲取到的數據發送到服務器端的servlet，$.get("AjaxServlet？name="+dataName,null,callback);其中，"AjaxServlet？name="+dataName 是把獲取到的數據與服務器端的數據連接起來，讓其相等，進行相關的業務判斷（不需要我們操作），null一欄其實是待發送的Key/Value的參數，callback是載入成功時的回調函數。
4、接收服務器端返回的數據，後面幾步需要在回調函數裏進行，因為通過回調函數可以將服務器端與頁面端有效聯通起來。function callback(){ }；
這裏先進行測試一下 ，我用的是firefox瀏覽器，firebug插件
進一步測試
說明我們寫的都是正確的
4是接收服務器段返回的數據，function callback( data){ alert(data)},進行測試
測試可用
5、將服務器端返回的數據動態的顯示在頁面上，
var resultObj=$("#result");
resultObj.html(data);
alert(data);
其中result出現在ajax.html中，為的是在頁面中開辟一條空間存儲數據。
測試一下
通過
總結：
核心步驟：
1.獲取文本框中的內容
2.獲取節點中的數據
3.將節點中的數據發送給服務器端的servlet
//節點中的數據在服務器裏進行業務判斷(自動進行的)
4.接收服務器端返回的數據
5.將服務器端返回的數據動態的顯示在頁面上
註：因為firefox最新的版本已經不支持firebug插件，所以用的是低版本的，而且網上不好找，這是百度雲鏈接：https://pan.baidu.com/s/1mvf5MJ_FOXnuTb_elXk_gw
ajax的理解