什么是 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>
运行截图：
