首先，我们新建一个和web项目，然后新建一个servlet我，我们命名为AServlt，然后写入如下代码:
1 package cn.cuibusi.servlet; 2 3 import javax.servlet.ServletException; 4 import javax.servlet.annotation.WebServlet; 5 import javax.servlet.http.HttpServlet; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 import java.io.IOException; 9 10 /** 11 * Created by cuibusi on 2017/4/20. 12 */ 13 @WebServlet("/AServlet") 14 public class AServlet extends HttpServlet { 15 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 16 System.out.println("Hello AJAX"); 17 response.getWriter().print("Hello AJAX!!!"); 18 } 19 }
然后，我们的服务器端就建立完毕了。
我们再新建一个jsp页面，命名为ajaxdemo.jsp，加入一个按钮和一个h1标签，意图是在我们点击按钮时发送异步请求，然后通过h1标签来显示服务器端发回来的消息：
1 <body> 2 <button id="btn">点击这里</button> 3 <h1 id="h1"></h1> 4 </body>
接下来就是我们核心的js代码，代码如下，步骤都在注释里：
1 <script type="text/javascript"> 2 // 创建异步对象 3 function createXMLHttpRequest() { 4 try { 5 return new XMLHttpRequest();//大多数浏览器 6 } catch (e) { 7 try { 8 return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 9 } catch (e) { 10 try { 11 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 12 } catch (e) { 13 alert("哥们儿，您用的是什么浏览器啊？"); 14 throw e; 15 } 16 } 17 } 18 } 19 20 window.onload = function() {//文档加载完毕后执行 21 var btn = document.getElementById("btn"); 22 btn.onclick = function() {//给按钮的点击事件注册监听 23 /* 24 ajax四步操作，得到服务器的响应 25 把响应结果显示到h1元素中 26 */ 27 /* 28 1. 得到异步对象 29 */ 30 var xmlHttp = createXMLHttpRequest(); 31 /* 32 2. 打开与服务器的连接 33 * 指定请求方式 34 * 指定请求的URL 35 * 指定是否为异步请求 36 */ 37 xmlHttp.open("GET", "<c:url value='/AServlet'/>", true); 38 /* 39 3. 发送请求 40 */ 41 xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！ 42 /* 43 4. 给异步对象的onreadystatechange事件注册监听器 44 */ 45 xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行 46 // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功） 47 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 48 // 获取服务器的响应结束 49 var text = xmlHttp.responseText; 50 // 获取h1元素 51 var h1 = document.getElementById("h1"); 52 h1.innerHTML = text; 53 } 54 }; 55 }; 56 }; 57 </script>
最后，我们来看一下运行效果：
