不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据
下面是用js实现的ajax
//ajax
//创建一个XmlHttpRequest对象
var xmlHttpReq;
function createXmlHttpRequest()
{
if(window.XMLHttpRequest)
{//非IE
xmlHttpReq = new XMLHttpRequest();
}else
{ //IE
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//删除学生信息
function dropValues(){
//获取多选框的值
obj = document.getElementsByName("studentInfo");
createXmlHttpRequest();
for(k in obj){
if(obj[k].checked){
//尝试以异步的get方式访问dropServlet
var stuName = obj[k].value;
alert("确认删除："+ stuName +"?");
//path
var url = "webDemo4/drop?oper=drop&sname="+stuName;
//向服务器发送请求
xmlHttpReq.open("get",url,true);
//回调函数
xmlHttpReq.onreadystatechange = processResponse;
xmlHttpReq.send(null);
}
}
}
//增加学生信息
function addValues(){
var name = $("#stuName").val();
var sex = $("#stuSex").val();
var age = $("#stuAge").val();
var addr = $("#stuAddr").val();
createXmlHttpRequest();
alert("增加学生信息:"+name);
//尝试以异步的get方式访问dropServlet
var url = "webDemo4/drop?oper=add&sname="+name+"&"+"ssex="+sex+"&"+"sage="
+age+"&"+"saddress="+addr;
//向服务器发送请求
xmlHttpReq.open("get",url,true);
//指定响应函数
xmlHttpReq.onreadystatechange = processResponse;
xmlHttpReq.send(null);
}
//响应函数
function processResponse() {
if (xmlHttpReq.readyState == 4) { // 判断对象状态
if (xmlHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
alert("刷新成功！");
$("#show").html(xmlHttpReq.responseText);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
//修改学生信息
function modifyValues(){
var name = $("#stuName").val();
var sex = $("#stuSex").val();
var age = $("#stuAge").val();
var addr = $("#stuAddr").val();
createXmlHttpRequest();
alert("修改学生信息:"+name);
//尝试以异步的get方式访问dropServlet
var url = "webDemo4/drop?oper=modify&sname="+name+"&"+"ssex="+sex+"&"+"sage="
+age+"&"+"saddress="+addr;
//向服务器发送请求
xmlHttpReq.open("get",url,true);
//指定响应函数
xmlHttpReq.onreadystatechange = processResponse;
xmlHttpReq.send(null);
}
//首次刷新
function fresh(){
createXmlHttpRequest();
var url = "webDemo4/drop?oper=query";
//向服务器发送请求
xmlHttpReq.open("get",url,true);
//指定响应函数
xmlHttpReq.onreadystatechange = processResponse;
xmlHttpReq.send(null);
}
fresh();
