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学习资源站点
Aug 29 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
prototype.js常用函数详解
Jun 18 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 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
PHP获取url的函数代码
2011/08/02 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
JavaScript 参考教程
2006/12/29 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Python循环实现n的全排列功能
2019/09/16 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
EJB的角色和三个对象
2015/12/31 面试题
中学生自我鉴定
2014/02/04 职场文书
关爱残疾人标语
2014/06/25 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
python opencv旋转图片的使用方法
2021/06/04 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android