jsp中使用原生js实现异步交互

  Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。 Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据,这一特点主要得益于XMLHTTPRequest对象。

 XMLHttpRequest 对象方法

         方法              描述
         abort()      停止当前请求
         getAllResponseHeaders()      作为字符串返问完整的headers
         getResponseHeader("headerLabel")      作为字符串返问单个的header标签
         open("method","URL"[,asyncFlag[,"userName"[, "password"]]])      设置未决的请求的目标 URL, 方法, 和其他参数
         send(content)      发送请求
         setRequestHeader("label", "value")      设置header并和请求一起发送

        属性                                  描述
         onreadystatechange      状态改变的事件触发器
         readyState                      对象状态(integer):
         0 = 未初始化
         1 = 读取中
         2 = 已读取
         3 = 交互中
         4 = 完成
         responseText      服务器进程返回数据的文本版本
         responseXML      服务器进程返回数据的兼容DOM的XML文档对象
         status      服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
         statusText      服务器返回的状态文本信息

 

前端页面中的js代码：

<script type="text/javascript">
	window.onload = function() {
		document.getElementById("btn").onclick = function() {
			var xhr ;
			if (window.XMLHttpRequest) {
				xhr=new XMLHttpRequest();
			} else {
				xhr=new ActiveXObject(Microsoft.XMLHTTP);
			}
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {//说明响应结束	
					if (xhr.status == 200) {//说明响应成功
						alert(xhr.responseText)
					}
				}
			}
			//第一个参数是提交的方式，第二个参数是请求的目标url（后面可以带参数，后台可以通过request.getParameter(）方法获取），第三个参数是是否异步传输。
			xhr.open("get", "/ajaxTest/test?name=zhangsan",true)
			xhr.send();
			
			/*
			    使用send之前要设置这些参数,同样地后台可以通过request.getParameter()方法获取,send()方法相当是将数据封装在表单中提交到后台；
	　　　　　      　   但是经过实验，使用send方法时，open（）方法中的提交方式需是post，否则后台获取不到参数,而在open（）方法中带参数则没有这个问题。
			*/
			//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8") 
			//xhr.send("name=zhangsan");
		}
	}
</script>

 

在servlet中进行响应处理，通过pritWriter就能进行响应，这里输出了一些中文的字符串，但是在输出之前需要设置编码方式，否则会出现乱码的情况：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");//在获取printwriter之前设置编码方式，否则会发生乱码
        System.out.println("已经提交到了servlet");
        System.out.println(request.getParameter("name"));
        PrintWriter printWriter=response.getWriter();
        printWriter.print("这是服务端发送的数据");
        printWriter.flush();
        printWriter.close();
    }

 

结果是前台js已经获取到了响应的字符串：