ajax方式实现局部刷新

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

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

function input() {
 			var req = new  HttpRequest();
 			//设置传送方式  请求处理页  是否异步处理 默认为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.  = 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<str.length;i++){
 							
 							var newTd = document.createElement(\"td\");//新建td
 							newTd.innerHTML = str[i];//td添加数据
 							newTd.setAttribute(\"align\",\"center\");//设置属性
 							newTr.appendChild(newTd);//tr追加td
 							
 						}
 						var newTd = document.createElement(\"td\");
 						newTd.innerHTML=\"删除\";
 						newTr.appendChild(newTd);
 						
 					} else {
 						//提示错误状态码
 						alert(\"发生错误：\" + req.status);
 					}
 				}
} 

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/   

text/html  html

text/plain  文本

application/json  json