客户端文件
<script type="text/javascript" src="js/test.js"></script> <title>Insert title here</title> </head> <body> <form> <input type="button" name="ok" id="ok" value="测试服务器的链接"> </form> </body>
test.js代码
/** * ajax建立和服务器的链接，接收服务器的请求，处理服务器返回的数据 * 开发步骤： * 创建xmlHttpRequest对象 * 处理服务器端的响应 * 打开和服务器的链接 * 发送服务 * */ function ajaxFunction(){ var xmlHttp; try{ //Firefox xmlHttp = new XMLHttpRequest(); }catch(e){ try{ //IE xmlHttp = new ActiveXObject("Msxm12.XMLHTTP"); }catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } return xmlHttp; } window.onload = function(){ document.getElementById("ok").onclick = function(){ //获取xmlhttpRequest对象 var xmlReq = ajaxFunction(); //处理服务器的响应 ，实时监听 xmlReq.onreadystatechange = function(){ //alert(xmlReq.status); if(xmlReq.readyState == 4){ //响应发送完毕 if(xmlReq.status == 200 || xmlReq.status == 304){ alert("xx"); } } } //打开和服务器的链接 //url加一个时间戳timeStamp 可以避免浏览器缓存效果，确保url的唯一性 xmlReq.open("get","./TestServlet?timeStamp="+new Date().getTime(),true); //url..... //发送服务 get请求不会发送任何数据 xmlReq.send(null); } }
服务器端
package myDemo;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
System.out.print("hello....");
out.print("connect servlet success !");
}
public void doPost(HttpServletRequest request,IOException {
}
}
配置文件 web.xml
<servlet>
<description></description>
<display-name>TestServlet</display-name>
<servlet-name>TestServlet</servlet-name>
<servlet-class>myDemo.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>
post 、get 方法
get方法不向服务器发送任何数据， send()方法传递 null 即可。
用post 请求向服务器发送数据，需要将 content-type 的首部设为 “ application/x-www-form-urlencoded”,它会告知服务器正在发送数据，并且数据已经符合url 编码了。该方法必须放在open 方法之后。
XMLHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded")
