get 请求参数通过 url那里写进去，然后send(null)
html文件和 servlet进行通信 通过ajax 进行通信
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>AJAX进行get方式的请求测试</title> 6 </head> 7 <body> 8 <input type="button" id="b1" name="b1" value="测试与服务器的通信"/> 9 <div id="d1"> 10 11 </div> 12 <script type="text/javascript"> 13 14 window.onload=function(){//当页面被全部加在完毕后再执行 15 //给b1按钮注册事件 16 document.getElementById("b1").onclick=function(){ 17 //AJAX代码 18 19 //得到XmlHttpRequest对象 20 var xhr = createXmlHttpRequest(); 21 //xhr的readyState改变都会触发onreadystatechange事件 22 23 /* 24 * readyState的取值： 25 * 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 26 * 1 (初始化) 对象已建立，尚未调用send方法 27 * 2 (发送数据) send方法已调用，但是当前的状态及http头未知 28 * 3 (数据传送中) 已接收部分数据，因为响应及http头不全， 29 * 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 30 31 */ 32 xhr.onreadystatechange=function(){ 33 if(xhr.readyState==4){ 34 //真正的处理 35 if(xhr.status==200||xhr.status==304){ 36 //服务器正确返回 37 var data = xhr.responseText;//服务器返回的数据 38 //把返回的数据写到div中 39 document.getElementById("d1").innerHTML=data; 40 } 41 } 42 } 43 //建立与服务器的连接 44 /* 45 * oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); 46 * bstrMethod:请求方式。一般使用get或post 47 * bstrUrl:请求的资源地址：可以绝对或相对路径 48 * varAsync:是否是异步请求。默认是true。 49 */
//由于浏览器请求url如果都是一样的话，就不请求了，所以后面加个时间信息，让url不同，
50 xhr.open("GET","/ajaxday02/servlet/ServletDemo1?time="+new Date().getTime()); 51 //发送数据 52 //oXMLHttpRequest.send(varBody); varBody:请求参数 53 xhr.send(null); 54 55 //接收服务器返回的数据 56 57 58 } 59 } 60 function createXmlHttpRequest(){ 61 var xmlHttp; 62 try{ //Firefox, Opera 8.0+, Safari 63 xmlHttp=new XMLHttpRequest(); 64 }catch (e){ 65 try{ //Internet Explorer 66 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 67 }catch (e){ 68 try{ 69 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 70 }catch (e){} 71 } 72 } 73 return xmlHttp; 74 } 75 76 </script> 77 </body> 78 </html>
servlet
1 package cn.itcast.controller; 2 3 import java.io.IOException; 4 import java.io.PrintWriter; 5 6 import javax.servlet.ServletException; 7 import javax.servlet.annotation.WebServlet; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 @WebServlet("/servlet/ServletDemo1") 13 public class ServletDemo1 extends HttpServlet { 14 private static final long serialVersionUID = 1L; 15 16 17 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 18 response.setContentType("text/html;charset=UTF-8"); 19 PrintWriter out = response.getWriter(); 20 out.write("hello ajax"); 21 System.out.println("ServletDemo1执行了"); 22 } 23 24 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 25 doGet(request,response); 26 } 27 28 }