ajax异步刷新实现更新数据库


Posted in Javascript onDecember 03, 2012

上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中。
ajax异步刷新实现更新数据库
当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库。
首先,我们需要声明XMLHttpRequest对象

//声明XMLHttpRequest对象 
var xmlHttp; 
function createXMLHTTP() { 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 
} 
else if (window.ActiveXObject) { 
try { 
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE老版本 
} 
catch (e) 
{ } 
try { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本 
} 
catch (e) 
{ } 
if (!xmlHttp) { 
window.alert("不能创建XMLHttpRequest对象实例!"); 
return false; 
} 
} 
}

同时,需要回调函数来确定是否修改成功
//更新或者添加记录的回调函数(检验是否评分成功) 
function ModifyScore () 
{ 
if (xmlHttp.readyState == 4) 
{ 
// if (xmlHttp.status == 200) 
{ 
if (xmlHttp.responseText == "true") 
{ 
} 
else 
{ 
// alert("评分失败,请重新评分或者与管理员联系"); 
} 
} 
} 
}

准备工作完成之后,下面就是关键的一步:
因为需要在修改分值的时候写入数据库,所以只需要在上篇博客中提高的改变下拉框值(循环选中项时)的执行这样一段代码:
//获取互评ID 
var criticsID = checkbox[i].value; 
//把修改值写入数据库 
//获取项目分数 
var scoreAll = document.getElementById("score" +checkbox[i].value + srcElem.id + ""); 
var accessAllScore = scoreAll.outerText; 
//获取项目编号 
var assess = document.getElementById("assess" + srcElem.id); 
var assessID = assess.title; 
createXMLHTTP(); //创建XMLHttpRequest对象 
//把数据传入到另一个页面执行 
var url = "CriticsAgainAjax.aspx?criticsID=" + criticsID +"&assessID=" + assessID + "&accessAllScore=" +accessAllScore + "&Event=allCriticsInfo"; 
xmlHttp.open("Post", url, true); 
// xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.onreadystatechange = AnswerOneKindQuestion; 
xmlHttp.send(null);

最后,我们只需要在CriticsAgainAjax.aspx获取参数,并执行写入数据库就可以了
//获取参数 
if(Request.QueryString["Event"].ToString() =="allCriticsInfo") 
{ 
string criticsID = Request.QueryString["criticsID"].ToString(); 
string assessID = Request.QueryString["assessID"].ToString(); 
string accessAllScore =Request.QueryString["accessAllScore"].ToString(); 
}

参数传过来之后,写入数据库就很容易了,这里就不提了。
这样,在前台显示的效果就是没有刷新,时时的把数据写入到数据库。只是把脏活累活都交给CriticsAgainAjax.aspx页面来干,这也是一种不错的分工。
这样写出了少刷新以外,还有另一个好处就是ajax是异步操作,即在js页面中把数据抛到CriticsAgainAjax.aspx之后,他就继续执行,他不考虑CriticsAgainAjax.aspx是否执行完成,可能抛过来100条数据,写入数据库需要三秒钟,而抛过来的时间是非常快的,可能就零点几秒,所以用户的感觉会非常好,他不需要在选中后等半天才能继续执行。
Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue一步步实现alert功能
Jul 05 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
js精度溢出解决方案
Dec 02 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
2017/07/06 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
python编程实现希尔排序
2017/04/13 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
员工教育培训协议书
2014/09/27 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
python中的装饰器该如何使用
2021/06/18 Python
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python