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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
利用node.js开发cli的完整步骤
Dec 29 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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
简单采集了yahoo的一些数据
2007/02/14 PHP
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
简单了解Python write writelines区别
2020/02/27 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
JNI的定义
2012/11/25 面试题
一套软件测试笔试题
2014/07/25 面试题
美术师范毕业生自荐信
2013/11/16 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
超越自我演讲稿
2014/05/21 职场文书
校园演讲稿汇总
2014/05/21 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
食品卫生管理制度
2015/08/06 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis