什么是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖等等。
同步與異步的差別;
package web_Servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet{ @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String username=request.getParameter("username"); String password=request.getParameter("password"); System.out.println(username); System.out.println(password); if("whr".equals(username)&&"123".equals(password)){ response.getWriter().write("sucess"); }else{ response.getWriter().write("failure"); } } }
<%@ 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"> function login(){ var username=document.getElementById('username').value; var password=document.getElementById('password').value; var params='username='+username+'&password='+password; //3.url var url='${pageContext.request.contextPath}/LoginServlet?'+params; //使用ajax發送get請求 //4.1創建一個請求對象 var request=new XMLHttpRequest(); //4.2調用get請求的方法 //調用open方法，都用異步，true request.open('get',url,true); request.send(); //接受服務器的響應 request.onreadystatechange=function(){ console.log('准備狀態碼-'+request.readyState+':響應狀態碼-'+request.status); if(request.readyState==4&&request.status==200){ //接受服務器響應的數據 alert( request.responseText); } } } </script> </head> <body> <form action="${pageContext.request.contextPath}/LoginServlet"> 用戶名：<input type="text" name="username" id="username"><br> 密碼： <input type="password" name="password" id="password"><br> <input type="button" value="提交" onclick="login()"> </form> </body> </html>
運行截圖：
