大家都知道Ajax并不是一项新的发明技术,它的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。我们在使用html表单提交页面时,会有一种刷新页面的感觉,这给予用户的体验感十分不好,在这里可以通过js脚本来和后台服务器进行数据传递与交互,服务器查询到页面后,会将数据传送到js里面,并有js相关变量来接收,再在js里将获取到的值赋给html的input对象value值(通常是<span><label><text>等),所以js与后台异步交互可以不刷新整个页面,达到了局部刷新的效果。在前面已经提到在这里的html页面局部值的动态改变效果的是有js里面实现的。
那么实现js与后台传递的主要对象是XMLHttpRequest 对象,XMLHttpRequest 用于在后台与服务器交换数据。
本文代码的实现使用了Eclipse Java EE IDE for Web Developers.Version: Indigo Service Release 2。在编写代码的时候有几个坑在这里和大家说一下,第一ajax在传值时可以选get或post,这和表单的用法一样,另外,如果你想传递中文,在接收的servlet里面需要转换一下编码。
最后,本文使用的是最原始的ajax的异步传递原理,现在大都使用jquery封装的ajax,但最原始的往往是基础,是原理。
<%@ 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 chaxun(){ var userid=document.getElementById("userid"); //document.write(userid.value); //document.getElementById("userid").innerHTML="hellod"; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("uid").innerHTML=xmlhttp.responseText; //alert("hello"); } } xmlhttp.open("POST", "ReTest?userid="+userid.value,true);xmlhttp.send();}</script></head><body><br><br>用户:<input type="text" id="userid" οnblur="chaxun()"><span id="uid"></span><br>密码:<input type="text" id="pwd" ><br><input type="submit" value="dianji" οnclick="myFunction()"></body></html>
Servlet实现代码如下:
package dao;
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; /** * Servlet implementation class ReTest */ @WebServlet("/ReTest") public class ReTest extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public ReTest() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String id=request.getParameter("userid"); System.out.println(id); response.getWriter().println(id); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub //request.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String id=request.getParameter("userid"); id = new String(id.getBytes("iso-8859-1"),"gb2312"); System.out.println(id); response.getWriter().println(id); } }