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学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
用js重建星际争霸
2006/12/22 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
使用node+vue.js实现SPA应用
2016/01/28 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
JS实现上传图片实时预览功能
2017/05/22 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
详解vuex的简单使用
2018/03/12 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python 判断网络连通的实现方法
2018/04/22 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
DBA的职责都有哪些
2012/05/16 面试题
应届生自我鉴定
2013/12/11 职场文书
销售行政专员职责
2014/01/03 职场文书
大学生村官任职感言
2014/01/09 职场文书
新文化运动的口号
2014/06/21 职场文书
事业单位聘任报告
2015/03/02 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
python爬虫--selenium模块
2021/03/31 Python