1、Ajax是什么？
簡單來說ajax是一個局部的刷新技術，通過向服務器發送並且獲得請求來刷新某一個局部界面，而不是整個界面的刷新。
它是通過在html頁面中使用JavaScript和XmlHttpRequest來向服務器發送和獲取數據。它可以實現頁面的局部刷新和異步刷新。
2、如果沒有Ajax會怎么樣
假如你在看網絡視頻的時候，如果沒有ajax這個局部刷新技術，那么每次你評論視頻的時候都會刷新頁面。
這樣每次評論后，你都只能從重頭開始播放了，是不是十分的麻煩。
3、通過頁面的局部刷新加法來體驗一下ajax帶來的好處
首先是servlet端，獲取前端送來的i和j的值並計算后返回。
Servlet代碼
package com.xyf.web6; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class Ajax1Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String action = req.getParameter("action"); if(action==null||action.length()<0) { req.getRequestDispatcher("/Ajax1.jsp").forward(req, resp); } else if(action.equals("add")) { int i = Integer.parseInt(req.getParameter("i")); int j = Integer.parseInt(req.getParameter("j")); resp.setContentType("text/html"); resp.getWriter().print(i+j); System.out.println("數據已獲取"); } } }
JSP端，通過getbyid來獲得表單input中add的值，然后在javascript里取得i和j的值，並將它包裝為ajax請求后再發出，需要注意的是send程序執行之后程序並沒有結束
通過onreadystatechange監聽 事件，當請求被發送到服務器時，才開始執行響應后結束。
代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload=function(){ var add = document.getElementById("add"); add.onclick=function(){ var i = document.getElementById("i").value; var j = document.getElementById("j").value; //XHR對象執行，發出Http請求，頁面不用刷新 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性 xhr.open("POST","ajax1?action=add&i="+i+"&j="+j,true); xhr.onreadystatechange=function(){ alert("onreadystatechange,readyState="+xhr.readyState); if(xhr.readyState==4)//服務器返回了 { if(xhr.status==200)//xhr.status http狀態碼 { alert(xhr.responseText);//xhr.responseText返回的報文體 document.getElementById("result").innerText = xhr.responseText; //根據服務器返回的內容更新需要更新的內容 } else { alert("服務器返回錯誤"); } } }; alert("send之前"); xhr.send();//發出請求。並不會等服務器返回send方法才結束，因為我們需要提前監聽xhr.onreadystatechange // 事件，以便得知“服務器返回了” alert("send之后"); }; }; </script> </head> <body> <input type="text" id="i"/>+<input type="text" id="j"/> <input type="button" id="add" value="="/><span id="result"></span> </body> </html>
它的加載順序為，在表單提交按鈕之后獲得i和j的值，並將他包裝為ajax請求傳送到服務器（此時前端的ajax事件處於監聽狀態），在服務器獲取到后再將他傳送回來時候，頁面完成了局部的刷新。
最后別忘了web.xml端的配置
<servlet>
<servlet-name>ajax1Servlet</servlet-name>
<servlet-class>com.xyf.web6.Ajax1Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajax1Servlet</servlet-name>
<url-pattern>/ajax1</url-pattern>
</servlet-mapping>
操作演示
在web服務器啟動后，在瀏覽器上輸入3+4，然后點擊等於發送ajax請求
使用抓包工具可以看到請求的路徑，還有請求的類型為xhr 狀態代碼為200。這就是一個ajax請求了。使用抓包工具可以看到請求的路徑，還有請求的類型為xhr 狀態代碼為200。這就是一個ajax請求了。
下面為數據為i為null，j為null的方式提交的，此時狀態代碼返回500.服務器錯誤。
接下來提交數據，i為3，j為4，服務器返回7，此時頁面完成局部刷新，ajax請求成功，此時頁面完成了局部刷新了。
4、自己去封裝一個ajax
如果每次去使用ajax的操作都需要寫以上代碼的話會十分麻煩，那現在我們來把這個ajax代碼通過js的方式來封裝一下。
考慮到代碼的復用性，我們只把主要的代碼塊兒進行封裝。將可以修改的部分暴露給用戶自己去做，這樣就可以提高代碼的效率。
首先創建一個js的文件
jsp端代碼
使用方法是
function rpajax(url,successFunc)
rpajax("ajax1?action=add&i="+i+"&j="+j,function(respTxt)
在successfunc里定義成功執行之后返回的function，在第一個參數寫出你要提交的url即可，這樣就簡化了ajax代碼。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> window.onload=function(){ var add = document.getElementById("add"); add.onclick=function(){ var i = document.getElementById("i").value; var j = document.getElementById("j").value; rpajax("ajax1?action=add&i="+i+"&j="+j,function(respTxt){ alert(respTxt); document.getElementById("result").innerText = respTxt; }); }; }; </script> </head> <body> <input type="text" id="i"/>+<input type="text" id="j"/> <input type="button" id="add" value="="/><span id="result"></span> </body> </html>
下一篇將講到ajax在實際中的用法