ajax方式实现局部刷新

利用JS向服务端发送请求，并且响应请求，分3要点

1.向后端处理页面发送请求

function input() {
 			var req = new XMLHttpRequest();
 			//设置传送方式  请求处理页  是否异步处理 默认为true异步
 			req.open("POST","workload/SetWorkloadServlet");
 			req.setRequestHeader("Content-type",
 					"application/x-www-form-urlencoded");
 			//传送数据	
 			var data = "ktbj=" + document.getElementById("selClassKt").value
 				+ "&kcmc=" + document.getElementById("selCourseKt").value
 				+ "&zxs=" + document.getElementById("zxs").value
 				+ "&realname=" + document.getElementById("realname").value;
 				
 			//发送请求
 			req.send(data);
 			//监听状态 调用回调函数
 			req.onreadystatechange = callBack；
 				
 		}

2.监听响应 处理响应

function callBack() = {
if (req.readyState === 4) {
 					if (req.status === 200) {	
 						
 						//接收数据
 						var dataStr = req.responseText;
 						//分割数据
 						var str = dataStr.split("&");
 						
 						var myTable = document.getElementById("table1");//获取table
 						var newTr = myTable.insertRow(); //table插入新的tr
 						
 						
 						/* document.getElementById("result").innerHTML = str[0]; */
 						for(var i=0;i

3.ajax的阶段性参数readyState的含义

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端调用了

 

4.Servlet处理代码

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

//设置数据类型返回数据类型

response.setContentType("text/plain");

//设置禁用缓存

response.setHeader("Cache-control","no-cache”);

 

响应数据的格式由Servlet设置ContentType决定：

text/xml   xml

text/html  html

text/plain  文本

application/json  json