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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
js实现幻灯片轮播图
Aug 14 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
JS 自动安装exe程序
2008/11/30 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python分治法定义与应用实例详解
2017/07/28 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
单位婚育证明范本
2014/11/21 职场文书
三八节活动简报
2015/07/20 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Mysql基础知识点汇总
2021/05/26 MySQL
详解Python requests模块
2021/06/21 Python